mzgantt 1.0.6 → 1.0.7
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/README.en.md +962 -25
- package/cdn/export.js +1 -1
- package/package.json +1 -1
- package/readme.md +7 -5
- package/sample/sample.html +465 -0
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "mzgantt",
|
|
3
|
-
"version": "1.0.
|
|
3
|
+
"version": "1.0.7",
|
|
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
|
@@ -941,11 +941,13 @@ MZGantt提供丰富接口，操作或控制甘特图数据和特征。
|
|
|
941
941
|
1. 普通js版
|
|
942
942
|
进入下载： <a href="https://gitee.com/tecjt_home/mzgantt_js">MZGantt甘特图插件（普通js版）</a>
|
|
943
943
|
或者使用CDN：
|
|
944
|
-
|
|
945
|
-
|
|
946
|
-
|
|
947
|
-
|
|
948
|
-
|
|
944
|
+
```
|
|
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>
|
|
950
|
+
```
|
|
949
951
|
|
|
950
952
|
2. npm版（支持vue等）：直接使用npm命令安装即可。
|
|
951
953
|
> npm install mzgantt
|
|
@@ -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
|
+
|
|
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">Week/Day</label>
|
|
104
|
+
|
|
105
|
+
<input type="radio" name="radFormat" id="r_week" onclick='myGantt.changeFormat("week")' value="week">
|
|
106
|
+
<label for="r_week">Year/Week</label>
|
|
107
|
+
|
|
108
|
+
<input type="radio" name="radFormat" id="r_month" onclick='myGantt.changeFormat("month")' value="month">
|
|
109
|
+
<label for="r_month">Year/Month</label>
|
|
110
|
+
|
|
111
|
+
<input type="radio" name="radFormat" id="r_quarter" onclick='myGantt.changeFormat("quarter")' value="quarter">
|
|
112
|
+
<label for="r_quarter">Year/Quarter</label>
|
|
113
|
+
|
|
114
|
+
|
|
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-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"},
|
|
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: 70,
|
|
214
|
+
quarterColWidth: 100
|
|
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 wzf",
|
|
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 222222",
|
|
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>
|