mzgantt 1.0.6 → 1.0.8

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 (11) hide show
  1. package/README.en.md +957 -25
  2. package/cdn/edit.js +1 -1
  3. package/cdn/export.js +1 -1
  4. package/cdn/mzgantt.css +1 -1
  5. package/cdn/mzgantt.js +1 -1
  6. package/dist/edit.js +1 -1
  7. package/dist/mzgantt.css +1 -1
  8. package/dist/mzgantt.js +1 -1
  9. package/package.json +1 -1
  10. package/readme.md +12 -18
  11. package/sample/sample.html +465 -0
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "mzgantt",
3
- "version": "1.0.6",
3
+ "version": "1.0.8",
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)。字符串类型|
@@ -897,13 +889,13 @@ MZGantt提供丰富接口，操作或控制甘特图数据和特征。
897
889
  6. 过滤器
898
890
  |<div style="width:170px">方法</div>| <div style="width:592px">说明</div>
899
891
  |----| ----|
900
- addFilter|设置条件对数据进行过滤。示例：<br>` MZGantt.filterRows((task) =>{return task.duration > 3;},"onlyShow")`
901
- removefilter|移除过滤器，恢复数据显示。示例：<br>`MZGantt.removefilter()`
892
+ |addFilter|设置条件对数据进行过滤。示例：<br>` MZGantt.filterRows((task) =>{return task.duration > 3;},"onlyShow")`
893
+ |removefilter|移除过滤器，恢复数据显示。示例：<br>`MZGantt.removefilter()`
902
894
 
903
895
  7. 导出图片
904
896
  |<div style="width:170px">方法</div>| <div style="width:190px">说明</div>| <div style="width:375px">参数</div>
905
897
  |----| ----|----|
906
- exportGanttImg |存为图片| 无
898
+ |exportGanttImg |存为图片|参数1：标题高度(titleHeight), 参数2：标题文字(titleStr)
907
899
 
908
900
  8. 事件监听
909
901
  |<div style="width:230px">事件名称</div>| <div style="width:560px">说明</div>|
@@ -941,11 +933,13 @@ MZGantt提供丰富接口，操作或控制甘特图数据和特征。
941
933
  1. 普通js版
942
934
  进入下载： <a href="https://gitee.com/tecjt_home/mzgantt_js">MZGantt甘特图插件（普通js版）</a>
943
935
  或者使用CDN：
944
- <script language="javascript" src="https://gcore.jsdelivr.net/npm/mzgantt@2026.1.601/cdn/mzgantt.css"></script>
945
- <script language="javascript" src="https://gcore.jsdelivr.net/npm/mzgantt@2026.1.601/cdn/mzgantt.js"></script>
946
- <script language="javascript" src="https://gcore.jsdelivr.net/npm/mzgantt@2026.1.601/cdn/edit.js"></script>
947
- <script language="javascript" src="https://gcore.jsdelivr.net/npm/mzgantt@2026.1.601/cdn/export.js"></script>
948
- <script language="javascript" src="https://gcore.jsdelivr.net/npm/mzgantt@2026.1.601/cdn/mobile.js"></script>
936
+ ```
937
+ <link rel="stylesheet" type="text/css" href="https://gcore.jsdelivr.net/npm/mzgantt@1.0.8/cdn/mzgantt.css" />
938
+ <script language="javascript" src="https://gcore.jsdelivr.net/npm/mzgantt@1.0.8/cdn/mzgantt.js"></script>
939
+ <script language="javascript" src="https://gcore.jsdelivr.net/npm/mzgantt@1.0.8/cdn/edit.js"></script>
940
+ <script language="javascript" src="https://gcore.jsdelivr.net/npm/mzgantt@1.0.8/cdn/export.js"></script>
941
+ <script language="javascript" src="https://gcore.jsdelivr.net/npm/mzgantt@1.0.8/cdn/mobile.js"></script>
942
+ ```
949
943
 
950
944
  2. npm版（支持vue等）：直接使用npm命令安装即可。
951
945
  > npm install mzgantt
