快速开发web甘特图功能：MZGantt原生js甘特图插件使用说明

MZGantt甘特图插件

MZGantt是一款原生js开发的甘特图插件。支持vue，ts，js等，支持流行的各种前端框架，可以快速引用到我们的web程序或者移动应用中。

一. 插件特征

• 拖拽编辑：支持拖拽编辑

• 行内编辑：支持行内编辑功能

• 弹框支持：提供任务model，与外部弹框配合，完成任务编辑。

• 列自定义：支持自定义任务属性列

• 多段展示：支持任务行内多段展示

• 支持日历：支持自定义日历

• 图片导出：支持甘特图完整图片导出

• 大数据处理：支持懒加载方式加载任务

• 过滤器支持：支持设定条件，快速筛选

• 里程碑标记：支持配置显示里程碑标记线条

• 四种任务关系：支持拖拽建立和编辑四种任务关系(FS,FF,SF,SS)

• 消息框自定义：支持消息框内容和样式自定义

• 样式可调：支持显示样式自定义

• 使用简单：js直接引用或者通过npm安装使用（支持vue，ts）

• 参数配置：提供丰富配置参数和接口满足项目需求

二. 演示

演示地址：https://mzgantt.tecjt.com

三. 如何使用?

MZGantt支持js引用和npm安装两种使用方式。

1. 下载
   使用之前，需要下载js插件或使用npm进行安装（点击联系我们获取）。

2. 引用MZGantt插件
   在html页面头部中引入如下js包：

   • 普通js引用:

   <!-- 引入jquery库 -->
   <script language="javascript" src="jquery.min.js"></script>
   
   <!-- 引入甘特图插件 -->
   <link rel="stylesheet" type="text/css" href="./gantt/mzgantt.css" />
   <script language="javascript" src="./gantt/mzgantt.js"></script>
   <script language="javascript" src="./gantt/edit.js"></script>
   

   • npm引用:

   // 导入MZGantt包，具体有如下几个包，按具体需求引入
   //      1. 基础包：MZGantt（必须引入。包含甘特图基本展示等功能）
   //      2. 编辑功能包：MZGanttEditor（按需引入。包含甘特图编辑功能）
   //      3. 导出功能包：MZGanttExport（按需引入。包含甘特图导出图片功能）
   //      4. 移动端支持包：MZGanttMobile（按需引入。包含移动端支持功能）
   import {MZGantt, MZGanttEditor} from './mzgantt';
   
   // 获取并设置授权key
   MZGantt.LicenseKey = "您的授权key";
   

3. 定义甘特图容器(div)
   在html页面内定义一个div，作为展示甘特图的容器：

   <div id="GanttChartDIV" style="width:100%;"></div>
   

