mzgantt
v2024.5.11
Published
MZGantt is a Gantt chart plugin developed with native js. Various front-end frameworks can be supported, you can quickly apply it to your web applications or mobile applications.
Downloads
966
Maintainers
hubosoftReadme
MZGantt甘特图插件
MZGantt是一款原生js开发的甘特图插件。支持vue，ts，js等，支持流行的各种前端框架，可以快速引用到我们的web程序或者移动应用中。
一. 插件特征
拖拽编辑：支持拖拽编辑
行内编辑：支持行内编辑功能
弹框支持：提供任务model，与外部弹框配合，完成任务编辑。
列自定义：支持自定义任务属性列
多段展示：支持任务行内多段展示
支持日历：支持自定义日历
图片导出：支持甘特图完整图片导出
大数据处理：支持懒加载方式加载任务
过滤器支持：支持设定条件，快速筛选
里程碑标记：支持配置显示里程碑标记线条
四种任务关系：支持拖拽建立和编辑四种任务关系(FS,FF,SF,SS)
消息框自定义：支持消息框内容和样式自定义
样式可调：支持显示样式自定义
使用简单：js直接引用或者通过npm安装使用（支持vue，ts）
参数配置：提供丰富配置参数和接口满足项目需求
二. 演示
演示地址：https://mzgantt.tecjt.com
三. 如何使用?
MZGantt支持js引用和npm安装两种使用方式。
下载 使用前，先下载普通js版插件或使用npm进行安装。
引用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";定义甘特图容器(div) 在html页面内定义一个div，作为展示甘特图的容器：
<div id="GanttChartDIV" style="width:100%;"></div>定义甘特图参数（可定义空对象{}，插件将使用使用默认值） 此步骤可选。在需要个性化显示甘特图时，可以通过设置甘特图参数来实现。部分可设置参数如下：
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, colCallBack:custCallbackFunc1}, {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 // 属性altText:自定义列替换显示文字 {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", colCallBack:custCallbackFunc2, altText: "查看图文"} ], // 甘特图区域显示控制 showTrack: 1, // 0:计划甘特图；1:实绩甘特图 。默认：计划甘特图。 showDuplicate: 0, // 是否显示 资源重叠分配标志 showMileStone: 1, // 是否显示 里程碑：不显示 showDependencies: 1, // 是否显示 连接线(0/1),默认：0不显示。 showDayDate: "date", // 设置day格式时，显示星期或者日期（day:星期；date:日期）。默认:day显示星期。 showWeekIndex: "", // 设置day格式时，右侧首行显示第几周或者显示周第一个日期。Y：显示周数，其他，显示日期。默认显示日期。 // 数据定义类=============================================================================== weekWorkSetting: // 周工作日设置（D1:周1....D0:周天。1: 工作日，0：休息日) {D1:1, D2:1, D3:1, D4:1, D5:1, D6:0, D0:0}, 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);后台获取数据，或定义数据
/* 甘特图数据对象项目说明： 一：内置固定数据项，不可自定义其他名称。 1. id //（必须）String 节点编号（任意字符串或数字，不可重复） 2. plan //（可选）Array 计划数据 3. isExpand //（可选）Number(0或1) 是否展开显示 1:展开/0:收缩 4. isGroup //（可选）Number(0或1) 是否设置为父（组）1：组/0：叶子节点 5. preNodes //（可选）String|Array 前置节点，多个前置节点时，使用逗号分开 6. parentId //（可选）String 父节点编号(当前行是最顶层节点时，该值须设置为空"") 7. isMS //（可选）Number(0或1) 是否里程碑 8. caption //（可选）String 标题 9. planBarColor //（可选）String 甘特图计划背景（颜色值) 二：以下数据项，可使用自定义名称，须与列定义中name匹配。 10. name //（必须）String 名称（可以作为任务名称，资源名称等） 11. iconColsVal //（可选）Array 图标列(可以是用逗号隔开的多个图标） 12. rsltStart //（可选）String Date 实际开始 13. rsltEnd //（可选）String Date 实际完成 14. rsltDur //（可选）Number 实际人天 15. custColsVal //（可选）String 自定义列的值，需要与自定义列配置一一对应。 16. resId //（可选）String 资源/负责人 17. pctComp //（可选）Number 完成度（0 ~ 100 百分比) 18. seq //（可选）Number 排序号 */ // 甘特图数据 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": "", }, ...... ];创建甘特图对象
// 实例化甘特图对象（在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()监听事件 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="隐藏里程碑" onclick="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); });多种加载方式 为了提升加载效率，插件支持多种加载方式。
方式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甘特图数据行数据模型，在绑定数据到甘特图前，需要按照此格式作成数据。可以批量绑定，参考bindGanttDate方式；也可单行绑定，多用于与外部弹框结合。
|数据项| 类型| 说明 | |----| ----| ----| id| （必须）String|编号 name|（必须）String|名称 isGroup|（可选）Number(0或1)|是否组任务（父任务）,决定一个任务是否可以包含子任务。 iconColsVal| （可选）Array|图像对象(src, title)数组 resId|（可选）String|资源编号 resName|（可选）String|资源名称 plan|（可选）Array|计划对象，包含start,end,dur属性 rsltStart|（可选）String Date|实际开始时间 rsltEnd|（可选）String Date|实际完成时间 pctComp|（可选）Number|完成度 rsltDur|（可选）Number |实际投入 planBarColor|（可选）String| 甘特图条颜色（计划） preNodes| （可选）String|Array|前置节点 parentId|（可选）String |（可选）String|父任务编号 caption|（可选）String |标题 isMS|（可选）Number(0或1)|是否里程碑 自定义列1|（可选）String|自定义列 自定义列2|（可选）String|自定义列 custRsltBars|（可选）Array|分段进度条(name, title, start, end, html, style)数组
// ****************** 弹框示例参考如下 ******************
// 第一步：使用弹框，弹框确认时构造如下数据
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支持更多高级功能，如国际化和多语言包设置，拖动建立并编辑任务关系，加载动画配置等。
国际化和语言包设置
// 设置语言包 // 注意：设置语言类型，需要在甘特图显示方法（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");进度条消息框自定义 鼠标放在进度条上，会自动显示提示框，显示任务信息。也可以根据需求，自定义提示框。
// 在甘特图配置中设置参数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;", ... }信息项目的设置，可以选择以下任意一种方式：
- 使用值（vulue）
- 使用公式（expression）
- 日期/字符类型的值：须加上引号，比如:
expression: "这是实际开始日: 'rsltStart'"
- 数值型的值：直接写在公式中即可，比如：
expression: "((testCol1 * testCol3) + pctComp) + '天'"
- 日期/字符类型的值：须加上引号，比如:
- 使用字符替换（{...}）
任务关系
建立任务关系： 编辑状态下，在A任务进度条上按下鼠标向下拖动，拖动到B任务松*开鼠标，会弹出任务关系弹框，选择任务关系，点击确定即可建立任务A和B之间的关系。
编辑任务关系： 编辑状态下，点击关系线，弹出任务关系弹框，修改或删除任务关系。
间隔时间修改方法： 方法1：在关系弹框中修改保存； 方法2：拖动后置任务，自动修改。
- 加载动画设置
MZGantt支持显示加载动画。分为插件初始化加载动画和插件手动开关动画两种，请参考下例。
// 1. 插件初始化动画************************************************** // 1.1 普通js版本时 <!-- 导入甘特图插件 --> <link rel="stylesheet" type="text/css" href="../../gantt/mzgantt.css" /> <script language="javascript"> // 参数：show: 是否显示插件初始化动画，默认不显示；containerId：显示到甘特图容器dom对象id，默认整个窗口 window.showInitLoading = {show:true, containerId: "GanttChartDIV"}; </script> <script language="javascript" src="../../gantt/mzgantt.js"></script> ... // 1.2 npm版本时 // 初始化甘特图插件（参数解释同上） var showInitLoadingMsg = {show:true, containerId: "GanttChartDIV"}; const myGantt = MZGantt.init(showInitLoadingMsg); ... // 2. 手动开关动画**************************************************** // 手动开关打开加载动画时，普通js版本和npm版本使用相同方法。 // 参数1：显示开关（true：显示；false：关闭） // 参数2：显示位置dom对象ID（默认整个窗口） myGantt.showLoading(true,"GanttChartDIV");
六. 插件方法及事件
MZGantt提供丰富接口，操作或控制甘特图数据和特征。
甘特图显示 |方法| 方法 | 参数 |----| ----|----| init|初始化甘特图实例|无（vue中使用插件时，需要执行此方法实例化插件） createGantt| 创建甘特图对象| 参数1：（必须）DIV容器ID参数2：（可选）时间刻度day/week/month/quarter（默认day）参数3：配置选项参数4：(可选)数据 config|配置甘特图|JSON对象值，参考：甘特图参数配置 bindGanttData| 绑定甘特图数据|甘特图JSON数据：需要符合MZGantt数据model drawGantt|显示甘特图|无
显示控制 |方法|说明| 参数 |----| ----|----| changeFormat|变更显示刻度|显示刻度：day/week/month/quarter switchTrack| 切换显示实绩|开关值：true/false showMileStone|切换显示里程碑时间标记线|开关值：true/false setMSLine|动态添加/修改里程碑时间标记线|里程碑定义对象（参考mileStoneLines中对象定义） rmMSLine|动态删除里程碑时间标记线|里程碑标记线名(name)
获取数据 |方法|说明|参数 |----| ----|----| getAllRows | 获取所有行数据|无 getUpdatedRows |获取值有变化的行|无 getSelectedRows |获取当前选择行|无 getAllParentRows | 获取所有组任务|无 getChildRows|获取指定行的所有子任务数据|任务ID getSelectedRowID |获取选择行任务ID|无 getSelectedBucketID|获取选择bucketID（资源管理时用）|无 getSelectedRowSeq|获取当前选择行行索引号|无 getSelectedRowParent|获取选择行父任务ID|无 getMileStoneLines|获取里程碑时间线数据|无
属性设置 |方法|说明| 参数 |----| ----|----| setBulkMoveType|同步移动方式设置|D（关联任务）P（按责任人）N（所有后续任务） setStartEndDate|设置项目起止日|参数1：开始日参数2：结束日。字符串类型
数据编辑类 |方法|说明|参数 |----| ----|----| addRow|新增行|参数：新增位置（add:当前行后；insert：当前行前；append：末尾；addChild：添加子任务) deleteRows|删除选择行|无 cloneRows |克隆行|无 updRows|保存行|（行内编辑时，编辑后的数据可以获取得到，无需使用该接口命令。当使用外部任务编辑弹框时，可以使用该接口）参数1：新增位置（add:当前行后；insert：当前行前；append：末尾；addChild：添加子任务；edit：编辑) 参数2：任务模型数据
过滤器 |方法| 说明 |----| ----| addFilter|设置条件对数据进行过滤。示例：
MZGantt.filterRows((task) =>{return task.duration > 3;},"onlyShow")removefilter|移除过滤器，恢复数据显示。示例：MZGantt.removefilter()导出图片 |方法| 说明| 参数 |----| ----|----| exportGanttImg |存为图片| 无
事件监听 |事件名称| 说明 |----| ----| 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) {...})
七. 常见错误码
|错误码| 说明| |----|----| 0x00010|createGantt命令执行之前，甘特图容器div必须要加载完成，否则提示此错误。 0x00020|配置甘特图出错。 0x00030|渲染甘特图（drawGantt命令）出错。 0x00040|渲染里程碑标记线时出错。 0x00050|绑定数据发生异常。请参考<四. 甘特图数据行数据模型>作成甘特图行数据。 0x00060|批量加载任务数据异常。 0x00080|点击单元格时发生错误。 0x00090|点击进度条时发生错误。 0x00100|插件初始化异常。
八. 下载
普通js版 进入下载： MZGantt甘特图插件（普通js版）
npm版（支持vue等）：直接使用npm命令安装即可。
npm install mzgantt
九. 版本
MZGantt提供3个版本，以满足不同用户的需求。。
免费试用版 无须任何授权，下载后可免费使用（功能部分受限），不影响您的开发。
个人版 下载后需获取个人版授权key，无功能限制，可自由地使用插件中的各种功能。
商业版 下载后需获取商业版授权key，无功能限制和商业使用限制，可自由使用插件中的各种功能。
十. 联系方式
- 手机：1369 5047 200 (王先生)
- 微信：