敏卓甘特图（MZGantt）插件

MZGantt是一款纯js开发的甘特图插件。

一. 插件特征

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

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

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

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

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

• 使用简单：js直接引用或者通过npm安装使用

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

二. 演示

演示地址：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>

   • npm引用:

   <!-- 引入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>

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

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

4. 创建甘特图对象

   • 普通js引用时: 在页面js中创建甘特图对象。

   /*
   创建甘特图对象
   	参数1：容器div对象id
   	参数2：视图类型
   */
   MZGantt.createGantt("GanttChartDIV", "day");

   • npm引用时:

   // 导入MZGantt包
   import {_MZGantt} from './gantt_npm';
   
   // 创建甘特图对象
   // ** 生成路径编辑对象(参数：配置参数值)
   let MZGantt = _MZGantt();
   // 创建甘特图对象
   MZGantt.createGantt("GanttChartDIV", "day");

5. 甘特图参数配置 此步骤可选。在需要个性化显示甘特图时，可以通过设置甘特图参数来实现。部分可设置参数如下：

   var ganttConfig = {
   	useFor: "Task", // 设置甘特图用途，资源利用（比如会议室管理）：'Resource', 任务管理（比如计划和进度管理）：'Task'。默认:Task
   	showTrack: 0, // 0:计划甘特图；1:实绩甘特图 。默认：计划甘特图。
   	showCheckbox: 1,// 是否显示 复选框 列 (0/1)  默认0：不显示
   	showIcon: 1,// 是否显示 图标 列 (0/1)  默认0：不显示
   	showResouce: 0,	// 是否显示 资源/负责人 列 (0/1) ,默认1：显示
   	showDuration: 1,// 是否显示 工期 列(0/1),默认1：显示
   	showPctComp: 1,	// 是否显示 完成百分比 % 列(0/1),默认1：显示
   	showStartDate: 1,// 是否显示 计划开始日期 列(0/1),默认1：显示
   	showEndDate: 1,	// 是否显示 计划完成日期 列(0/1),默认1：显示
   	showRsltStartDate: 0,// 是否显示 实际开始日期 列(0/1),默认1：显示
   	showRsltEndDate: 0,	// 是否显示 实际完成日期 列(0/1),默认1：显示
   	showDuplicate: 0,// 是否显示 资源重叠分配标志
   	includeHoliday: 'N',// 工日计算是否包含假期和周末：Y: 包含；N:不包含
   	includeToTime: "Y",	// 甘特图完成时间是否包含最后一个时间点（开始和完成时间为日期类型时设置为包含，小时的话设置为不包含），默认Y
   	lazyLoad:0,	// 是否懒加载（0:正常加载；1:懒加载；其他：超过该数值自动懒加载；大量任务加载时，可以打开此开关）
   	//callbackAfterLoad: callbackTest,//加载后回调函数
   	bulkCustColIdx:[1,2],// 允许批量设置的自定义列索引号
   
   	tagColumnList: [
   		{"title":"下拉框列1","width":80,"align":"left","data":taskTypeList},
   		{"title":"下拉框列2","width":80,"align":"left","disabled":true,"data":tag2List},
   		{"title":"下拉框列3","width":80,"align":"left","disabled":true,"data":tag2List}], //添加自定义tag列，指定每列[列名称，列宽度，对齐方式等]
   
   	//添加自定义列，指定每列[列名称，列宽度，对齐方式]，
   	// showSeq用于控制自定义列在画面中的显示顺序，dataSeq标识自定义列的值与显示顺序的对应关系，两者都是使用从1开始的整数排序，不可跳数,为必须属性。
   	// callbackTaskWin: 任务编辑弹框中自定义列点击回调函数
   	// callbackGrid: 甘特图grid中自定义列点击回调函数
   	custColumnList: [
   		{
   			"showSeq": 3,
   			"dataSeq": 1,
   			"title": "列名1",
   			"width": 50,
   			"align": "left",
   			"multiline": "true",
   			"disabled": "true",
   			"callbackTaskWin": setCustColVal,
   			"callback1Name": "编辑备注",
   			"callbackGrid": callbackTest
   		}, {
   			"showSeq": 1,
   			"dataSeq": 2,
   			"title": "列名2",
   			"width": 100,
   			"align": "left"
   		}, {
   			"showSeq": 2,
   			"dataSeq": 3,
   			"title": "列名3",
   			"width": 150,
   			"align": "left"
   		}
   	],
   	showDependencies: 1,// 是否显示 连接线(0/1),默认：0不显示。设置为0，则调用ganttObj.drawDependArrow()函数画依赖线也是无用的；反之，需要画出依赖线时，需要先设置该参数为1。
   
   	captionType: 'Caption',	// 设置甘特图标题(None,Caption,Resource,Duration,Complete,Reserver)  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
   
   	//startEndDate: ['2014-6-18','2019-9-26'], 	// 指定项目起止日期。状态ganttStatus为p时，不指定则自动以当日进行设置。
   	holidayList: ['2023-07-18','2023-07-19','2023-07-20'],// 设置节假日列表。在正常显示周末的情况下，添加列表中的日期作为节假日，灰色显示。
   	workdayList: ['2023-07-02'], // 设置节假日列表。在正常显示周末的情况下，添加列表中的日期作为节假日，灰色显示。
   	resourceList: [
   		{"value":"1","name":"郭富城"},
   		{"value":"2","name":"黎明"},
   		{"value":"3","name":"刘德华"},
   		{"value":"4","name":"张学友"}],
   	iconList: [
   		{value:'red.png',text:''},
   		{value:'blue.png',text:''},
   		{value:'yellow.png',text:''},
   		{value:'green.png',text:''},
   		{value:'purple.png',text:''}],
   
   	workingHourRange: ['1','23'],// 设置hour格式下的每天的工作时段。(以小时为单位)。默认: 1,23。
   	showChgDur: "0",// 是否显示拖拽变更工日选项。0：不显示，1：显示。默认：1：显示。
   	dragChgDur: "1",// 设置拖拽变更工日,如果showChgDur设置为不显示，则该选项的设置无效。
   	autoCalDur: 1,// 设置自动计算工日（默认不自动计算）
   
   	fixColsCnt:3,// 设置锁定列数, 默认:0(不锁定列)
   	durPrecision:2,	// 设置工期和工日精度（默认小数后一位）
   	leftSideWidthFix:86,// 设置锁定区域宽度（用来调整拖动杆微调距离，该值越大，光标越向右超过拖动杆）
   	showDayDate: "date",// 设置day格式时，显示星期或者日期（day:星期；date:日期）。默认:day显示星期。
   	showWeekIndex: "",	// 设置day格式时，右侧首行显示第几周或者显示周第一个日期。Y：显示周数，其他，显示日期。默认显示日期。
   	hourFormat: 0,// 设置hour格式（0:小时后不加:00；1:小时后加:00）。默认:0显示星期.
   	// planBackground: vPlanBackground, // 设置甘特图计划条背景
   	// resultBackground: vResultBackground,// 设置甘特图实绩条背景
   	compBackground: '#0000FF',// 设置完成度背景
   	// groupBackground: '#00FF00',// 设置父任务行背景
   	weekendHolidayBackColor: '#E6E6E6', // 设置休息日/假期背景
   	currentTimeBackColor: ['h','#FF9797'],// 设置当前时间背景(参数1：h: 通过设置表头样式显示当前时间; c: 通过设置内容单元格样式显示当前时间。参数2：颜色值)
   	intervalColor: ['#FFFFFF','#F4F4F4'],// 设置隔行背景颜色, 默认: #FFFFFF,#F4F4F4
   	selectedRowColor: '#CAE1FF',// 设置选中行背景颜色, 默认: #CAE1FF
   	borderColor: '#9E9E9E',	// 设置甘特图边框颜色, 默认: #9E9E9E
   	barBorderRadius: 6,	// 设置甘特图条圆角半径, 默认: 3px
   	barBorderWeight: 1,	// 设置甘特图条边框粗细, 默认: 1px
   	barBorderColor: '#9E0000',// 设置甘特图条边框颜色, 默认: #9E9E9E
   	leftSideWidth: 300,	// 设置左侧框宽度, 默认:300px
   	contentHeight: 500,	// 设置甘特图高度（不含表头）, 默认:300px.
   	rowHeight: 35,	// 设置行高度, 默认:35px
   
   	ganttStatus: 'e',// 设置甘特图状态:
   					//   p: Plan（初次排计划，该状态时需要指定项目起止日期，但不需要绑定数据），
   					//   e:编辑计划（不能指定项目起止日期，可以拖动编辑或者添加删除任务）,
   					//   a：输入实绩（只能输入实绩），
   					//   r：只读
   	iconColWidth: 30,// 设置图标列宽度，默认:60px
   	nameTitle: '任务名称',// 设置任务/资源列标题, 默认:任务名称
   	nameColWidth: 150,// 设置任务/资源列宽度，默认:150px
   	dateColWidth: 100,// 设置日期列宽度，默认:80px
   	hourColWidth: 20,
   	dayColWidth: 20,
   	monthColWidth: 200,
   	quarterColWidth: 100,
   	accessKey: '???'// 使用key（需购买）
   };
   
   // 甘特图参数配置
   MZGantt.config(ganttConfig);

