【Dxhtml Gantt】甘特图插件使用

• 下载

npm install dhtmlx-gant

• 使用方式

<div ref="gantt" class="left-container" />
    
// 高度设置
.left-container {
  height: calc(100vh - 50px - 90px );
}

import gantt from 'dhtmlx-gantt'  // 引入模块
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css' // 样式模块必须导入

gantt.i18n.setLocale("cn") // 语言本地化
gantt.init(this.$refs.gantt) // 初始化数据
gantt.parse(this.tasks) // 给表格传入数据

• 配置数据

// 设置列表从什么时候开始什么时候结束
gantt.config.start_date = data.start_date; // 开始日期：2023年1月1日
gantt.config.end_date = data.end_date; // 结束日期：2023年12月31日
          
gantt.config.initial_scroll = false;  // 滚动
gantt.config.split = true;
gantt.config.date_format = "%Y-%m-%d"; // 传入日期数据的格式
gantt.config.drag_move = false // 是否可以手动拖动任务
gantt.config.drag_links = false // 是否可以手动拖动连接线
gantt.config.drag_resize =false // 是否可以手动拉伸任务
gantt.config.show_progress = false; // 是否显示进度条
gantt.config.columns = [ // 任务列项设置
    {
      name: "name", //tasks参数名
      tree: true, //是否开始tree联级
      width: '200', //宽度 值为string 例如 width:"75"  "*" 为auto
      resize: true, //可重置大小
      label: '策划名称', //标签名
      template: function (obj) { return obj.name }, //返回值
      align: "center" //对齐方式,
      onrender: function(task, node) { // 在策划名称对相同名称的进行单元格合并操作
            if(task.addNum && task.addNum > 0){
              node.parentNode.style.height = `${ 35 * task.addNum }px`
              node.childNodes[node.childNodes.length - 1].style.lineHeight = `${ 35 * task.addNum }px`
            }else{
              node.style.display = 'none'
            }
          },
    }
]

 gantt.config.scales = [ // 修改表头时间格式为10-14
    {unit: "day", step: 1, format: "%m-%d"}
  ];
 gantt.plugins({
    tooltip: true, // 是否设置移动到任务上的tip提示
    quick_info: true // 是否设置点击的时候在任务附近弹出对应的编辑框
});
      
 // 双击任务时候触发的事件
gantt.attachEvent("onTaskDblClick", function (id, e) {
  return false; // false 禁止默认事件
});

onTaskClick // 点击事件
// 点击触发quick-info的时候，啥时候弹出qucik-info框子
gantt.attachEvent("onQuickInfo",function(taskId){
    let item = gantt.getTask(taskId) // // 获取当前任务对应的数据
    if(item.isNotClick){
    gantt.ext.quickInfo.hide(); // 不显示当前任务的quick-info弹框
  }else{
    gantt.ext.quickInfo.show(taskId); // 显示当前任务的quick-info弹框
  }
});

// 自定义quick-info上默认的delete和edit按钮事件
gantt.$click.buttons.delete = (id)=>{
}
gantt.$click.buttons.edit = (id)=>{
}

// 数据更新之后对表格进行重新渲染
reload() {
  gantt.clearAll();// 从甘特图中删除所有任务和其他元素（包括标记）
  gantt.parse(this.tasks); // 数据解析
  gantt.render(); // 呈现整个甘特图
},

• 单元格合并 主要是通过onrender来实现对两个相同元素进行单元格合并的（高度默认是35px） docs.dhtmlx.com/gantt/deskt…

gantt.config.columns = [
    {
      name: "name", //tasks参数名
      tree: true, //是否开始tree联级
      width: '200', //宽度 值为string 例如 width:"75"  "*" 为auto
      resize: true, //可重置大小
      label: '策划名称', //标签名
      template: function (obj) { return obj.name }, //返回值
      align: "center", //对齐方式
      onrender: function(task, node) { 
      // 对于存在addNum属性的单元格就显示并将高度设置到合并之后的高度，没该元素的就将不显示改元素
        if(task.addNum && task.addNum > 0){
          node.parentNode.style.height = `${ 35 * task.addNum }px`
          node.childNodes[node.childNodes.length - 1].style.lineHeight = `${ 35 * task.addNum }px`
        }else{
          node.style.display = 'none'
        }
      },
    }
  ]

• 链接docs.dhtmlx.com/gantt/
• 官方（docs.dhtmlx.com/gantt/api__…