4. 定义甘特图参数（可定义空对象{}，插件将使用使用默认值）
   此步骤可选。在需要个性化显示甘特图时，可以通过设置甘特图参数来实现。部分可设置参数如下：

   var ganttConfig = {
       useFor: "Task",                         // 设置甘特图用途，资源利用（比如会议室管理）：'Resource', 任务管理（比如计划和进度管理）：'Task'。默认:Task
       ganttStatus: "e",                       // 设置甘特图状态（ e:编辑计划, r：只读）
   
       // 列配置
       columnDefs: [
           {name: 'seq',         field: "seq",        type:"level"},
           {name: 'checkbox',    field: "checkbox"},
           {name: 'iconColsVal', field: "iconColsVal", width: 30},
   
           // 以下字段，name可自定义，且须与数据中相应项目名称对应。field值为内置固定值，不可重新设置，且不支持设置type。
           {name: 'name',        field: "name",       title: "任务名称", width: 150},
           {name: 'resId',       field: "resId",      title: "责任人",   width: 50,    options: resourceList},
           {name: 'dur',         field: "dur",        title: "工期",     width: 60},
           {name: 'planStart',   field: "planStart",  title: "计划开始", width: 120, editable: false},
           {name: 'planEnd',     field: "planEnd",    title: "计划完成", width: 120},
           {name: 'planDur',     field: "planDur",    title: "计划人天", width: 60},
           {name: 'rsltStart',   field: "rsltStart",  title: "实际开始", width: 120},
           {name: 'rsltEnd',     field: "rsltEnd",    title: "实际完成", width: 120},
           {name: 'rsltDur',     field: "rsltDur",    title: "实际人天", width: 60},
           {name: 'pctComp',     field: "pctComp",    title: "完成度",   width: 60},
           // {name: 'caption',     field: "caption",    title: "标签文字"},
   
           // 自定义列（field: "custColsVal"）：支持设置type：DropDownList/TextBox
           {name:"testCol1", field: "custColsVal", title:"列名1", type: "TextBox", default: 10, width:50,align:"left"},
           {name:"testCol2", field: "custColsVal", title:"列名2", type: "DropDownList", options:dropDownListData, width:100, align:"left"},
           {name:"testCol3", field: "custColsVal", title:"列名3","width":150,"align":"left"}
       ],
   
       // 甘特图区域显示控制
       showTrack: 1,                           // 0:计划甘特图；1:实绩甘特图 。默认：计划甘特图。
       showDuplicate: 0,                       // 是否显示 资源重叠分配标志
       showMileStone: 1,                       // 是否显示 里程碑：不显示
       showDependencies: 1,                    // 是否显示 连接线(0/1),默认：0不显示。
       showDayDate: "date",                    // 设置day格式时，显示星期或者日期（day:星期；date:日期）。默认:day显示星期。
       showWeekIndex: "",                      // 设置day格式时，右侧首行显示第几周或者显示周第一个日期。Y：显示周数，其他，显示日期。默认显示日期。
   
       // 数据定义类===============================================================================
       holidayList: [                          // 设置节假日列表。在正常显示周末的情况下，添加列表中的日期作为节假日，灰色显示。
           '2023-02-09',
           '2023-02-21',
           '2023-03-20'],
       workdayList: ['2023-03-18'],            // 设置出勤日列表
       mileStoneLines: [                       // 里程碑配置
           {date:'2023-11-05',name:'startMS', title:'项目设计讨论', color:'#FF00BF', thickness: "2px"},
           {date:'2023-11-25',name:'pjMeeting', title:'代码review', color:'#088A29', thickness: "2px"},
           {date:'today',name:'today', title:'今日', color:'#FF0000', thickness: "2px"}
       ],
   
       // 插件配置类===============================================================================
       captionType: 'Caption',                 // 设置甘特图标题(None,Name, Caption,Resource,Duration,Complete,Reserver,Title,Theme)  None:不显示标题
       captionPosition: 'Right',               // 设置甘特图标题显示位置（Over:甘特图条上方；Right:甘特图条右侧，默认Over)
   
       // 显示日期格式和输入日期格式应该统一
       dateFormat: 'yyyy-mm-dd',               // 设置参数日期格式 ('mm/dd/yyyy', 'dd/mm/yyyy', 'yyyy-mm-dd','yyyy/mm/dd')
       weekStartDay: 0,                        // 设置星期第一日（1：星期一开始；0：星期天开始），默认：0
   
       workingHourRange: ['1','23'],           // 设置hour格式下的每天的工作时段。(以小时为单位)。默认: 1,23。
       hourFormat: 0,                          // 设置hour格式（0:小时后不加:00；1:小时后加:00）。默认:0显示星期.
   
       dragChgDur: "1",                        // 设置拖拽变更工日,如果showChgDur设置为不显示，则该选项的设置无效。
       autoCalDur: 1,                          // 设置自动计算工日（默认不自动计算）
   
       includeHoliday: "N",                    // 工日计算是否包含假期和周末：Y: 包含；N:不包含
       includeToTime: "Y",                     // 甘特图完成时间是否包含最后一个时间点（开始和完成时间为日期类型时设置为包含，小时的话设置为不包含），默认Y
   
       durPrecision: 2,                        // 设置工期和工日精度（默认小数后一位）
       fixColsCnt: 3,                          // 设置锁定列数, 默认:0(不锁定列)
       fixParent: 1,                           // 固定父任务范围（1：不随子任务拖动而变动；0：随子任务拖动而变动）
       idType: "Snow",                         // 任务id计算方法（默认：12位任意字符；UUID: uuid; Snow: 雪花id）
   
       // 样式控制类===============================================================================
       // 背景色设置类
       // planBackground: vPlanBackground,     // 设置甘特图计划条背景
       // resultBackground: vResultBackground, // 设置甘特图实绩条背景
       compBackground: '#0000FF',              // 设置完成度背景
       // groupBackground: '#00FF00',          // 设置父任务行背景
       holidayBGColor: '#E6E6E6',              // 设置休息日/假期背景
       currentTimeBackColor: ['h','#FF9797'],  // 设置当前时间背景(参数1：h: 通过设置表头样式显示当前时间; c: 通过设置内容单元格样式显示当前时间。参数2：颜色值)
       intervalColor: ['#FFFFFF','#F4F4F4'],   // 设置隔行背景颜色, 默认: #FFFFFF,#F4F4F4
       selectedRowColor: '#CAE1FF',            // 设置选中行背景颜色, 默认: #CAE1FF
       selectedCellColor: '#2E9AFE',			// 设置选中单元格边框颜色，默认：2E9AFE
       borderColor: '#9E9E9E',                 // 设置甘特图边框颜色, 默认: #9E9E9E
   
       // 甘特图条
       barBorderRadius: 6,                     // 设置甘特图条圆角半径, 默认: 3px
       barBorderWeight: 1,                     // 设置甘特图条边框粗细, 默认: 1px
       barBorderColor: '#9E0000',              // 设置甘特图条边框颜色, 默认: #9E9E9E
       barOpacity: 1,                          // 设置甘特图条透明度，默认：0.7
       barGridBorderWeight: 1,                 // 设置甘特图条背景边框粗细, 默认: 1px
       resultBarStyle: 'mark',                 // 实绩条样式（normal:不标记计划外日期，mark: 标记计划外日期; cust: 自定义分段）
       markResultBarColor:                     // 实绩条样式为mark类型时，实绩条背景颜色
   	{beforePlanBGColor: '#00FF00',
   	 exceedPlanDBColor: '#cc0000'},
       barHeightAdj: 0,						// 进度条高度调整量（默认0px，不做任何调整；值越大，进度条越高。可以为负值）
       barDistanceAdj: 0,						// 计划进度条和实际进度条之间距离调整量（默认0px，不做任何调整；值越大，距离越近。可以为负值。）
   
       // 拖动杆
       dragHandlerBackColor: '#D8D8D8',		// 拖动杆背景色
   
       // lineExpandLen: 0,                    // 依赖线伸出量参数
       dependLineColor: '#228B22',             // 连接线颜色
       dependLineMouseOverColor: '#FE9A2E',    // 连接线鼠标浮动颜色
       criticalPathBGColor: '#FE9A2E',         // 关键路径标记颜色
   
       // 宽高设置
       leftSideWidth: 300,                     // 设置左侧框宽度, 默认:300px
       contentHeight: 360,                     // 设置甘特图高度（不含表头）, 默认:300px.如果在页面调用adjustGanttHeight函数使甘特图高度自适应，则次参数可不设置。
       rowHeight: 35,                          // 设置行高度, 默认:35px
   
       // 左侧列宽度设置，在完善columnDefs后，这部分就可以废弃了。
       iconColWidth: 30,                       // 设置图标列宽度，默认:60px
       nameColWidth: 150,                      // 设置任务/资源列宽度，默认:150px
       dateColWidth: 120,                      // 设置日期列宽度，默认:80px
   
       // 右侧格子宽度设置（不同时间刻度时）
       hourColWidth: 20,                       // 小时刻度时
       dayColWidth: 20,                        // 天刻度时
       monthColWidth: 70,                      // 月刻度时
       quarterColWidth: 100                    // 季度刻度时
   };
   
   // 甘特图参数配置
   myGantt.config(ganttConfig);
   

