mzgantt 2024.4.6 → 2024.4.9
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/dist/edit.js +1 -1
- package/dist/mzgantt.css +1 -1
- package/dist/mzgantt.js +1 -1
- package/package.json +1 -1
- package/readme.md +54 -15
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mzgantt",
|
|
3
|
-
"version": "2024.4.
|
|
3
|
+
"version": "2024.4.9",
|
|
4
4
|
"description": "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.",
|
|
5
5
|
"main": "index.js",
|
|
6
6
|
"scripts": {
|
package/readme.md
CHANGED
|
@@ -1,3 +1,4 @@
|
|
|
1
|
+
|
|
1
2
|
# MZGantt甘特图插件
|
|
2
3
|
MZGantt是一款原生js开发的甘特图插件。支持vue,ts,js等,支持流行的各种前端框架,可以快速引用到我们的web程序或者移动应用中。
|
|
3
4
|
|
|
@@ -72,7 +73,7 @@ MZGantt支持js引用和npm安装两种使用方式。
|
|
|
72
73
|
useFor: "Task", // 设置甘特图用途,资源利用(比如会议室管理):'Resource', 任务管理(比如计划和进度管理):'Task'。默认:Task
|
|
73
74
|
ganttStatus: "e", // 设置甘特图状态( e:编辑计划, r:只读)
|
|
74
75
|
|
|
75
|
-
//
|
|
76
|
+
// 表格列配置(甘特图左侧表格部分显示列配置,非甘特图数据格式)
|
|
76
77
|
columnDefs: [
|
|
77
78
|
{name: 'seq', field: "seq", type:"level"},
|
|
78
79
|
{name: 'checkbox', field: "checkbox"},
|
|
@@ -82,8 +83,8 @@ MZGantt支持js引用和npm安装两种使用方式。
|
|
|
82
83
|
{name: 'name', field: "name", title: "任务名称", width: 150},
|
|
83
84
|
{name: 'resId', field: "resId", title: "责任人", width: 50, options: resourceList},
|
|
84
85
|
{name: 'dur', field: "dur", title: "工期", width: 60},
|
|
85
|
-
{name: 'planStart', field: "planStart", title: "计划开始", width: 120,
|
|
86
|
-
{name: 'planEnd', field: "planEnd", title: "计划完成", width: 120},
|
|
86
|
+
{name: 'planStart', field: "planStart", title: "计划开始", width: 120, editable: false},
|
|
87
|
+
{name: 'planEnd', field: "planEnd", title: "计划完成", width: 120, colCallBack:custCallbackFunc1},
|
|
87
88
|
{name: 'planDur', field: "planDur", title: "计划人天", width: 60},
|
|
88
89
|
{name: 'rsltStart', field: "rsltStart", title: "实际开始", width: 120},
|
|
89
90
|
{name: 'rsltEnd', field: "rsltEnd", title: "实际完成", width: 120},
|
|
@@ -91,10 +92,11 @@ MZGantt支持js引用和npm安装两种使用方式。
|
|
|
91
92
|
{name: 'pctComp', field: "pctComp", title: "完成度", width: 60},
|
|
92
93
|
// {name: 'caption', field: "caption", title: "标签文字"},
|
|
93
94
|
|
|
94
|
-
// 自定义列(field: "custColsVal"):支持设置type:DropDownList/TextBox
|
|
95
|
+
// 自定义列(field: "custColsVal"):支持设置type:DropDownList/TextBox
|
|
96
|
+
// 属性altText:自定义列替换显示文字
|
|
95
97
|
{name:"testCol1", field: "custColsVal", title:"列名1", type: "TextBox", default: 10, width:50,align:"left"},
|
|
96
98
|
{name:"testCol2", field: "custColsVal", title:"列名2", type: "DropDownList", options:dropDownListData, width:100, align:"left"},
|
|
97
|
-
{name:"testCol3", field: "custColsVal", title:"列名3","width":150,"align":"left"}
|
|
99
|
+
{name:"testCol3", field: "custColsVal", title:"列名3","width":150,"align":"left", colCallBack:custCallbackFunc2, altText: "查看图文"}
|
|
98
100
|
],
|
|
99
101
|
|
|
100
102
|
// 甘特图区域显示控制
|
|
@@ -205,9 +207,9 @@ MZGantt支持js引用和npm安装两种使用方式。
|
|
|
205
207
|
1. id //(必须)String 节点编号(任意字符串或数字,不可重复)
|
|
206
208
|
2. plan //(可选)Array 计划数据
|
|
207
209
|
3. isExpand //(可选)Number(0或1) 是否展开显示 1:展开/0:收缩
|
|
208
|
-
4. isGroup //(可选)Number(0或1) 是否设置为父(组)1:组/0
|
|
210
|
+
4. isGroup //(可选)Number(0或1) 是否设置为父(组)1:组/0:叶子节点
|
|
209
211
|
5. preNodes //(可选)String|Array 前置节点,多个前置节点时,使用逗号分开
|
|
210
|
-
6. parentId //(可选)String 父节点编号(
|
|
212
|
+
6. parentId //(可选)String 父节点编号(当前行是最顶层节点时,该值须设置为空"")
|
|
211
213
|
7. isMS //(可选)Number(0或1) 是否里程碑
|
|
212
214
|
8. caption //(可选)String 标题
|
|
213
215
|
9. planBarColor //(可选)String 甘特图计划背景(颜色值)
|
|
@@ -471,7 +473,7 @@ MZGantt支持js引用和npm安装两种使用方式。
|
|
|
471
473
|
// 单元格渲染
|
|
472
474
|
myGantt.on("cellRender", function (row, cellObj) {
|
|
473
475
|
// *******************************************************
|
|
474
|
-
//
|
|
476
|
+
// 可对以下甘特图左侧表格以下类型(field)单元格进行渲染控制:
|
|
475
477
|
// 一. 内置类型列:
|
|
476
478
|
// name 名称
|
|
477
479
|
// iconColsVal 图标列
|
|
@@ -488,7 +490,7 @@ MZGantt支持js引用和npm安装两种使用方式。
|
|
|
488
490
|
// testCol1 自定义列名(name)
|
|
489
491
|
// *******************************************************
|
|
490
492
|
|
|
491
|
-
//
|
|
493
|
+
// 获取单元格名称(渲染对象单元格)
|
|
492
494
|
var field = cellObj.field;
|
|
493
495
|
|
|
494
496
|
// 定义渲染样式对象
|
|
@@ -646,8 +648,8 @@ MZGantt支持js引用和npm安装两种使用方式。
|
|
|
646
648
|
myGantt.drawGantt();
|
|
647
649
|
```
|
|
648
650
|
|
|
649
|
-
## 四.
|
|
650
|
-
MZGantt
|
|
651
|
+
## 四. 甘特图数据行数据模型
|
|
652
|
+
下表格式为MZGantt甘特图数据行数据模型,在绑定数据到甘特图前,需要按照此格式作成数据。可以批量绑定,参考bindGanttDate方式;也可单行绑定,多用于与外部弹框结合。
|
|
651
653
|
|
|
652
654
|
<div style="margin-left:30px">
|
|
653
655
|
|
|
@@ -655,7 +657,7 @@ MZGantt插件提供任务数据模型(task Model),您可在项目中以弹框
|
|
|
655
657
|
|----| ----| ----|
|
|
656
658
|
id| (必须)String|编号
|
|
657
659
|
name|(必须)String|名称
|
|
658
|
-
isGroup|(可选)Number(0或1)
|
|
660
|
+
isGroup|(可选)Number(0或1)|是否组任务(父任务),决定一个任务是否可以包含子任务。
|
|
659
661
|
iconColsVal| (可选)Array|图像对象(src, title)数组
|
|
660
662
|
resId|(可选)String|资源编号
|
|
661
663
|
resName|(可选)String|资源名称
|
|
@@ -695,7 +697,7 @@ task.caption = "测试任务1"; // (
|
|
|
695
697
|
task.isMS = 0; // (可选)是否里程碑任务
|
|
696
698
|
|
|
697
699
|
// 第二步: 更新任务行数据
|
|
698
|
-
var ret = MZGantt.updRows(saveType, createTaskModel());
|
|
700
|
+
var ret = MZGantt.updRows(saveType, createTaskModel()); // saveType: add/append/insert/edit/addChild
|
|
699
701
|
if (ret.code == 0) {
|
|
700
702
|
// 关闭任务输入框
|
|
701
703
|
|
|
@@ -902,9 +904,46 @@ MZGantt提供丰富接口,操作或控制甘特图数据和特征。
|
|
|
902
904
|
rightClick|甘特图区右键点击事件。可通过该事件获取鼠标右键点击位置,点击任务行数据,点击日期,并设置用户用户自己的处理逻辑。示例:<br>` MZGantt.on("rightClick", function(row, eventXY, dom) {...})`
|
|
903
905
|
loaded|加载完成事件。甘特图加载完成后自动执行,可根据需要设置用户自己的处理逻辑。示例:<br>`MZGantt.on("loaded", function(e, data) {...})`
|
|
904
906
|
|
|
905
|
-
## 七.
|
|
907
|
+
## 七. 常见错误码
|
|
908
|
+
<div style="margin-left:30px">
|
|
909
|
+
|
|
910
|
+
|<div style="width:170px">错误码</div>| <div style="width:470px">说明</div>|
|
|
911
|
+
|----|----|
|
|
912
|
+
0x00010|createGantt命令执行之前,甘特图容器div必须要加载完成,否则提示此错误。
|
|
913
|
+
0x00020|配置甘特图出错。
|
|
914
|
+
0x00030|渲染甘特图(drawGantt命令)出错。
|
|
915
|
+
0x00040|渲染里程碑标记线时出错。
|
|
916
|
+
0x00050|绑定数据发生异常。请参考<四. 甘特图数据行数据模型>作成甘特图行数据。
|
|
917
|
+
0x00060|批量加载任务数据异常。
|
|
918
|
+
0x00080|点击单元格时发生错误。
|
|
919
|
+
0x00090|点击进度条时发生错误。
|
|
920
|
+
0x00100|插件初始化异常。
|
|
921
|
+
</div>
|
|
922
|
+
|
|
923
|
+
## 八. 下载
|
|
906
924
|
1. 普通js版
|
|
907
925
|
进入下载: <a href="https://mzgantt.tecjt.com/#/Contact">MZGantt甘特图插件(普通js版)</a>
|
|
908
926
|
|
|
909
927
|
2. npm版(支持vue等):直接使用npm命令安装即可。
|
|
910
|
-
> npm install mzgantt
|
|
928
|
+
> npm install mzgantt
|
|
929
|
+
|
|
930
|
+
## 九. 版本
|
|
931
|
+
|
|
932
|
+
MZGantt提供3个版本,以满足不同用户的需求。。
|
|
933
|
+
|
|
934
|
+
1. 免费试用版
|
|
935
|
+
无须任何授权,下载后可免费使用(功能部分受限),不影响您的开发。
|
|
936
|
+
|
|
937
|
+
2. 个人版
|
|
938
|
+
下载后需获取个人版授权key,无功能限制,可自由地使用插件中的各种功能。
|
|
939
|
+
|
|
940
|
+
3. 商业版
|
|
941
|
+
下载后需获取商业版授权key,无功能限制和商业使用限制,可自由使用插件中的各种功能。
|
|
942
|
+
|
|
943
|
+
## 十. 联系方式
|
|
944
|
+
|
|
945
|
+
1. 手机:1369 5047 200 (王先生)
|
|
946
|
+
2. 微信:
|
|
947
|
+
<img src="image.png" width="200" />
|
|
948
|
+
|
|
949
|
+
|