mzgantt 1.0.7 → 1.0.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.
Files changed (10) hide show
  1. package/README.en.md +9 -12
  2. package/cdn/edit.js +1 -1
  3. package/cdn/mzgantt.css +1 -1
  4. package/cdn/mzgantt.js +1 -1
  5. package/dist/edit.js +1 -1
  6. package/dist/mzgantt.css +1 -1
  7. package/dist/mzgantt.js +1 -1
  8. package/package.json +1 -1
  9. package/readme.md +12 -18
  10. package/sample/sample.html +15 -15
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mzgantt",
3
- "version": "1.0.7",
3
+ "version": "1.0.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
@@ -38,9 +38,6 @@ MZGantt支持js引用和npm安装两种使用方式。
38
38
  在html页面头部中引入如下js包：
39
39
  * 普通js引用:
40
40
  ```javascript
41
- <!-- 引入jquery库 -->
42
- <script language="javascript" src="jquery.min.js"></script>
43
-
44
41
  <!-- 引入甘特图插件 -->
45
42
  <link rel="stylesheet" type="text/css" href="./gantt/mzgantt.css" />
46
43
  <script language="javascript" src="./gantt/mzgantt.js"></script>
@@ -74,7 +71,7 @@ MZGantt支持js引用和npm安装两种使用方式。
74
71
  ganttStatus: "e", // 设置甘特图状态（ e:编辑计划, r：只读）
75
72
 
76
73
  // 表格列配置（甘特图左侧表格部分显示列配置，非甘特图数据格式）
77
- columnDefs: [
74
+ columns: [
78
75
  {name: 'seq', field: "seq", type:"level"},
79
76
  {name: 'checkbox', field: "checkbox"},
80
77
  {name: 'iconColsVal', field: "iconColsVal", width: 30},
@@ -182,11 +179,6 @@ MZGantt支持js引用和npm安装两种使用方式。
182
179
  contentHeight: 360, // 设置甘特图高度（不含表头）, 默认:300px.如果在页面调用adjustGanttHeight函数使甘特图高度自适应，则次参数可不设置。
183
180
  rowHeight: 35, // 设置行高度, 默认:35px
184
181
 
185
- // 左侧列宽度设置，在完善columnDefs后，这部分就可以废弃了。
186
- iconColWidth: 30, // 设置图标列宽度，默认:60px
187
- nameColWidth: 150, // 设置任务/资源列宽度，默认:150px
188
- dateColWidth: 120, // 设置日期列宽度，默认:80px
189
-
190
182
  // 右侧格子宽度设置（不同时间刻度时）
191
183
  hourColWidth: 20, // 小时刻度时
192
184
  dayColWidth: 20, // 天刻度时
@@ -880,7 +872,7 @@ MZGantt提供丰富接口，操作或控制甘特图数据和特征。
880
872
  4. 属性设置
881
873
  |<div style="width:100px">方法/div>|<div style="width:354px">说明</div>|<div style="width:215px">参数</div>|
882
874
  |----| ----|----|
883
- |setBulkMoveType|同步移动方式设置|D（关联任务）<br>P（按责任人）<br>N（所有后续任务）|
875
+ |setLinkUpdMode|设置任务拖拽时的联动方式|<b>参数格式如下：</b><br>`myGantt.setLinkUpdMode({mode: "D", barColor: "#FF7575"})`<br>具体说明：<br> <b>联动方式(mode)</b>：<br>&nbsp;&nbsp;&nbsp;&nbsp;D（按任务依赖关系，默认值。）<br>&nbsp;&nbsp;&nbsp;&nbsp;P（按责任人）<br>&nbsp;&nbsp;&nbsp;&nbsp;N（所有后续任务）<br><b>进度条标记颜色值(barColor)</b>|
884
876
  |setGanttStatus|设置甘特图编辑状态|参数：状态字符（r: 只读；e:编辑）<br>。字符串类型|
885
877
  |setColEditable|动态设置列 可编辑/只读|参数：键值对象(列名name:true/false)。<br>例：{'planStart':false,'planEnd':false}<br>true:可编辑；false：只读|
886
878
  |setStartEndDate|设置项目起止日|参数1：开始日。字符串类型<br>参数2：结束日。字符串类型<br>参数3：是否锁定日期范围(true/false)。字符串类型|
@@ -893,17 +885,19 @@ MZGantt提供丰富接口，操作或控制甘特图数据和特征。
893
885
  |deleteRows|删除选择行|无|
894
886
  |cloneRows |克隆选择行|无|
895
887
  |updRows|更新行数据|参数1：新增位置 <br>&nbsp;&nbsp;&nbsp;&nbsp;add:当前行后；<br>&nbsp;&nbsp;&nbsp;&nbsp;insert：当前行前；<br>&nbsp;&nbsp;&nbsp;&nbsp;append：末尾；<br>&nbsp;&nbsp;&nbsp;&nbsp;addChild：添加子任务；<br>&nbsp;&nbsp;&nbsp;&nbsp;edit：修改<br> 参数2：任务模型数据<br> <br>注意：<br>行内编辑时，无需使用该方法。<br>该接口适合使用外部任务编辑弹框时，用于提交通过外部编辑弹框得到的数据（参数2）。|
888
+ |addBar|新增进度条|参数：`{start: 开始时间, end: 完成时间, reserver: 人员, theme: 主题, bar_id: 进度条id, title: 标题, aaa: '自定义内容1', bbb: '自定义内容2'}` |
889
+ |deleteBar|删除进度条|无|
896
890
  |resetGantt |重置所有任务行编辑状态|无|
897
891
  6. 过滤器
898
892
  |<div style="width:170px">方法</div>| <div style="width:592px">说明</div>
899
893
  |----| ----|
900
- addFilter|设置条件对数据进行过滤。示例：<br>` MZGantt.filterRows((task) =>{return task.duration > 3;},"onlyShow")`
901
- removefilter|移除过滤器，恢复数据显示。示例：<br>`MZGantt.removefilter()`
894
+ |addFilter|设置条件对数据进行过滤。示例：<br>` MZGantt.filterRows((task) =>{return task.duration > 3;},"onlyShow")`
895
+ |removefilter|移除过滤器，恢复数据显示。示例：<br>`MZGantt.removefilter()`
902
896
 
903
897
  7. 导出图片
904
898
  |<div style="width:170px">方法</div>| <div style="width:190px">说明</div>| <div style="width:375px">参数</div>
905
899
  |----| ----|----|
906
- exportGanttImg |存为图片| 无
900
+ |exportGanttImg |存为图片|参数1：标题高度(titleHeight), 参数2：标题文字(titleStr)
907
901
 
908
902
  8. 事件监听
909
903
  |<div style="width:230px">事件名称</div>| <div style="width:560px">说明</div>|
@@ -942,11 +936,11 @@ MZGantt提供丰富接口，操作或控制甘特图数据和特征。
942
936
  进入下载： <a href="https://gitee.com/tecjt_home/mzgantt_js">MZGantt甘特图插件（普通js版）</a>
943
937
  或者使用CDN：
944
938
  ```