5. 后台获取数据，或定义数据

   /*
     甘特图数据对象项目说明：
     一：内置固定数据项，不可自定义其他名称。
       1. id                  //（必须）节点编号
       2. plan                //（可选）计划数据。
       3. isExpand            //（可选）是否展开显示 1:展开/0:收缩
       4. isGroup             //（可选）是否设置为父（组）1：组/0：子节点
       5. preNodes            //（可选）前置节点，多个前置节点时，使用逗号分开
       6. parentId            //（可选）父节点编号(最顶层节点，该值须设置为空"")
       7. isMS                //（可选）是否里程碑
   
     二：以下数据项，可使用自定义名称，须与列定义中name匹配。
       8. name                //（必须）名称（可以作为任务名称，资源名称等）
       9. iconColsVal         //（可选）图标列(可以是用逗号隔开的多个图标）
       10. rsltStart          //（可选）实际开始
       11. rsltEnd            //（可选）实际完成
       12. rsltDur            //（可选）实际工日
       13. custColsVal        //（可选）自定义列的值，需要与自定义列配置一一对应。
       14. planBarColor       //（可选）甘特图计划背景
       15. resId              //（可选）资源/负责人
       16. pctComp            //（可选）完成度（0 ~ 100 百分比)
       17. caption            //（可选）标题
       18. seq                //（可选）排序号
   */
   
   // 甘特图数据
   let ganttData= [
       {
           "id": 1,
           "seq": 1000,
           "iconColsVal": [],
           "name": "单位A施工期间",
           "plan": [{}],
           "rsltStart": "",
           "rsltEnd": "",
           "rsltDur": 1,
           "planBarColor": "",
           "isMS": 0,
           "resId": "1",
           "pctComp": 0,
           "isGroup": 1,
           "parentId": "",
           "isExpand": 1,
           "preNodes": "",
           "caption": "重点关注",
           "testCol1": "10",
           "testCol2": "02",
           "testCol3": "<img src='./images/stop.png'>",
       }, {
           "id": 11,
           "seq": 2000,
           "iconColsVal": [{
                   "src": "./images/stop.png",
                   "title": "停止"
               }
           ],
           "name": "任务名称1",
           "plan": [{
                   "start": "",
                   "end": "",
                   "dur": "2"
               }
           ],
           "rsltStart": "2023-07-02",
           "rsltEnd": "2023-07-06",
           "rsltDur": 1,
           "planBarColor": "#2EFE9A",
           "isMS": 0,
           "resId": "2",
           "pctComp": 50,
           "isGroup": 0,
           "parentId": 1,
           "isExpand": 1,
           "preNodes": "",
           "caption": "",
           "testCol1": "1",
           "testCol2": "02",
           "testCol3": "",
           "custRsltBars": [
               {
                   name: "p1",
                   title: "分段1",
                   start: "2023-07-02",
                   end: "2023-07-04",
                   style: "background:#2E9AFE;color:#FFFFFF;text-align:left;"
               }, {
                   name: "p2",
                   title: "分段2",
                   start: "2023-07-06",
                   end: "2023-07-17",
                   html: "<span style='height:7px;border-radius:5px 5px;position:absolute;left:5px;top:-1px;background:red;font-size:9px;color:#FFFFFF'>美丽</span>",
                   style: "background:#FF0000;color:#FFFFFF;text-align:left;"
               },
           ],
       }, {
           "id": 12,
           "seq": 3000,
           "iconColsVal": [],
           "name": "任务名称2",
           "plan": [{
                   "start": "2023-07-06",
                   "end": "2023-07-10"
               }
           ],
           "rsltStart": "2023-07-07",
           "rsltEnd": "2023-07-10",
           "rsltDur": 1,
           "planBarColor": "#2EFE9A",
           "isMS": 0,
           "resId": "2",
           "pctComp": 10,
           "isGroup": 0,
           "parentId": 1,
           "isExpand": 1,
           "preNodes": "",
           "caption": "备注1",
           "testCol1": "1",
           "testCol2": "03",
           "testCol3": "",
       }, {
           "id": 13,
           "seq": 4000,
           "iconColsVal": [{
                   "src": "./images/star.png",
                   "title": "星级"
               }
           ],
           "name": "任务名称3",
           "plan": [{
                   "start": "2023-07-11",
                   "end": "2023-07-15"
               }
           ],
           "rsltStart": "2023-07-11",
           "rsltEnd": "2023-07-14",
           "rsltDur": 1,
           "planBarColor": "#2EFE9A",
           "isMS": 0,
           "resId": "2",
           "pctComp": 20,
           "isGroup": 0,
           "parentId": 1,
           "isExpand": 1,
           "preNodes": 12,
           "caption": "",
           "testCol1": "50",
           "testCol2": "01",
           "testCol3": "",
       }, {
           "id": 14,
           "seq": 5000,
           "iconColsVal": [],
           "name": "任务名称4",
           "plan": [{
                   "start": "",
                   "end": "2023-07-17"
               }
           ],
           "rsltStart": "2023-07-16",
           "rsltEnd": "2023-07-17",
           "rsltDur": 1,
           "planBarColor": vPlanBackground,
           "isMS": 0,
           "resId": "2",
           "pctComp": 0,
           "isGroup": 0,
           "parentId": 1,
           "isExpand": 1,
           "preNodes": "",
           "caption": "",
           "testCol1": "20",
           "testCol2": "01",
           "testCol3": "",
       },
       {
           "id": 2,
           "seq": 6000,
           "iconColsVal": [],
           "name": "单位B施工期间",
           "plan": [{}
           ],
           "rsltStart": "",
           "rsltEnd": "",
           "rsltDur": 1,
           "planBarColor": "",
           "isMS": 0,
           "resId": "1",
           "pctComp": 0,
           "isGroup": 1,
           "parentId": "",
           "isExpand": 1,
           "preNodes": "",
           "caption": "",
           "testCol1": "4",
           "testCol2": "01",
           "testCol3": "<img src='./images/stop.png'>",
       }, {
           "id": 21,
           "seq": 7000,
           "iconColsVal": [{
                   "src": "./images/stop.png",
                   "title": "停止"
               }
           ],
           "name": "任务名称1",
           "plan": [{
                   "start": "2023-07-19",
                   "end": "2023-07-29"
               }
           ],
           "rsltStart": "2023-07-26",
           "rsltEnd": "2023-07-29",
           "rsltDur": 1,
           "planBarColor": vPlanBackground,
           "isMS": 0,
           "resId": "2",
           "pctComp": 40,
           "isGroup": 0,
           "parentId": 2,
           "isExpand": 1,
           "preNodes": "",
           "caption": "",
           "testCol1": "4",
           "testCol2": "02",
           "testCol3": "",
       },
       ......
   ];
   

