数据项

类型

说明

| |----| ----| ----| 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)数组 ```javascript // ****************** 弹框示例参考如下 ****************** // 第一步：使用弹框，弹框确认时构造如下数据 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; } ```

方法/div>|

说明

参数

| |----| ----|----| |setLinkUpdMode|设置任务拖拽时的联动方式|参数格式如下：
`myGantt.setLinkUpdMode({mode: "D", barColor: "#FF7575"})`
具体说明：
联动方式(mode)：
    D（按任务依赖关系，默认值。）
    P（按责任人）
    N（所有后续任务）
进度条标记颜色值(barColor)| |setGanttStatus|设置甘特图编辑状态|参数：状态字符（r: 只读；e:编辑）
。字符串类型| |setColEditable|动态设置列可编辑/只读|参数：键值对象(列名name:true/false)。
例：{'planStart':false,'planEnd':false}
true:可编辑；false：只读| |setStartEndDate|设置项目起止日|参数1：开始日。字符串类型
参数2：结束日。字符串类型
参数3：是否锁定日期范围(true/false)。字符串类型| |setToDate|设置甘特图显示日期|参数1：显示目标日期。字符串类型。
参数2：是否自动适配宽度(true/false)
例：myGantt.setToDate('2025-04-16', true);
| 5. 数据编辑类 |

方法

说明

参数

|----| ----|----| |addRow|新增行|参数：新增位置
    add:当前行后；
    insert：当前行前；
    append：末尾；
    addChild：添加子任务| |deleteRows|删除选择行|无| |cloneRows |克隆选择行|无| |updRows|更新行数据|参数1：新增位置
    add:当前行后；
    insert：当前行前；
    append：末尾；
    addChild：添加子任务；
    edit：修改
参数2：任务模型数据

注意：
行内编辑时，无需使用该方法。
该接口适合使用外部任务编辑弹框时，用于提交通过外部编辑弹框得到的数据（参数2）。| |addBar|新增进度条|参数：`{start: 开始时间, end: 完成时间, reserver: 人员, theme: 主题, bar_id: 进度条id, title: 标题, aaa: '自定义内容1', bbb: '自定义内容2'}` | |deleteBar|删除进度条|无| |resetGantt |重置所有任务行编辑状态|无| 6. 过滤器 |

方法

说明

|----| ----| |addFilter|设置条件对数据进行过滤。示例：
` MZGantt.filterRows((task) =>{return task.duration > 3;},"onlyShow")` |removefilter|移除过滤器，恢复数据显示。示例：
`MZGantt.removefilter()` 7. 导出图片 |

方法

说明

参数

|----| ----|----| |exportGanttImg |存为图片|参数1：标题高度(titleHeight), 参数2：标题文字(titleStr) 8. 事件监听 |

事件名称

说明

| |----| ----| |cellRender|单元格渲染事件。
支持监听该事件，设置自定义回调处理。对单元格进行渲染。
示例：` MZGantt.on("cellRender", function(row, cellObj) {...})`| |cellBlur|单元格失去焦点事件。行内编辑单元格失去焦点时触发。示例：
` MZGantt.on("cellBlur", function(row, cellName, oldVal, newVal) {...})`| |rowRender|表格行渲染事件。
支持监听该事件，设置自定义回调处理。对行进行样式渲染。
示例：` MZGantt.on("rowRender", function(row, rowStyleObj) {...})`| |barRender|进度条渲染事件。
可动态监听用户数据，实时渲染进度条样式。
示例：` MZGantt.on("barRender", function(row, barObj) {...})`| |clickBar |进度条点击事件。
示例：` MZGantt.on("clickBar", function(row, eventXY, dom) {...})`| |dblClickBar |进度条双击击事件。
示例：` MZGantt.on("dblClickBar", function(row, barData, dom) {...})`| |clickRow |点击行事件。
示例：` MZGantt.on("clickRow", function(row, eventXY) {...})`| |rightClick/rightClickBar|进度条右键点击事件。
示例：` MZGantt.on("rightClickBar", function(row, eventXY, dom) {...})`| |loaded|加载完成事件。
甘特图加载完成后自动执行，可根据需要设置用户自己的处理逻辑。
示例：`MZGantt.on("loaded", function(e, data) {...})`| |barDragEnd|进度条拖拽结束事件。拖拽进度条释放时触发。示例：
` MZGantt.on("barDragEnd", function(row, updRows) {...})`| |rowDragEnd|行拖拽结束事件。拖拽行并释放时触发。示例：
` MZGantt.on("rowDragEnd", function(row, updRows) {...})`| ## 七. 常见错误码

错误码

说明

| |----|----| |0x00010|createGantt命令执行之前，甘特图容器div必须要加载完成，否则提示此错误。| |0x00020|配置甘特图出错。| |0x00030|渲染甘特图（drawGantt命令）出错。| |0x00040|渲染里程碑标记线时出错。| |0x00050|绑定数据发生异常。请参考<四. 甘特图数据行数据模型>作成甘特图行数据。| |0x00060|批量加载任务数据异常。| |0x00080|点击单元格时发生错误。| |0x00090|点击进度条时发生错误。| |0x00100|插件初始化异常。|

## 八. 下载 1. 普通js版进入下载： MZGantt甘特图插件（普通js版）或者使用CDN： ``` ``` 2. npm版（支持vue等）：直接使用npm命令安装即可。 > npm install mzgantt ## 九. 版本 MZGantt提供3个版本，以满足不同用户的需求。。 1. 免费试用版无须任何授权，下载后可免费使用（功能部分受限），不影响您的开发。 2. 个人版下载后需获取个人版授权key，无功能限制，可自由地使用插件中的各种功能。 3. 商业版下载后需获取商业版授权key，无功能限制和商业使用限制，可自由使用插件中的各种功能。 ## 十. 联系方式 1. 手机：1369 5047 200 (王先生) 2. 微信：