mzgantt 2025.12.25 → 2026.1.1
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/cdn/edit.js +1 -1
- package/cdn/export.js +1 -1
- package/cdn/mzgantt.css +1 -1
- 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 +73 -50
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mzgantt",
|
|
3
|
-
"version": "
|
|
3
|
+
"version": "2026.1.1",
|
|
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
|
@@ -25,7 +25,7 @@ MZGantt是一款原生js开发的甘特图插件。支持vue，ts，js等，支
|
|
|
25
25
|
|
|
26
26
|
## 二. 演示
|
|
27
27
|
|
|
28
|
-
演示地址：<https://mzgantt.
|
|
28
|
+
演示地址：<https://mzgantt.com/demo>
|
|
29
29
|
|
|
30
30
|
## 三. 如何使用?
|
|
31
31
|
|
|
@@ -839,51 +839,61 @@ MZGantt支持更多高级功能，如国际化和多语言包设置，拖动建
|
|
|
839
839
|
|
|
840
840
|
MZGantt提供丰富接口，操作或控制甘特图数据和特征。
|
|
841
841
|
1. 甘特图显示
|
|
842
|
-
|<div style="width:
|
|
842
|
+
|<div style="width:150px">方法</div>|<div style="width:166px">说明</div>|<div style="width:200px">参数</div>|
|
|
843
843
|
|----| ----|----|
|
|
844
|
-
init|初始化甘特图实例|无（vue
|
|
845
|
-
createGantt| 创建甘特图对象| 参数1：（必须）DIV容器ID<br>参数2：（可选）时间刻度day/week/month/quarter（默认day）<br>参数3：配置选项<br>参数4：(可选)
|
|
846
|
-
config|配置甘特图|JSON
|
|
847
|
-
bindGanttData| 绑定甘特图数据|甘特图JSON数据：需要符合MZGantt数据model
|
|
848
|
-
drawGantt
|
|
844
|
+
|init|初始化甘特图实例|无（vue中使用插件时，需要执行此方法实例化插件）|
|
|
845
|
+
|createGantt| 创建甘特图对象| 参数1：（必须）DIV容器ID<br>参数2：（可选）时间刻度day/week/month/quarter（默认day）<br>参数3：配置选项<br>参数4：(可选)数据|
|
|
846
|
+
|config|配置甘特图|JSON对象值，参考：甘特图参数配置|
|
|
847
|
+
|bindGanttData| 绑定甘特图数据|甘特图JSON数据：需要符合MZGantt数据model|
|
|
848
|
+
|drawGantt|显示甘特图|无|
|
|
849
849
|
|
|
850
850
|
2. 显示控制
|
|
851
|
-
|<div style="width:
|
|
851
|
+
|<div style="width:150px">方法</div>|<div style="width:248px">说明</div>|<div style="width:200px">参数</div>|
|
|
852
852
|
|----| ----|----|
|
|
853
|
-
changeFormat|变更显示刻度|显示刻度：day/week/month/quarter
|
|
854
|
-
switchTrack| 切换显示实绩|开关值：true/false
|
|
855
|
-
showMileStone|切换显示里程碑时间标记线|开关值：true/false
|
|
856
|
-
setMSLine|动态添加/修改里程碑时间标记线|里程碑定义对象（参考mileStoneLines
|
|
857
|
-
rmMSLine|动态删除里程碑时间标记线|里程碑标记线名(name)
|
|
853
|
+
|changeFormat|变更显示刻度|显示刻度：day/week/month/quarter|
|
|
854
|
+
|switchTrack| 切换显示实绩|开关值：true/false|
|
|
855
|
+
|showMileStone|切换显示里程碑时间标记线|开关值：true/false|
|
|
856
|
+
|setMSLine|动态添加/修改里程碑时间标记线|里程碑定义对象（参考mileStoneLines中对象定义）|
|
|
857
|
+
|rmMSLine|动态删除里程碑时间标记线|里程碑标记线名(name)|
|
|
858
|
+
|showCriticalPath|切换显示关键路径|开关值："1"/"0"|
|
|
859
|
+
|setRowReadonly|设置行只读条件|条件判断函数。<br>例，设置新添加行只读时，代码如下：<br>`myGantt.setRowReadonly(function(row) {`<br> `return row.operation != "new" && row.operation != "newmodified";`<br>`});`|
|
|
860
|
+
|adjustGanttHeight|动态调整甘特图区域高度，可实现甘特图高度自适应|甘特图区域高度（像素值）|
|
|
861
|
+
|setColsVisiable|动态设置列是否可见|参数请参考示例，设置colname1和colname2不可见：<br>`myGantt.setColsVisiable({colname1: false, colname2: false})`|
|
|
862
|
+
|fitGanttWidth|动态调整甘特图右侧时间宽度，使宽度刚好填满右侧进度条区域|无|
|
|
863
|
+
|fitMobile|使甘特图适配移动端显示（自动横屏）|无|
|
|
864
|
+
|hideGanttBar|隐藏/显示右边甘特图条区域。|开关值：true/false|
|
|
858
865
|
|
|
859
866
|
3. 获取数据
|
|
860
|
-
|<div style="width:
|
|
867
|
+
|<div style="width:150px">方法</div>|<div style="width:360px">说明</div>|<div style="width:240px">参数</div>|
|
|
861
868
|
|----| ----|----|
|
|
862
|
-
getAllRows |
|
|
863
|
-
getUpdatedRows
|
|
864
|
-
getSelectedRows
|
|
865
|
-
getAllParentRows |
|
|
866
|
-
getChildRows|获取指定行的所有子任务数据|任务ID
|
|
867
|
-
getSelectedRowID |获取选择行任务ID
|
|
868
|
-
|
|
869
|
-
getSelectedRowSeq
|
|
870
|
-
getSelectedRowParent|获取选择行父任务ID
|
|
871
|
-
getMileStoneLines
|
|
869
|
+
|getAllRows | 获取所有行数据|无|
|
|
870
|
+
|getUpdatedRows |获取值有变化的行|无|
|
|
871
|
+
|getSelectedRows |获取当前选择行|无|
|
|
872
|
+
|getAllParentRows | 获取所有组任务|无|
|
|
873
|
+
|getChildRows|获取指定行的所有子任务数据|任务ID|
|
|
874
|
+
|getSelectedRowID |获取选择行任务ID|无|
|
|
875
|
+
|getSelectedBarID|获取选择进度条ID（资源管理时用）|无|
|
|
876
|
+
|getSelectedRowSeq|获取当前选择行行索引号|无|
|
|
877
|
+
|getSelectedRowParent|获取选择行父任务ID|无|
|
|
878
|
+
|getMileStoneLines|获取里程碑时间线数据|无|
|
|
872
879
|
|
|
873
880
|
4. 属性设置
|
|
874
|
-
|<div style="width:
|
|
881
|
+
|<div style="width:100px">方法/div>|<div style="width:354px">说明</div>|<div style="width:215px">参数</div>|
|
|
875
882
|
|----| ----|----|
|
|
876
|
-
setBulkMoveType|同步移动方式设置|D（关联任务）<br>P（按责任人）<br>N
|
|
877
|
-
|
|
883
|
+
|setBulkMoveType|同步移动方式设置|D（关联任务）<br>P（按责任人）<br>N（所有后续任务）|
|
|
884
|
+
|setGanttStatus|设置甘特图编辑状态|参数：状态字符（r: 只读；e:编辑）<br>。字符串类型|
|
|
885
|
+
|setColEditable|动态设置列 可编辑/只读|参数：键值对象(列名name:true/false)。<br>例：{'planStart':false,'planEnd':false}<br>true:可编辑；false：只读|
|
|
886
|
+
|setStartEndDate|设置项目起止日|参数1：开始日。字符串类型<br>参数2：结束日。字符串类型<br>参数3：是否锁定日期范围(true/false)。字符串类型|
|
|
887
|
+
|setToDate|设置甘特图显示日期|参数1：显示目标日期。字符串类型。<br>参数2：是否自动适配宽度(true/false)<br>例：myGantt.setToDate('2025-04-16', true);<br>|
|
|
878
888
|
|
|
879
889
|
5. 数据编辑类
|
|
880
|
-
|<div style="width:
|
|
890
|
+
|<div style="width:130px">方法</div>|<div style="width:124px">说明</div>|<div style="width:240px">参数</div>
|
|
881
891
|
|----| ----|----|
|
|
882
|
-
addRow
|
|
883
|
-
deleteRows
|
|
884
|
-
cloneRows
|
|
885
|
-
updRows
|
|
886
|
-
|
|
892
|
+
|addRow|新增行|参数：新增位置 <br> add:当前行后；<br> insert：当前行前；<br> append：末尾；<br> addChild：添加子任务|
|
|
893
|
+
|deleteRows|删除选择行|无|
|
|
894
|
+
|cloneRows |克隆选择行|无|
|
|
895
|
+
|updRows|更新行数据|参数1：新增位置 <br> add:当前行后；<br> insert：当前行前；<br> append：末尾；<br> addChild：添加子任务；<br> edit：修改<br> 参数2：任务模型数据<br> <br>注意：<br>行内编辑时，无需使用该方法。<br>该接口适合使用外部任务编辑弹框时，用于提交通过外部编辑弹框得到的数据（参数2）。|
|
|
896
|
+
|resetGantt |重置所有任务行编辑状态|无|
|
|
887
897
|
6. 过滤器
|
|
888
898
|
|<div style="width:170px">方法</div>| <div style="width:592px">说明</div>
|
|
889
899
|
|----| ----|
|
|
@@ -896,33 +906,46 @@ MZGantt提供丰富接口，操作或控制甘特图数据和特征。
|
|
|
896
906
|
exportGanttImg |存为图片| 无
|
|
897
907
|
|
|
898
908
|
8. 事件监听
|
|
899
|
-
|<div style="width:
|
|
909
|
+
|<div style="width:230px">事件名称</div>| <div style="width:560px">说明</div>|
|
|
900
910
|
|----| ----|
|
|
901
|
-
cellRender
|
|
902
|
-
|
|
903
|
-
|
|
904
|
-
|
|
905
|
-
|
|
911
|
+
|cellRender|单元格渲染事件。<br>支持监听该事件，设置自定义回调处理。对单元格进行渲染。<br>示例：` MZGantt.on("cellRender", function(row, cellObj) {...})`|
|
|
912
|
+
|cellBlur|单元格失去焦点事件。行内编辑单元格失去焦点时触发。示例：<br>` MZGantt.on("cellBlur", function(row, cellName, oldVal, newVal) {...})`|
|
|
913
|
+
|rowRender|表格行渲染事件。<br>支持监听该事件，设置自定义回调处理。对行进行样式渲染。<br>示例：` MZGantt.on("rowRender", function(row, rowStyleObj) {...})`|
|
|
914
|
+
|barRender|进度条渲染事件。<br>可动态监听用户数据，实时渲染进度条样式。<br>示例：` MZGantt.on("barRender", function(row, barObj) {...})`|
|
|
915
|
+
|clickBar |进度条点击事件。<br>示例：` MZGantt.on("clickBar", function(row, eventXY, dom) {...})`|
|
|
916
|
+
|dblClickBar |进度条双击击事件。<br>示例：` MZGantt.on("dblClickBar", function(row, barData, dom) {...})`|
|
|
917
|
+
|clickRow |点击行事件。<br>示例：` MZGantt.on("clickRow", function(row, eventXY) {...})`|
|
|
918
|
+
|rightClick/rightClickBar|进度条右键点击事件。<br>示例：` MZGantt.on("rightClickBar", function(row, eventXY, dom) {...})`|
|
|
919
|
+
|loaded|加载完成事件。<br>甘特图加载完成后自动执行，可根据需要设置用户自己的处理逻辑。<br>示例：`MZGantt.on("loaded", function(e, data) {...})`|
|
|
920
|
+
|barDragEnd|进度条拖拽结束事件。拖拽进度条释放时触发。示例：<br>` MZGantt.on("barDragEnd", function(row, updRows) {...})`|
|
|
921
|
+
|rowDragEnd|行拖拽结束事件。拖拽行并释放时触发。示例：<br>` MZGantt.on("rowDragEnd", function(row, updRows) {...})`|
|
|
922
|
+
|
|
906
923
|
|
|
907
924
|
## 七. 常见错误码
|
|
908
925
|
<div style="margin-left:30px">
|
|
909
926
|
|
|
910
|
-
|<div style="width:
|
|
927
|
+
|<div style="width:230px">错误码</div>| <div style="width:560px">说明</div>|
|
|
911
928
|
|----|----|
|
|
912
|
-
0x00010|createGantt命令执行之前，甘特图容器div
|
|
913
|
-
0x00020
|
|
914
|
-
0x00030|渲染甘特图（drawGantt
|
|
915
|
-
0x00040
|
|
916
|
-
0x00050|绑定数据发生异常。请参考<四.
|
|
917
|
-
0x00060
|
|
918
|
-
0x00080
|
|
919
|
-
0x00090
|
|
920
|
-
0x00100
|
|
929
|
+
|0x00010|createGantt命令执行之前，甘特图容器div必须要加载完成，否则提示此错误。|
|
|
930
|
+
|0x00020|配置甘特图出错。|
|
|
931
|
+
|0x00030|渲染甘特图（drawGantt命令）出错。|
|
|
932
|
+
|0x00040|渲染里程碑标记线时出错。|
|
|
933
|
+
|0x00050|绑定数据发生异常。请参考<四. 甘特图数据行数据模型>作成甘特图行数据。|
|
|
934
|
+
|0x00060|批量加载任务数据异常。|
|
|
935
|
+
|0x00080|点击单元格时发生错误。|
|
|
936
|
+
|0x00090|点击进度条时发生错误。|
|
|
937
|
+
|0x00100|插件初始化异常。|
|
|
921
938
|
</div>
|
|
922
939
|
|
|
923
940
|
## 八. 下载
|
|
924
941
|
1. 普通js版
|
|
925
|
-
进入下载： <a href="https://
|
|
942
|
+
进入下载： <a href="https://gitee.com/tecjt_home/mzgantt_js">MZGantt甘特图插件（普通js版）</a>
|
|
943
|
+
或者使用CDN：
|
|
944
|
+
<script language="javascript" src="https://gcore.jsdelivr.net/npm/mzgantt@2026.1.1/cdn/mzgantt.css"></script>
|
|
945
|
+
<script language="javascript" src="https://gcore.jsdelivr.net/npm/mzgantt@2026.1.1/cdn/mzgantt.js"></script>
|
|
946
|
+
<script language="javascript" src="https://gcore.jsdelivr.net/npm/mzgantt@2026.1.1/cdn/edit.js"></script>
|
|
947
|
+
<script language="javascript" src="https://gcore.jsdelivr.net/npm/mzgantt@2026.1.1/cdn/export.js"></script>
|
|
948
|
+
<script language="javascript" src="https://gcore.jsdelivr.net/npm/mzgantt@2026.1.1/cdn/mobile.js"></script>
|
|
926
949
|
|
|
927
950
|
2. npm版（支持vue等）：直接使用npm命令安装即可。
|
|
928
951
|
> npm install mzgantt
|