6. 创建甘特图对象

   // 实例化甘特图对象（在vue中需要执行此语句进行甘特图对象实例化）
   const myGantt = MZGantt.init();
   
   // 启动功能模块
   //   (1)使用插件npm安装包时，如果需要编辑、导出和移动端支持功能，引用相应功能包后，需要在此启动
   //   (2)使用插件普通js包时，以下启动（start）命令可以略去。
   //启动甘特图编辑
   MZGanttEditor.start(myGantt);
   // 启动导出功能
   MZGanttExport.start(myGantt);
   
   /*
   创建并展示甘特图
       参数1：(必须)容器div对象id
       参数2：(可选)时间刻度类型
       参数3：(可选)配置选项
       参数4：(可选)数据
   */
   myGantt.createGantt("GanttChartDIV", "day", ganttConfig, data);
   
   // 注意：此处如果为设置ganttConfig和data，可以独立使用配置方法和绑定数据等方法
   // 甘特图参数配置
   myGantt.config(ganttConfig);
   
   // 加载数据
   myGantt.bindGanttData(data);
   
   // 甘特图展示
   myGantt.drawGantt()
   

7. 监听事件
   MZGantt支持监听渲染或者点击等事件，可以使用这些事件实现一些特殊的控制效果。

   // 单元格渲染
   myGantt.on("cellRender", function (row, cellObj) {
       // *******************************************************
       // 可对以下类型单元格（field)进行渲染控制：
       // 一. 内置类型列：
       //    name                 名称
       //    iconColsVal          图标列
       //    resId                资源/负责人
       //    planStart            计划开始
       //    planEnd              计划完成
       //    planDur              计划人天
       //    rsltStart            实际开始
       //    rsltEnd              实际完成
       //    rsltDur              实际工日
       //    pctComp              完成度
   
       // 二.自定义列
       //    testCol1             自定义列名（name)
       // *******************************************************
   
       // 获取单元格名称
       var field = cellObj.field;
   
       // 定义渲染样式对象
       var cellStyle = {};
   
       // 样式设置：任务名称
       if (field == "name") {
           if (row.plan[0].dur > 5) {
               cellStyle["cellHTML"] = '<span style="color:red;" >' + row.name + '</span>';
               // cell.style.color = "red";
           }
           if (row.plan[0].dur >= 2 && row.plan[0].dur <= 5) {
               cellStyle["cellHTML"] = '<span style="color:green;" >' + row.name + '</span>';
           }
           if (row.plan[0].dur < 2) {
               cellStyle["cellHTML"] = '<span style="color:black;" >' + row.name + '</span>';
           }
       }
   
       // 样式设置：负责人
       if (field == "resId") {
           if (row.name == "任务名称1") {
               cellStyle["ce11Style"] = 'color:green;font-weight:bold';
           }
       }
   
       // // 样式设置：自定义列(使用自定义列名称)
       // if (field == "testCol2") {
       //   cellStyle["cellHTML"] = '<input id="tstBtn" type ="button" value="隐藏里程碑" οnclick="test1">';
       // }
   
       return cellStyle;
   });
   
   // 进度条渲染
   myGantt.on("barRender", function (row) {
       // 定义渲染样式对象
       var barStyle = {};
   
       if (row.name === "任务名称2") {
           barStyle["planBarStyle"] = 'background:red;';
           // barStyle["planBarLeftHtml"] = '<img width="20px" height="20px" src="./images/work.svg" />';
           // barStyle["planBarOverHtml"] = '';
           barStyle["planBarRightHtml"] = '<div style="display:block;">努力最酷啊</div>';
       }
   
       // 返回对象
       return barStyle;
   });
   
   // 点击进度条
   myGantt.on("clickBar", function (row, eventXY, dom) {
       console.log("click: 任务：" + row.name + ", 点击日期:" + eventXY.date);
   });
   
   // 右键点击进度条
   myGantt.on("rightClick", function (row, eventXY, dom) {
       console.log("right click: 任务：" + row.name + ", 点击对象id:" + dom.id);
       console.log("点击日期:" + eventXY.date);
   });
   