6. 绑定数据/显示甘特图

   /*
     甘特图数据对象项目说明：
   	id					// 节点编号（必须）
   	iconColsVal			// 图标列(可以是用逗号隔开的多个图标）
   	tagColsVal			// 自定义Tag列的值，需要与列配置函数setTagColumnList()指定列一一对应。
   	name				// 任务名称（必须）
   	plan				// 计划
   	rsltStart			// 实际开始
   	rsltEnd				// 实际完成
   	rsltDur				// 实际工日
   	custColsVal			// 自定义列的值，需要与自定义列配置一一对应。
   	planBarColor		// 甘特图计划背景
   	isMS				// 是否里程碑
   	resId				// 资源/负责人
   	pctComp				// 完成度（0 ~ 100 百分比)
   	isGroup				// 是否设置为父（组）1：组/0：子节点
   	parentId			// 父节点编号
   	isExpand			// 是否展开显示 1:展开/0:收缩
   	preNodes			// 前置节点，多个前置节点时，使用逗号分开
   	caption				// 标题
   	seq					// 排序号
   */
   
   // 甘特图数据
   let ganttData= [
   	{
   		"id": 1,
   		"seq": 1000,
   		"iconColsVal": [],
   		"tagColsVal": [],
   		"name": "单位A施工期间",
   		"plan": [{}],
   		"rsltStart": "",
   		"rsltEnd": "",
   		"rsltDur": 1,
   		"custColsVal": ["", "2", "3"],
   		"planBarColor": "",
   		"isMS": 0,
   		"resId": "1",
   		"pctComp": 0,
   		"isGroup": 1,
   		"parentId": "",
   		"isExpand": 1,
   		"preNodes": "",
   		"caption": "重点关注"
   	}, {
   		"id": 11,
   		"seq": 2000,
   		"iconColsVal": [{
   				"src": "./images/stop.png",
   				"title": "停止"
   			}
   		],
   		"tagColsVal": [],
   		"name": "任务名称1",
   		"plan": [{
   				"start": "",
   				"end": "",
   				"dur": "2"
   			}
   		],
   		"rsltStart": "2023-07-02",
   		"rsltEnd": "2023-07-06",
   		"rsltDur": 1,
   		"custColsVal": ["aa"],
   		"planBarColor": "#2EFE9A",
   		"isMS": 0,
   		"resId": "2",
   		"pctComp": 50,
   		"isGroup": 0,
   		"parentId": 1,
   		"isExpand": 1,
   		"preNodes": "",
   		"caption": ""
   	}, {
   		"id": 12,
   		"seq": 3000,
   		"iconColsVal": [],
   		"tagColsVal": ["00", "00"],
   		"name": "任务名称2",
   		"plan": [{
   				"start": "2023-07-06",
   				"end": "2023-07-10"
   			}
   		],
   		"rsltStart": "2023-07-07",
   		"rsltEnd": "2023-07-10",
   		"rsltDur": 1,
   		"custColsVal": ["aa", "bb"],
   		"planBarColor": "#2EFE9A",
   		"isMS": 0,
   		"resId": "2",
   		"pctComp": 10,
   		"isGroup": 0,
   		"parentId": 1,
   		"isExpand": 1,
   		"preNodes": "",
   		"caption": "备注1"
   	}, {
   		"id": 13,
   		"seq": 4000,
   		"iconColsVal": [{
   				"src": "./images/star.png",
   				"title": "星级"
   			}
   		],
   		"tagColsVal": [],
   		"name": "任务名称3",
   		"plan": [{
   				"start": "2023-07-11",
   				"end": "2023-07-15"
   			}
   		],
   		"rsltStart": "2023-07-11",
   		"rsltEnd": "2023-07-14",
   		"rsltDur": 1,
   		"custColsVal": ["aa", "bb"],
   		"planBarColor": "#2EFE9A",
   		"isMS": 0,
   		"resId": "2",
   		"pctComp": 20,
   		"isGroup": 0,
   		"parentId": 1,
   		"isExpand": 1,
   		"preNodes": 12,
   		"caption": ""
   	}, {
   		"id": 14,
   		"seq": 5000,
   		"iconColsVal": [],
   		"tagColsVal": [],
   		"name": "任务名称4",
   		"plan": [{
   				"start": "",
   				"end": "2023-07-17"
   			}
   		],
   		"rsltStart": "2023-07-16",
   		"rsltEnd": "2023-07-17",
   		"rsltDur": 1,
   		"custColsVal": ["aa", "<img src='./images/cross.png'><img src='./images/cross.png'>"],
   		"planBarColor": vPlanBackground,
   		"isMS": 0,
   		"resId": "2",
   		"pctComp": 0,
   		"isGroup": 0,
   		"parentId": 1,
   		"isExpand": 1,
   		"preNodes": "",
   		"caption": ""
   	},
   	{
   		"id": 2,
   		"seq": 6000,
   		"iconColsVal": [],
   		"tagColsVal": [],
   		"name": "单位B施工期间",
   		"plan": [{}
   		],
   		"rsltStart": "",
   		"rsltEnd": "",
   		"rsltDur": 1,
   		"custColsVal": ["", ""],
   		"planBarColor": "",
   		"isMS": 0,
   		"resId": "1",
   		"pctComp": 0,
   		"isGroup": 1,
   		"parentId": "",
   		"isExpand": 1,
   		"preNodes": "",
   		"caption": ""
   	}, {
   		"id": 21,
   		"seq": 7000,
   		"iconColsVal": [{
   				"src": "./images/stop.png",
   				"title": "停止"
   			}
   		],
   		"tagColsVal": [],
   		"name": "任务名称1",
   		"plan": [{
   				"start": "2023-07-19",
   				"end": "2023-07-29"
   			}
   		],
   		"rsltStart": "2023-07-26",
   		"rsltEnd": "2023-07-29",
   		"rsltDur": 1,
   		"custColsVal": ["aa", "bb"],
   		"planBarColor": vPlanBackground,
   		"isMS": 0,
   		"resId": "2",
   		"pctComp": 40,
   		"isGroup": 0,
   		"parentId": 2,
   		"isExpand": 1,
   		"preNodes": "",
   		"caption": ""
   	},
   	......
   ];
   
   // 绑定数据
   MZGantt.bindGanttData(ganttData);
   
   // 显示甘特图
   MZGantt.drawGantt();

四. 任务添加和编辑弹框

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

|数据项| 说明 | |----| ----| id| | 编号 name| 名称 isGroup| 是否组任务（父任务） iconColsVal | 图像对象(src, title)数组 tagColsVal | tag列值数组。 custColsVal| val数组 resId|资源编号 resName|资源名称 plan |计划对象，包含(start,end,dur属性 rsltStart|实际开始时间 rsltEnd|实际完成时间 pctComp|完成度 rsltDur|实际投入 planBarColor|甘特图条颜色（计划） preNodes | 前置节点 parentId|父任务编号 caption|标题 isMS|是否里程碑

五. 高级功能

MZGantt支持更多高级功能，如多语言包支持，日历支持等。

六. 联系方式

1. 手机：1369 5047 200 (王先生)
2. 微信：