任务规划或工作安排阶段可编辑式甘特图dhtmlx-gantt的使用方法

1）先引入dhtmlx-gantt：

npm install dhtmlx-gantt
import {gantt} form ‘dhtmlx-gantt’
@import ‘dhtmlx-gantt’/codebase/dhtmlxgantt.css

2)初始化一些设置

gantt.config.xml date = “%y-%m-%d” //日期格式
gantt.config.show errors = false //不提示报错信息
gantt.i18n.setLocale('cn') //语言修改为中文

3）增加自定义列

在做自己项目的时候需要加业务相关的列，可以设置是否居中、是否为树形以及宽度，在自定义列的时候一定要在最后加上name：‘add’的一条数据，不加这条新增的加号按钮会消失。

Const ganttColumns = [
	{align:’center’,name:’name’,label:’任务名称’，tree:true,width:’100’},
    {align:’center’,name:’start_date’,label:’开始时间’，tree:true,width:’100’},
    {align:’center’,name:’duration’,label:’持续时间’，tree:true,width:’100’},
    {name:’add’,min_width:’100’, max_width:’100’},
]
gantt.config.columns = ganttColumns

4)增加自定义字段

gantt.locale.labels.section.personName = “名称”//section_后面的是自定义字段名

5）自定义进度条上的展示内容

gantt.templates.task.text = function(start,end,task){
    let des = task.description?task.description:’’
    return task.name+des
}

6)获取已手动添加内容数据

const tasks = gantt.getTaskByTime() 

7)渲染后台返回任务内容

如果渲染错误或者数据请求成功但是页面不展示内容可以试着检查是不是有数据的时间不在时间区间内

gantt.parse(tasks)