8. 多种加载方式
   为了提升加载效率，插件支持多种加载方式。

   方式1：普通加载（一次性加载并渲染所有任务）

   // 创建甘特图对象并配置
   myGantt.createGantt("GanttChartDIV", "day");
   myGantt.config(ganttConfig);
   // 绑定数据
   myGantt.bindGanttData(data);
   
   // ※ 以上三个步骤可以简化为:
   myGantt.createGantt("GanttChartDIV", "day", ganttConfig, data);
   

   方式2：数据监听渲染加载

   // 配置参数
   var ganttConfig = {
       loadType: "listenLoad"
   };
   
   // 创建甘特图对象并配置
   myGantt.createGantt("GanttChartDIV", "day");
   myGantt.config(ganttConfig);
   
   // 定义甘特图监听器
   var dataListener = myGantt.listener;
   
   // 设置值甘特图值，自动驱动插件，更新显示。
   dataListener.rawGanttData = [
       {
           "id": 1,
           "seq": 1000,
           "iconColsVal": [],
           "name": "单位A施工期间",
           "rsltStart": "",
           "rsltEnd": "",
           "rsltDur": 1,
           "planBarColor": "#C0EBE8",
           "linkTo": "http://",
           "isMS": 0,
           "resId": "1",
           "pctComp": 0,
           "isGroup": 1,
           "parentId": "",
           "isExpand": 1,
           "preNodes": "",
           "caption": "重点关注",
           "plan": [{ "start": "2023-07-05", "end": "2023-07-06", "dur": 10 }]
       }
   ];
   
   // 不需要再执行bindGanttData和drawGantt方式
   

   方式3：分页渲染（一次性加载所有数据，分页渲染）

   // 配置参数
   var ganttConfig = {
       loadType: "loadAllToPage",
       pageSize: 20         // 分页加载页面大小
   };
   
   // 创建甘特图对象并配置
   myGantt.createGantt("GanttChartDIV", "day");
   myGantt.config(ganttConfig);
   
   // 绑定数据(数据按页逐页展示出来)
   myGantt.bindGanttData(data);
   

   方式4：分页加载渲染（每次加载并渲染一定行数，逐页加载并渲染）

   // 分页加载处理
   //   参数pageNo为插件要请求页面的数据，从1开始
   function loadPageData(pageNode) {
       // 返回参数指定页的甘特图数据
       ...
   }
   
   // 配置参数
   var ganttConfig = {
       loadType: "loadByPage",
       pageSize: 20,               // 分页加载页面大小
       loadDataFunc: loadPageData  // 分页加载处理
   };
   
   // 创建甘特图对象并配置
   myGantt.createGantt("GanttChartDIV", "day");
   myGantt.config(ganttConfig);
   
   // 甘特图渲染
   myGantt.drawGantt();
   

