快速开发web甘特图功能：MZGantt原生js甘特图插件使用说明
时间：2024-04-08 10:50:36 来源：网络cs 作者：焦糖 栏目：物流仓储 阅读：
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包：
<!-- 引入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>// 导入MZGantt包，具体有如下几个包，按具体需求引入// 1. 基础包：MZGantt（必须引入。包含甘特图基本展示等功能）// 2. 编辑功能包：MZGanttEditor（按需引入。包含甘特图编辑功能）// 3. 导出功能包：MZGanttExport（按需引入。包含甘特图导出图片功能）// 4. 移动端支持包：MZGanttMobile（按需引入。包含移动端支持功能）import {MZGantt, MZGanttEditor} from './mzgantt';// 获取并设置授权keyMZGantt.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}, {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);后台获取数据，或定义数据
/* 甘特图数据对象项目说明： 一：内置固定数据项，不可自定义其他名称。 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": "", }, ......];创建甘特图对象
// 实例化甘特图对象（在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="隐藏里程碑" ο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);});多种加载方式
为了提升加载效率，插件支持多种加载方式。
方式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)，您可在项目中以弹框或者其他输入方式，收集用户输入信息，作成模型数据，然后调用插件接口进行任务的添加和编辑操作。
| 数据项 | 说明 |
|---|---|
| id | 编号 |
| name | 名称 |
| isGroup | 是否组任务（父任务） |
| iconColsVal | 图像对象(src, title)数组 |
| resId | 资源编号 |
| resName | 资源名称 |
| plan | 计划对象，包含start,end,dur属性 |
| rsltStart | 实际开始时间 |
| rsltEnd | 实际完成时间 |
| pctComp | 完成度 |
| rsltDur | 实际投入 |
| planBarColor | 甘特图条颜色（计划） |
| preNodes | 前置节点 |
| parentId | 父任务编号 |
| caption | 标题 |
| isMS | 是否里程碑 |
| 自定义列1 | 自定义列 |
| 自定义列2 | 自定义列 |
| custRsltBars | 分段进度条(name, title, start, end, html, style)数组 |
// ****************** 弹框示例参考如下 ******************// 第一步：使用弹框，弹框确认时构造如下数据var task = {};task.name = "测试任务1"; // (必须)任务名称task.isGroup = 0; // (可选)是否父任务（组）task.iconColsVal = [{"src": "./images/test.jpg","title": "",}]; // (可选)图标列值task.resId = "01"; // (可选)担当者idtask.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/addChildif (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和infoBoxStylevar 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提供丰富接口，操作或控制甘特图数据和特征。
甘特图显示
| 方法 | 方法 | 参数 |
|---|---|---|
| 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：新增位置 参数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) {...}) |
本文链接：https://www.kjpai.cn/news/2024-04-08/155388.html，文章来源：网络cs，作者：焦糖，版权归作者所有，如需转载请注明来源和作者，否则将追究法律责任！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容，一经查实，本站将立刻删除。
上一篇：3d旋转相册，前端系统工程师面试
下一篇：返回列表