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 Docs