四. 任务添加和编辑弹框

MZGantt插件提供任务数据模型(task Model)，您可在项目中以弹框或者其他输入方式，收集用户输入信息，作成模型数据，然后调用插件接口进行任务的添加和编辑操作。

// ****************** 弹框示例参考如下 ******************
// 第一步：使用弹框，弹框确认时构造如下数据
var task = {};

task.name = "测试任务1";                                               // (必须)任务名称
task.isGroup = 0;                                                     // (可选)是否父任务（组）
task.iconColsVal = [{"src": "./images/test.jpg","title": "",}];       // (可选)图标列值
task.resId = "01";                                                    // (可选)担当者id
task.resName = "刘德华";                                              // (可选)担当者姓名（可选)
task.plan = [{"start": "2023-12-20","end": "2023-12-25","dur": 5}];   // (可选)计划数据
task.planBarColor = "#FF0000";                                        // (可选)进度条颜色
task.rsltStart = "2023-12-20";                                        // (可选)实际开始
task.rsltEnd = "2023-12-26";                                          // (可选)实际完成
task.pctComp = 90;                                                    // (可选)完成百分比
task.rsltDur = 6;                                                     // (可选)完成量
task.preNodes = [{"id":13,"type":"FS","gapDays":1}];                  // (可选)前置任务（可多个）
task.parentId = "";                                                   // (saveType为add/append/insert时可选；为addChild时必须)父任务
task.caption = "测试任务1";                                            // (可选)任务标题
task.isMS = 0;                                                        // (可选)是否里程碑任务