package/sample/sample.html ADDED
@@ -0,0 +1,465 @@
1
+ <!DOCTYPE html>
2
+ <html lang="en">
3
+ <head>
4
+ <meta charset="UTF-8">
5
+ <meta name="viewport" content="width=device-width, initial-scale=1.0">
6
+ <title>MZGantt Sample</title>
7
+ <meta name="viewport" content="width=device-width" />
8
+ <meta name="Keywords" content="MZGantt, Web Gantt, web Gantt chart, bar chart, Gantt chart, Gantt chart plugin, JS Gantt chart plugin, web Gantt chart plugin, drag-and-drop editing Gantt chart, npm installed Gantt chart plugin" />
9
+ <meta name="description" content="MZGantt is a pure JavaScript Gantt chart plugin. It supports Vue, TypeScript (TS), JavaScript (JS), and various popular frontend frameworks. It can be quickly integrated into your web application or mobile app.">
10
+ <meta name="author" content="ndes-global.com,tecjt.com" />
11
+
12
+ <!-- Import MZGantt CSS -->
13
+ <link rel="stylesheet" href="https://gcore.jsdelivr.net/npm/mzgantt@1.0.7/cdn/mzgantt.css">
14
+
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>
20
+
21
+ <style>
22
+ body {
23
+ margin: 0;
24
+ padding: 20px;
25
+ font-family: Arial, sans-serif;
26
+ background-color: #f5f5f5;
27
+ }
28
+
29
+ .button-container {
30
+ margin-bottom: 15px;
31
+ padding: 10px;
32
+ background: white;
33
+ border-radius: 5px;
34
+ box-shadow: 0 2px 4px rgba(0,0,0,0.1);
35
+ }
36
+
37
+ .scale-container {
38
+ padding: 10px;
39
+ margin-bottom: 15px;
40
+ background: white;
41
+ border: 1px solid #9E9E9E;
42
+ border-radius: 5px;
43
+ font-size: 12px;
44
+ }
45
+
46
+ .gantt-container {
47
+ width: 100%;
48
+ height: 600px;
49
+ background: white;
50
+ border-radius: 5px;
51
+ box-shadow: 0 2px 8px rgba(0,0,0,0.1);
52
+ }
53
+
54
+ button, input[type="button"] {
55
+ margin: 2px;
56
+ padding: 5px 10px;
57
+ background: #2E9AFE;
58
+ color: white;
59
+ border: none;
60
+ border-radius: 3px;
61
+ cursor: pointer;
62
+ font-size: 12px;
63
+ }
64
+
65
+ button:hover, input[type="button"]:hover {
66
+ background: #1A8DFF;
67
+ }
68
+
69
+ label {
70
+ margin-right: 10px;
71
+ cursor: pointer;
72
+ }
73
+
74
+ input[type="radio"], input[type="checkbox"] {
75
+ margin-right: 5px;
76
+ cursor: pointer;
77
+ }
78
+ </style>
79
+ </head>
80
+ <body>
81
+
82
+ <!-- Control buttons -->
83
+ <div class="button-container">
84
+ <button onclick="showData()">Get All Data</button>
85
+ <button onclick="alert(JSON.stringify(myGantt.getUpdatedRows()))">Get Changed Data</button>
86
+ <button onclick="alert(JSON.stringify(myGantt.getSelectedRows()))">Get Selected Data</button>
87
+
88
+ <button onclick="myGantt.showMileStone(true)">Show Milestone</button>
89
+ <button onclick="myGantt.showMileStone(false)">Hide Milestone</button>
90
+ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;
91
+ <button onclick="myGantt.addRow('add')">Add</button>
92
+ <button onclick="myGantt.addRow('insert')">Insert</button>
93
+ <button onclick="myGantt.addRow('append')">Append</button>
94
+ <button onclick="myGantt.addRow('addChild')">Add Sub-task</button>
95
+ <button onclick="myGantt.deleteRows()">Delete</button>
96
+ <button onclick="myGantt.exportGanttImg()">Save as Image</button>
97
+ </div>
98
+
99
+ <!-- Time scale controls -->
100
+ <div class="scale-container">
101
+ Time Scale:
102
+ <input type="radio" name="radFormat" id="r_day" onclick='myGantt.changeFormat("day")' value="day" checked>
103
+ <label for="r_day">Day</label>
104
+
105
+ <input type="radio" name="radFormat" id="r_week" onclick='myGantt.changeFormat("week")' value="week">
106
+ <label for="r_week">Week</label>
107
+
108
+ <input type="radio" name="radFormat" id="r_month" onclick='myGantt.changeFormat("month")' value="month">
109
+ <label for="r_month">Month</label>
110
+
111
+ <input type="radio" name="radFormat" id="r_quarter" onclick='myGantt.changeFormat("quarter")' value="quarter">
112
+ <label for="r_quarter">Quarter</label>
113
+
114
+ &nbsp;&nbsp;&nbsp;&nbsp;
115
+ <input type="checkbox" id="_show_actual" onclick="showRslt()" checked>
116
+ <label for="_show_actual">Show Actual Progress</label>
117
+ </div>
118
+
119
+ <!-- Gantt chart container -->
120
+ <div id="GanttChartDIV" class="gantt-container"></div>
121
+
122
+ <script>
123
+ // Resource list
124
+ const resourceList = [
125
+ {value: "1", text: "Aaron Kwok"},
126
+ {value: "2", text: "Leon Lai"},
127
+ {value: "3", text: "Andy Lau"},
128
+ {value: "4", text: "Jacky Cheung"}
129
+ ];
130
+
131
+ // Gantt configuration
132
+ const ganttConfig = {
133
+ ganttStatus: "e",
134
+
135
+ // Column configuration
136
+ columnDefs: [
137
+ {name: 'seq', field: "seq"},
138
+ {name: 'checkbox', field: "checkbox"},
139
+ {name: 'name', field: "name", title: "Task Name", width: 150},
140
+ {name: 'resId', field: "resId", title: "Assignee", width: 50, options: resourceList, editable: true, multipleSelect: true},
141
+ {name: 'dur', field: "dur", title: "Duration", width: 60},
142
+ {name: 'planStart', field: "planStart", title: "Plan Start", width: 120, align: "left"},
143
+ {name: 'planEnd', field: "planEnd", title: "Plan Finish", width: 120},
144
+ {name: 'planDur', field: "planDur", title: "Plan Man-days", width: 60},
145
+ {name: 'rsltStart', field: "rsltStart", title: "Actual Start", width: 120},
146
+ {name: 'rsltEnd', field: "rsltEnd", title: "Actual Finish", width: 120},
147
+ {name: 'rsltDur', field: "rsltDur", title: "Actual Man-days", width: 60},
148
+ {name: 'pctComp', field: "pctComp", title: "Completion %", width: 60},
149
+ {name: "testCol1", field: "custColsVal", title: "Column 1", type: "TextBox", default: 10, width: 50, align: "left", visiable: true, editable: true},
150
+ {name: "testCol3", field: "custColsVal", title: "Column 3", width: 150, align: "left"}
151
+ ],
152
+
153
+ // Info box style
154
+ infoBoxStyle: "border: #cdcdcd 1px solid; background: #FFFFFF; box-shadow: 3px 3px 2px #CDCDCD; border-radius: 5px; padding: 5px;",
155
+
156
+ // Display controls
157
+ showTrack: 1,
158
+ showDuplicate: 0,
159
+ showMileStone: 1,
160
+ showDependencies: 1,
161
+ showDayDate: "date",
162
+ showWeekIndex: "",
163
+
164
+ // Data definitions
165
+ holidayList: ['2023-02-09', '2023-02-21', '2023-03-20'],
166
+ workdayList: ['2023-03-18'],
167
+ mileStoneLines: [
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
+ {date: 'today', name: 'today', title: 'Today', color: '#FF0000', thickness: "2px"}
171
+ ],
172
+
173
+ // Plugin configuration
174
+ captionType: 'None',
175
+ captionPosition: 'Right',
176
+ dateFormat: 'yyyy-mm-dd',
177
+ weekStartDay: 0,
178
+ workingHourRange: ['1', '23'],
179
+ hourFormat: 0,
180
+ dragChgDur: "1",
181
+ autoCalDur: 1,
182
+ includeHoliday: "N",
183
+ includeToTime: "Y",
184
+ durPrecision: 2,
185
+ fixColsCnt: 4,
186
+ fixParent: 0,
187
+ idType: "Snow",
188
+
189
+ // Style controls
190
+ compBackground: '#00BAAD',
191
+ groupBackground: '#C0EBE8',
192
+ holidayBGColor: '#FAFAFA',
193
+ currentTimeBackColor: ['h', '#FF9797'],
194
+ intervalColor: ['#FFFFFF', '#F4F4F4'],
195
+ selectedRowColor: '#D8D8D8',
196
+ selectedCellColor: '#2E9AFE',
197
+ borderColor: '#CDCDCD',
198
+ barBorderRadius: 6,
199
+ barBorderWeight: 0,
200
+ barBorderColor: '#9E0000',
201
+ barOpacity: 1,
202
+ barGridBorderWeight: 1,
203
+ barHeightAdj: 2,
204
+ barDistanceAdj: -1,
205
+ dragHandlerBackColor: '#D8D8D8',
206
+ dependLineColor: '#00BAAD',
207
+ dependLineMouseOverColor: '#FE9A2E',
208
+ criticalPathBGColor: '#FE9A2E',
209
+ leftSideWidth: 300,
210
+ contentHeight: 500,
211
+ rowHeight: 35,
212
+ dayColWidth: 20,
213
+ monthColWidth: 280,
214
+ quarterColWidth: 460
215
+ };
216
+
217
+ // Sample task data
218
+ const taskData = [
219
+ {
220
+ id: 1,
221
+ seq: 1000,
222
+ name: "Unit A Construction Period 1",
223
+ rsltStart: "",
224
+ rsltEnd: "",
225
+ rsltDur: 1,
226
+ planBarColor: "#C0EBE8",
227
+ linkTo: "http://",
228
+ isMS: 0,
229
+ resId: "1",
230
+ pctComp: 0,
231
+ isGroup: 1,
232
+ parentId: "",
233
+ isExpand: 1,
234
+ preNodes: "",
235
+ caption: "Key Focus",
236
+ testCol1: "1",
237
+ testCol2: "01",
238
+ testCol3: "3",
239
+ plan: [{start: "2023-07-05", end: "2023-09-06", dur: 10}]
240
+ },
241
+ {
242
+ id: 11,
243
+ seq: 2000,
244
+ name: "Task Name 001",
245
+ plan: [{start: "2023-07-05", end: "2023-07-06", dur: 10}],
246
+ rsltStart: "2023-07-14",
247
+ rsltEnd: "2023-07-15",
248
+ rsltDur: 1,
249
+ planBarColor: "#C0EBE8",
250
+ linkTo: "http://",
251
+ isMS: 0,
252
+ resId: "2",
253
+ pctComp: 40,
254
+ isGroup: 0,
255
+ parentId: 1,
256
+ isExpand: 1,
257
+ caption: "",
258
+ testCol1: "10",
259
+ testCol2: "02",
260
+ testCol3: "Sample content"
261
+ },
262
+ {
263
+ id: 12,
264
+ seq: 3000,
265
+ name: "Task Name 002",
266
+ plan: [{start: "", end: ""}],
267
+ rsltStart: "2023-07-10",
268
+ rsltEnd: "2023-07-20",
269
+ rsltDur: 1,
270
+ planBarColor: "#C0EBE8",
271
+ linkTo: "http://",
272
+ isMS: "0",
273
+ resId: "2",
274
+ pctComp: 10,
275
+ isGroup: 0,
276
+ parentId: 1,
277
+ isExpand: 1,
278
+ preNodes: "",
279
+ caption: "Note 1",
280
+ testCol1: "aa",
281
+ testCol2: "00",
282
+ testCol3: "Sample content"
283
+ },
284
+ {
285
+ id: 2,
286
+ seq: 6000,
287
+ name: "Unit B Construction Period",
288
+ plan: [{}],
289
+ rsltStart: "",
290
+ rsltEnd: "",
291
+ rsltDur: 1,
292
+ planBarColor: "#C0EBE8",
293
+ linkTo: "http://",
294
+ isMS: 0,
295
+ resId: "1",
296
+ pctComp: 0,
297
+ isGroup: 1,
298
+ parentId: "",
299
+ isExpand: 1,
300
+ preNodes: [],
301
+ caption: ""
302
+ },
303
+ {
304
+ id: 22,
305
+ seq: 8000,
306
+ name: "Task Name b2",
307
+ plan: [{start: "2023-07-20", end: "2023-07-29"}],
308
+ rsltStart: "2023-07-30",
309
+ rsltEnd: "2023-08-02",
310
+ rsltDur: 1,
311
+ planBarColor: "#C0EBE8",
312
+ linkTo: "http://",
313
+ isMS: 0,
314
+ resId: "2",
315
+ pctComp: 0,
316
+ isGroup: 0,
317
+ parentId: 2,
318
+ isExpand: 1,
319
+ caption: ""
320
+ },
321
+ {
322
+ id: "B03",
323
+ seq: 9000,
324
+ name: "Task Name b3",
325
+ plan: [{start: "2023-08-02", end: "2023-08-10"}],
326
+ rsltStart: "2023-08-02",
327
+ rsltEnd: "2023-08-11",
328
+ rsltDur: 0,
329
+ planBarColor: "#C0EBE8",
330
+ linkTo: "http://",
331
+ isMS: 0,
332
+ resId: "2",
333
+ pctComp: 0,
334
+ isGroup: 0,
335
+ parentId: 2,
336
+ isExpand: 1,
337
+ preNodes: [],
338
+ caption: ""
339
+ },
340
+ {
341
+ id: "B31-01",
342
+ seq: 10000,
343
+ name: "B31-01",
344
+ plan: [{start: "2023-08-02", end: "2023-08-10"}],
345
+ rsltStart: "2023-08-02",
346
+ rsltEnd: "2023-08-11",
347
+ rsltDur: 0,
348
+ planBarColor: "#C0EBE8",
349
+ linkTo: "http://",
350
+ isMS: 0,
351
+ resId: "2",
352
+ pctComp: 0,
353
+ isGroup: 0,
354
+ parentId: "2",
355
+ isExpand: 1,
356
+ preNodes: [{id: 22, type: "FS", gapDays: 3}],
357
+ caption: ""
358
+ },
359
+ {
360
+ id: "B31-02",
361
+ seq: 11000,
362
+ name: "B31-02",
363
+ plan: [{start: "2023-08-11", end: "2023-08-16"}],
364
+ rsltStart: "2023-08-10",
365
+ rsltEnd: "2023-08-17",
366
+ rsltDur: 0,
367
+ planBarColor: "#C0EBE8",
368
+ linkTo: "http://",
369
+ isMS: 0,
370
+ resId: "2",
371
+ pctComp: 0,
372
+ isGroup: 0,
373
+ parentId: "2",
374
+ isExpand: 1,
375
+ preNodes: [{id: "B31-01", type: "FS", gapDays: 0}],
376
+ caption: ""
377
+ }
378
+ ];
379
+
380
+ // ================================ Gantt Chart Setup ====================================
381
+ // Initialize Gantt object
382
+ const myGantt = MZGantt.init();
383
+
384
+ // Start Gantt editor
385
+ MZGanttEditor.start(myGantt);
386
+
387
+ // Start Gantt Export
388
+ MZGanttExport.start(myGantt);
389
+
390
+ // Create and display Gantt chart
391
+ myGantt.createGantt("GanttChartDIV", "day");
392
+
393
+ // Set language to enlish
394
+ myGantt.setGanttLang("en");
395
+
396
+ // Configure Gantt with settings
397
+ myGantt.config(ganttConfig);
398
+
399
+ // Load task data
400
+ myGantt.bindGanttData(taskData);
401
+
402
+ // Draw Gantt chart
403
+ myGantt.drawGantt();
404
+
405
+ // ================================ Event Handlers ====================================
406
+
407
+ // Show actual progress toggle
408
+ function showRslt() {
409
+ const isChecked = document.getElementById("_show_actual").checked;
410
+ myGantt.switchTrack(isChecked);
411
+ }
412
+
413
+ // Display all data
414
+ function showData() {
415
+ const data = myGantt.getAllRows();
416
+ console.log("All Gantt Data:", data);
417
+ alert("Data logged to console. Check developer tools.");
418
+ }
419
+
420
+ // Event handlers setup
421
+ myGantt.on("cellRender", function(row, cellObj) {
422
+ const field = cellObj.field;
423
+
424
+ if (field === "pctComp") {
425
+ cellObj.cellHTML = `<div style="width:100%;background:#D8D8D8;border-radius:3px;">
426
+ <div style="border-radius:3px;background:#04B404;line-height:20px;width:${row.pctComp}%;">
427
+ ${row.pctComp}%</div></div>`;
428
+ }
429
+
430
+ return cellObj;
431
+ });
432
+
433
+ myGantt.on("rowRender", function(row, rowStyleObj) {
434
+ if (row.isGroup === 1) {
435
+ rowStyleObj.rowStyle = 'background:#BCF5A9;';
436
+ }
437
+ return rowStyleObj;
438
+ });
439
+
440
+ myGantt.on("clickBar", function(row, eventXY, dom) {
441
+ console.log(`Click: Task: ${row.name}, Date: ${eventXY.date}`);
442
+ });
443
+
444
+ myGantt.on("rightClick", function(row, eventXY, dom) {
445
+ console.log(`Right Click: Task: ${row.name}, Element ID: ${dom.id}, Date: ${eventXY.date}`);
446
+ });
447
+
448
+ myGantt.on("loaded", function(e, data) {
449
+ console.log("Gantt chart loaded successfully");
450
+ });
451
+
452
+ // Filter functions
453
+ function addFilter() {
454
+ myGantt.filterRows((task) => {
455
+ return task.plan[0]?.dur > 3;
456
+ }, "onlyShow");
457
+ }
458
+
459
+ function removeFilter() {
460
+ myGantt.removefilter();
461
+ }
462
+
463
+ </script>
464
+ </body>
465
+ </html>