Dhtmlx Gantt 常用方法及基本配置合集

甘特图基本配置

使用依赖

甘特图扩展功能

gantt.plugins({tooltip: true,quick_info: true,// 快速信息框// multiselect: true,// 激活多任务选择});

甘特图任务悬浮框位置

 gantt.config.tooltip_offset_x = 10;gantt.config.tooltip_offset_y = 30;

激活列表展开（折叠）功能

gantt.config.open_split_tasks = true;

创建新事件通过点击“+”按钮打开灯箱

gantt.config.details_on_create = true;

甘特图图表宽度自适应

gantt.config.autofit = true;

用户可以通过拖拽调整行高

 gantt.config.resize_rows = true;

界面初始化时展开图表树形结构

gantt.config.open_tree_initially = true;

图表项目栏可以任意拖拽（任意节点下)

  gantt.config.order_branch = true;gantt.config.order_branch_free = true;

新增空白列后新增项目

gantt.config.placeholder_task = true;

图表刷新后位置不变

 gantt.config.preserve_scroll = true;gantt.config.round_dnd_dates = true;

设置甘特图表头高度

  gantt.config.scale_height = 50;

是否显示依赖连线(取消)

gantt.config.show_links = true;

点击表头可排序

gantt.config.sort = true;

激活/禁用“quick_info”扩展（弹出任务的详细信息表单）

gantt.plugins({tooltip: true,quick_info: true,// 快速信息框});
gantt.config.show_quick_info = true;

点击表头可排序

gantt.config.sort = true;

设置行高

gantt.config.row_height = 44;

允许拖放

gantt.config.drag_project = true;

配置甘特图时间刻度高度

gantt.config.scale_height = 40;

设置甘特图时间的起始结束时间，并允许显示超过时间刻度任务

gantt.config.start_date = new Date(`${new Date().getFullYear()-2},${new Date().getMonth()},${new Date().getDay()}`)gantt.config.end_date = new Date(`${new Date().getFullYear()+2},${new Date().getMonth()},${new Date().getDay()}`)gantt.config.show_tasks_outside_timescale = true

设置时间刻度相关属性

  gantt.config.scales = [{ unit: "year", step: 1, format: "%Y" },{ unit: "month", step: 1, format: "%M" },];

配置任务内部显示元素

(用户可自定义任务内部显示内容)

 gantt.templates.task_text = function (start, end, task) {return `<span style="margin-left:10px;color:white;">${task.text}</span>`;};

配置Gantt内置弹出框元素(title内容)

gantt.templates.lightbox_header = function (start_date, end_date, task) {return `<b>${task.text}</b>`
};

配置Gantt内置弹出框元素

（此处除了 description 与 time 为gantt内置弹出框元素其余为自定义元素）

【 自定义元素详细配置方法在另外一篇文章解释 】

  gantt.config.lightbox.sections = [{name: "description",height: 36,map_to: "text",type: "textarea",focus: true,},{ name: "time", type: "duration", map_to: "auto" },{name: "Participants",height: 36,map_to: "Participants",type: "ParticipantsPlan",focus: true,},{name: "BgColor",height: 36,map_to: "color",type: "ParticipantsPlanColor",focus: true,},];

Gantt除了配置基本也可以配置指定元素弹出框

    // 配置任务灯箱gantt.config.lightbox.project_sections= [{name: "description", height: 70, map_to: "text", type: "textarea", focus: true},{name: "type", type: "typeselect", map_to: "type"},{name: "time", type: "duration", readonly: true, map_to: "auto"}];// 配置里程碑灯箱gantt.config.lightbox.milestone_sections= [{name: "description", height: 70, map_to: "text", type: "textarea", focus: true},{name: "type", type: "typeselect", map_to: "type"},{name: "time", type: "duration", single_date: true, map_to: "auto"}];

控制网格区域的样式（类名）

 gantt.templates.grid_row_class = function (start, end, task) {console.log("网格class", start, end, task);};

日期网格配置

  gantt.templates.date_grid = function(date, task, column){console.log('日期网格',date,task,column)if(task && gantt.isUnscheduled(task) && gantt.config.show_unscheduled){return gantt.templates.task_unscheduled_time(task);}else{return gantt.templates.grid_date_format(date);}}

配置网格缩进

gantt.templates.grid_indent = function(item){return '<div class="gantt_tree_indent" style="display:none"></div>'}

网格内容配置

【 自定义元素详细配置方法在另外一篇文章解释 】

gantt.config.columns=[{name:"text",       label:"Task name",  tree:true, width:'*' },{name:"start_date", label:"Start time", align: "center" },{name:"duration",   label:"Duration",   align: "center" },{name:"add",        label:"" }
];

任务的日期（格式化）

 gantt.templates.task_date= function(date){return gantt.date.date_to_str(gantt.config.task_date)(date);};

鼠标悬浮工具提示文本配置

【 此功能属于扩展功能需单独配置 】

 gantt.plugins({tooltip: true});

 gantt.templates.tooltip_text = function (start, end, task) {return ("<b>标题:</b> " +task.text +"<br/><span>开始:</span> " +gantt.templates.tooltip_date_format(start) +"<br/><span>结束:</span> " +gantt.templates.tooltip_date_format(end) +"<br/><span>进度:</span> " +Math.round(task.progress * 100) +"%");};

Gantt内置方法

【 return true 的含义是执行，默认即可 ,如果需要自定义 return fasle。便不会执行内置方法】

双击任务触发（每一行）

gantt.attachEvent("onTaskDblClick", function (id, e) {return true})

将任务添加到Gantt之前触发

gantt.attachEvent("onAfterTaskAdd",function(id,item){return true})

用户选择任务时触发

gantt.attachEvent("onTaskSelected",function(id){return true})

用户悬停Gantt时触发

gantt.attachEvent("onMouseMove",function(id,e){})

用户拖拽任务后释放鼠标之后，应用更改之前触发

gantt.attachEvent("onAfterTaskDrag",function(id,mode,e){return true})

点击“+”进行添加任务操作触发

gantt.attachEvent("onTaskCreated",function(task){return true})

用户打开Gantt内置弹出框之前触发

gantt.attachEvent("onBeforeLightbox",function(id){return true})

获取进度条进度

 gantt.templates.progress_text = function (start, end, task) {return Math.round(task.progress * 100) + "%";};

获取拉杆状态

 gantt.templates.drag_link = function (from, from_start, to, to_start) {console.log("拉杆from", from, from_start, to, to_start);// return text;};

获取拖动链接类

 gantt.templates.drag_link_class = function (from,from_start,to,to_start ) {console.log("from", from, from_start, to, to_start);};

层级折叠监听

// 监听折叠动作(打开)
gantt.attachEvent("onTaskOpened", function(taskId) {// console.log('节点状态(开)',gantt.getTask(taskId))
});
// 监听折叠动作(关闭)
gantt.attachEvent("onTaskClosed", function(taskId) {// console.log('节点状态(关)',gantt.getTask(taskId))
});

以上是项目中所用到的部分方法，详细内容可查看官方文档。

Gantt Docs