// 第二步: 更新任务行数据
var ret = MZGantt.updRows(saveType, createTaskModel());	              // saveType: add/append/insert/edit/addChild
if (ret.code == 0) {
    // 关闭任务输入框

} else {
    // 提示错误消息
    console.log(ret.msg);
    return;
}

五. 高级功能

MZGantt支持更多高级功能，如多语言包设置，拖动建立并编辑任务关系等。

1. 语言包设置

   // 设置语言包
   //   注意：设置语言类型，需要在甘特图显示方法（drawGantt）之前执行。
   myGantt.setGanttLang("en");        // cn: 中文; en:英语; jp:日语;
   
   // 字符重命名（以下字符可重命名）
   //     count_tab: "第",
   //     reserve_pic: "预约者",
   //     theme: "主题",
   //     loading:"加载中...",
   //     click_2_view:"查看图文",
   //     column_task: "任务名称",
   //     column_complete_ratio: "完成度",
   //     column_rslt: "实际起止日期",
   //     column_start_date: "计划开始时间",
   //     column_end_date: "计划完成时间",
   //     column_rslt_start_date: "实际开始时间",
   //     column_rslt_end_date: "实际完成时间",
   //     week: "周",
   //     quarter: "季度",
   //     menu_goto:"转到任务",
   //     menu_goto_today:"定位到今天",
   //     select_child:"选择所有子任务",
   //     menu_FF: "完成-完成(FF)",
   //     menu_FS: "完成-开始(FS)",
   //     menu_SF: "开始-完成(SF)",
   //     menu_SS: "开始-开始(SS)"
   var labelDefs = {
       "menu_SF":"开-完"}
   ;
   myGantt.setMyLabels(labelDefs, "en");
   

2. 进度条消息框自定义
   鼠标放在进度条上，会自动显示提示框，显示任务信息。也可以根据需求，自定义提示框。

   // 在甘特图配置中设置参数infoBoxItems和infoBoxStyle
   var ganttConfig = {
       ...
       infoBoxItems: [       // 信息框项目定义
           {
               title: '',value: "name",
               titleStyle: "font-weight: bold;",
               valStyle: "font-weight: bold;"},
           {
               title: '公式写法',	expression: "((testCol1 * testCol3) + pctComp) + '天'",
               titleStyle: "font-weight: bold;",
               valStyle: "color: red;"},
           {
               title: '格式化字串',	value: "这是格式化写法: {planStart}",
               titleStyle: "font-weight: bold;",
               valStyle: "color: red;"},
           {
               title: '计划开始',	value: "planStart",
               titleStyle: ""},
           {
               title: '计划结束', value: "planEnd",
               titleStyle: "", },
           {
               title: '实际开始',	value: "rsltStart",
               titleStyle: ""},
           {
               title: '实际结束', value: "rsltEnd",
               titleStyle: "", },
           {
               title: '标题', value: "title",
               titleStyle: "", }
       ],
       infoBoxStyle:        // 信息框样式定义
           "BORDER: #cdcdcd 1px solid;background:#FFFFFF;box-shadow: 3px 3px 2px #CDCDCD;border-radius:5px;padding:5px;",
   
       ...
   }
   

   信息项目的设置，可以选择以下任意一种方式：

   1. 使用值（vulue）
   2. 使用公式（expression）
      • 日期/字符类型的值：须加上引号，比如:

        expression: “这是实际开始日: ‘rsltStart’”

      • 数值型的值：直接写在公式中即可，比如：

        expression: “((testCol1 * testCol3) + pctComp) + ‘天’”

   3. 使用字符替换（{…}）

3. 任务关系