945
- <link rel="stylesheet" type="text/css" href="https://gcore.jsdelivr.net/npm/mzgantt@1.0.7/cdn/mzgantt.css" />
946
- <script language="javascript" src="https://gcore.jsdelivr.net/npm/mzgantt@1.0.7/cdn/mzgantt.js"></script>
947
- <script language="javascript" src="https://gcore.jsdelivr.net/npm/mzgantt@1.0.7/cdn/edit.js"></script>
948
- <script language="javascript" src="https://gcore.jsdelivr.net/npm/mzgantt@1.0.7/cdn/export.js"></script>
949
- <script language="javascript" src="https://gcore.jsdelivr.net/npm/mzgantt@1.0.7/cdn/mobile.js"></script>
939
+ <link rel="stylesheet" type="text/css" href="https://gcore.jsdelivr.net/npm/mzgantt@1.0.9/cdn/mzgantt.css" />
940
+ <script language="javascript" src="https://gcore.jsdelivr.net/npm/mzgantt@1.0.9/cdn/mzgantt.js"></script>
941
+ <script language="javascript" src="https://gcore.jsdelivr.net/npm/mzgantt@1.0.9/cdn/edit.js"></script>
942
+ <script language="javascript" src="https://gcore.jsdelivr.net/npm/mzgantt@1.0.9/cdn/export.js"></script>
943
+ <script language="javascript" src="https://gcore.jsdelivr.net/npm/mzgantt@1.0.9/cdn/mobile.js"></script>
950
944
  ```
951
945
 
952
946
  2. npm版（支持vue等）：直接使用npm命令安装即可。
package/sample/sample.html CHANGED
@@ -10,13 +10,13 @@
10
10
  <meta name="author" content="ndes-global.com,tecjt.com" />
11
11
 
12
12
  <!-- Import MZGantt CSS -->
13
- <link rel="stylesheet" href="https://gcore.jsdelivr.net/npm/mzgantt@1.0.7/cdn/mzgantt.css">
13
+ <link rel="stylesheet" href="https://gcore.jsdelivr.net/npm/mzgantt@1.0.8/cdn/mzgantt.css">
14
14
 
15
15
  <!-- Import MZGantt JS files -->
16
- <script src="https://gcore.jsdelivr.net/npm/mzgantt@1.0.7/cdn/mzgantt.js"></script>
17
- <script src="https://gcore.jsdelivr.net/npm/mzgantt@1.0.7/cdn/edit.js"></script>
18
- <script src="https://gcore.jsdelivr.net/npm/mzgantt@1.0.7/cdn/export.js"></script>
19
- <script src="https://gcore.jsdelivr.net/npm/mzgantt@1.0.7/cdn/mobile.js"></script>
16
+ <script src="https://gcore.jsdelivr.net/npm/mzgantt@1.0.8/cdn/mzgantt.js"></script>
17
+ <script src="https://gcore.jsdelivr.net/npm/mzgantt@1.0.8/cdn/edit.js"></script>
18
+ <script src="https://gcore.jsdelivr.net/npm/mzgantt@1.0.8/cdn/export.js"></script>
19
+ <script src="https://gcore.jsdelivr.net/npm/mzgantt@1.0.8/cdn/mobile.js"></script>
20
20
 
21
21
  <style>
22
22
  body {
@@ -100,16 +100,16 @@
100
100
  <div class="scale-container">
101
101
  Time Scale:
102
102
  <input type="radio" name="radFormat" id="r_day" onclick='myGantt.changeFormat("day")' value="day" checked>
103
- <label for="r_day">Week/Day</label>
103
+ <label for="r_day">Day</label>
104
104
 
105
105
  <input type="radio" name="radFormat" id="r_week" onclick='myGantt.changeFormat("week")' value="week">
106
- <label for="r_week">Year/Week</label>
106
+ <label for="r_week">Week</label>
107
107
 
108
108
  <input type="radio" name="radFormat" id="r_month" onclick='myGantt.changeFormat("month")' value="month">
109
- <label for="r_month">Year/Month</label>
109
+ <label for="r_month">Month</label>
110
110
 
111
111
  <input type="radio" name="radFormat" id="r_quarter" onclick='myGantt.changeFormat("quarter")' value="quarter">
112
- <label for="r_quarter">Year/Quarter</label>
112
+ <label for="r_quarter">Quarter</label>
113
113
 
114
114
  &nbsp;&nbsp;&nbsp;&nbsp;
115
115
  <input type="checkbox" id="_show_actual" onclick="showRslt()" checked>
@@ -165,8 +165,8 @@
165
165
  holidayList: ['2023-02-09', '2023-02-21', '2023-03-20'],
166
166
  workdayList: ['2023-03-18'],
167
167
  mileStoneLines: [
168
- {date: '2023-07-05', name: 'startMS', title: 'Project Design Discussion', color: '#FF00BF', thickness: "2px"},
169
- {date: '2023-07-16', name: 'pjMeeting', title: 'Code Review', color: '#088A29', thickness: "2px"},
168
+ {date: '2023-07-09', name: 'startMS', title: 'Project Design Discussion', color: '#FF00BF', thickness: "2px"},
169
+ {date: '2023-08-01', name: 'pjMeeting', title: 'Code Review', color: '#088A29', thickness: "2px"},
170
170
  {date: 'today', name: 'today', title: 'Today', color: '#FF0000', thickness: "2px"}
171
171
  ],
172
172
 
@@ -210,8 +210,8 @@
210
210
  contentHeight: 500,
211
211
  rowHeight: 35,
212
212
  dayColWidth: 20,
213
- monthColWidth: 70,
214
- quarterColWidth: 100
213
+ monthColWidth: 280,
214
+ quarterColWidth: 460
215
215
  };
216
216
 
217
217
  // Sample task data
@@ -241,7 +241,7 @@
241
241
  {
242
242
  id: 11,
243
243
  seq: 2000,
244
- name: "Task Name wzf",
244
+ name: "Task Name 001",
245
245
  plan: [{start: "2023-07-05", end: "2023-07-06", dur: 10}],
246
246
  rsltStart: "2023-07-14",
247
247
  rsltEnd: "2023-07-15",
@@ -262,7 +262,7 @@
262
262
  {
263
263
  id: 12,
264
264
  seq: 3000,
265
- name: "Task Name 222222",
265
+ name: "Task Name 002",
266
266
  plan: [{start: "", end: ""}],
267
267
  rsltStart: "2023-07-10",
268
268
  rsltEnd: "2023-07-20",