• 建立任务关系：
  编辑状态下，在A任务进度条上按下鼠标向下拖动，拖动到B任务松*开鼠标，会弹出任务关系弹框，选择任务关系，点击确定即可建立任务A和B之间的关系。

• 编辑任务关系：
  编辑状态下，点击关系线，弹出任务关系弹框，修改或删除任务关系。

• 间隔时间修改方法：
  方法1：在关系弹框中修改保存；
  方法2：拖动后置任务，自动修改。

六. 插件方法及事件

MZGantt提供丰富接口，操作或控制甘特图数据和特征。

1. 甘特图显示

   方法	方法	参数
   init	初始化甘特图实例	无（vue中使用插件时，需要执行此方法实例化插件）
   createGantt	创建甘特图对象	参数1：（必须）DIV容器ID 参数2：（可选）时间刻度day/week/month/quarter（默认day） 参数3：配置选项 参数4：(可选)数据
   config	配置甘特图	JSON对象值，参考：甘特图参数配置
   bindGanttData	绑定甘特图数据	甘特图JSON数据：需要符合MZGantt数据model
   drawGantt	显示甘特图	无

2. 显示控制

   方法	说明	参数
   changeFormat	变更显示刻度	显示刻度：day/week/month/quarter
   switchTrack	切换显示实绩	开关值：true/false
   showMileStone	切换显示里程碑时间标记线	开关值：true/false
   setMSLine	动态添加/修改里程碑时间标记线	里程碑定义对象（参考mileStoneLines中对象定义）
   rmMSLine	动态删除里程碑时间标记线	里程碑标记线名(name)

3. 获取数据

   方法	说明	参数
   getAllRows	获取所有行数据	无
   getUpdatedRows	获取值有变化的行	无
   getSelectedRows	获取当前选择行	无
   getAllParentRows	获取所有组任务	无
   getChildRows	获取指定行的所有子任务数据	任务ID
   getSelectedRowID	获取选择行任务ID	无
   getSelectedBucketID	获取选择bucketID（资源管理时用）	无
   getSelectedRowSeq	获取当前选择行行索引号	无
   getSelectedRowParent	获取选择行父任务ID	无
   getMileStoneLines	获取里程碑时间线数据	无

4. 属性设置

   方法	说明	参数
   setBulkMoveType	同步移动方式设置	D（关联任务） P（按责任人） N（所有后续任务）
   setStartEndDate	设置项目起止日	参数1：开始日 参数2：结束日。字符串类型

5. 数据编辑类

   方法	说明	参数
   addRow	新增行	参数：新增位置（add:当前行后 insert：当前行前 append：末尾 addChild：添加子任务)
   deleteRows	删除选择行	无
   cloneRows	克隆行	无
   updRows	保存行	（行内编辑时，编辑后的数据可以获取得到，无需使用该接口命令。当使用外部任务编辑弹框时，可以使用该接口） 参数1：新增位置 参数2：任务模型

6. 过滤器

   方法	说明
   addFilter	设置条件对数据进行过滤。示例： MZGantt.filterRows((task) =>{return task.duration > 3;},"onlyShow")
   removefilter	移除过滤器，恢复数据显示。示例： MZGantt.removefilter()

7. 导出图片

   方法	说明	参数
   exportGanttImg	存为图片	无

8. 事件监听文章来源地址https://www.toymoban.com/news/detail-854248.html

   事件名称	说明
   cellRender	单元格渲染事件。支持监听该事件，设置用户自己的回调处理。对单元格进行渲染。示例： MZGantt.on("cellRender", function(row, cellObj) {...})
   barRender	进度条渲染事件。可动态监听用户数据，实时渲染进度条样式。示例： MZGantt.on("barRender", function(row, barObj) {...})
   clickBar	进度条点击事件。可通过该事件获取鼠标点击任务行，点击日期，并设置用户处理逻辑。示例： MZGantt.on("clickBar", function(row, eventXY, dom) {...})
   rightClick	甘特图区右键点击事件。可通过该事件获取鼠标右键点击位置，点击任务行数据，点击日期，并设置用户用户自己的处理逻辑。示例： MZGantt.on("rightClick", function(row, eventXY, dom) {...})
   loaded	加载完成事件。甘特图加载完成后自动执行，可根据需要设置用户自己的处理逻辑。示例： MZGantt.on("loaded", function(e, data) {...})

到了这里，关于快速开发web甘特图功能：MZGantt原生js甘特图插件使用说明的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！