Vue2使用dhtmlx-gantt插件实现复杂甘特图

<template>
  <div class="container">
    <div ref="gantt" class="gantt-container" />
  div>
template>
<script>
import {
  gantt
} from 'dhtmlx-gantt'
import 'dhtmlx-gantt/codebase/dhtmlxgantt.css'

export default {
  name: 'Gantt',
  props: {
    ganttChartData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      tasks: {
        data: []
      }
    }
  },
  created() {
    gantt.clearAll() // 先清空，再添加，就不会有缓存
  },
  mounted() {
    // 自适应甘特图的尺寸大小, 使得在不出现滚动条的情况下, 显示全部任务
    gantt.config.autosize = false
    // 只读模式
    gantt.config.readonly = true
    // 是否显示左侧树表格
    gantt.config.show_grid = true
    // 时间轴图表中，如果不设置，只有行边框，区分上下的任务，设置之后带有列的边框，整个时间轴变成格子状。
    gantt.config.show_task_cells = true
    // 当task的长度改变时，自动调整图表坐标轴区间用于适配task的长度
    gantt.config.fit_tasks = true
    // 甘特图的一个宽度
    gantt.config.min_column_width = 140
    gantt.config.auto_types = true
    // 配置时间格式
    gantt.config.xml_date = '%Y-%m-%d'
    gantt.config.start_on_monday = true
    gantt.config.scale_height = 60
    gantt.config.autoscroll = true
    // 设置日历的开始时间和结束时间
    gantt.config.calendar_property = 'start_date'
    gantt.config.calendar_property = 'end_date'
    gantt.i18n.setLocale('cn')
    // '在页面上显示/隐藏标记'
    gantt.config.show_markers = true
    // 设置时间刻度相关属性
    gantt.config.scales = [
      { unit: 'year', step: 1, format: '%Y年' },
      { unit: 'month', step: 1, format: '%M' }
    ]
    // 表格列设置
    gantt.config.columns = [
      { name: 'taskTitle', label: '标题', tree: true, min_width: 200 },
      { name: 'start_date', label: '开始时间', min_width: 80 },
      { name: 'end_date', label: '结束时间', min_width: 80 },
      { name: 'statusName', label: '状态', min_width: 50, template: function(item) {
        let templateDiv = ''
        console.log('1536', item)
        templateDiv = `
${item.statusType === 'father' ? 'father-status-box' : 'child-status-box'} ">
${item.status} status-box">${item.statusName}`
        return templateDiv
      }
      }
    ]
    // 是否开启鼠标经过出现提示框
    gantt.plugins({
      tooltip: true
    })
    // 自定义提示框的布局和样式
    gantt.attachEvent('onGanttReady', function() {
      var tooltips = gantt.ext.tooltips
      gantt.templates.tooltip_text = function(start, end, task) {
        return `
                

                  
${task.taskTitle}
                  

                    起止时间：${gantt.templates.tooltip_date_format(start)}~${gantt.templates.tooltip_date_format(end)}
                    
${task.overdueCount ? '逾期时长：' : ''}${task.overdueCount || ''}${task.overdueCount ? '天' : ''}
                  
                
              `
      }
    })
    // 设置任务条进度内容
    gantt.templates.progress_text = function(start, end, task) {
      return ''
    }

    // 任务条显示内容
    gantt.templates.task_text = function(start, end, task) {
      return ''
    }
    // 任务条上的文字大小 以及取消border自带样式，和任务状态的样式，动态添加标签
    gantt.templates.task_class = function(start, end, item) {
      let taskClass = ''
      if (item.$level === 0) {
        if (item.status * 1 === 2 && new Date() < item.end_date) {
          console.log('44444')
          // 办理中
          taskClass = 'firstLevelTask processing-progress-father'
        } else if (item.status * 1 === 4 && new Date() < item.end_date) {
          // 逾期
          taskClass = 'firstLevelTask overdue-progress-father'
        } else {
          taskClass = 'firstLevelTask'
        }
      } else {
        if ((item.status * 1 === 0 || item.status * 1 === 1) && new Date() < item.end_date) {
          taskClass = 'secondLevelTask processing-progress-son'
        } else if (item.status * 1 === 4 && new Date() < item.end_date) {
          taskClass = 'secondLevelTask overdue-progress-son'
        } else {
          taskClass = 'secondLevelTask'
        }
      }
      return taskClass
    }
    // 滚动条的配置和设置左边树图的固定宽度
    gantt.config.layout = {
      css: 'gantt_container',
      cols: [
        {
          width: 434,
          min_width: 434,
          rows: [{
            view: 'grid',
            scrollX: 'gridScroll',
            scrollable: true,
            scrollY: 'scrollVer'
          },
          {
            view: 'scrollbar',
            id: 'gridScroll',
            group: 'horizontal'
          }
          ]
        },
        {
          resizer: true,
          width: 1
        },
        {
          rows: [{
            view: 'timeline',
            scrollX: 'scrollHor',
            scrollY: 'scrollVer'
          },
          {
            view: 'scrollbar',
            id: 'scrollHor',
            group: 'horizontal'
          }
          ]
        },
        {
          view: 'scrollbar',
          id: 'scrollVer'
        }
      ]
    }
    // 给右边甘特图添加点击事件
    document.addEventListener('click', (e) => {
      if (e.target.className === 'gantt_task_content') {
        console.log('10258', e.target.parentElement.dataset.taskId)
        const taskId = e.target.parentElement.dataset.taskId
        let objData = {}
        this.ganttChartData.map((item) => {
          if (item.id === taskId) {
            objData = { overseerTaskId: item.overseerTaskId || item.id, id: item.id, statusType: item.statusType }
            return
          }
        })
        this.$emit('handleDetial', objData)
      }
    })
    // 开启标记
    gantt.plugins({
      marker: true
    })
    // 标记当前日期
    var dateToStr = gantt.date.date_to_str(gantt.config.task_date)
    var markerId = gantt.addMarker({
      start_date: new Date(),
      css: 'today',	// 标记样式，style中对应
      text: '',
      title: dateToStr(new Date())
    })
    gantt.getMarker(markerId)
    // 初始化
    gantt.init(this.$refs.gantt)
    // 数据解析
    gantt.parse({ data: this.ganttChartData })
    gantt.config.autofit = true
  },
  methods: {
    // 回到当前时间的标记
    changeToday() {
      this.$nextTick(() => {
        const ganTT = document.getElementsByClassName('gantt_marker today')
        gantt.scrollTo(ganTT[0].offsetLeft - 300, null)
      })
    }
  }
}
script>
<style lang="scss">
    .firstLevelTask {
        border: none;

        .gantt_task_content {
            font-size: 14px;
        }
    }

    .secondLevelTask {
        border: none;
    }
    html,
    body {
        margin: 0px;
        padding: 0px;
        height: 100%;
        overflow: hidden;
    }

    .container {
        height: 100%;
        width: 100%;
        position: relative;
        .gantt-container {
          height: 100%!important;
        }
        .gantt_grid_head_cell {
            padding-left: 20px;
            text-align: left !important;
            border-bottom: 0;
            font-size: 12px!important;
            font-weight: 500;
            color: #999999!important;
        }
        .gantt_row_task {
          .gantt_cell_tree {
            padding-left: 20px;
          }
        }

        .left-container {
            height: 100%;
        }

        .parent {
            .gantt_tree_icon {
                &.gantt_folder_open {
                    background-image: none !important;
                }
                &.gantt_folder_closed{
                    background-image: none !important;
                }
            }
        }

    }

    .left-container {
        height: 100%;
    }

    .gantt_task_content {
        text-align: left;
        padding-left: 10px;
    }
    .gantt_tree_icon.gantt_folder_open {
      display: none !important;
    }
    .gantt_tree_icon.gantt_folder_closed {
      display: none !important;
    }
    .gantt_tree_icon.gantt_file {
      display: none !important;
    }
    .gantt_tree_icon.gantt_blank {
      width: 3px!important;
    }
    .gantt_grid_head_start_date,.gantt_grid_head_end_date,.gantt_grid_head_duration {
      padding-left: 6px !important;
    }
    .gantt_tree_icon.gantt_close {
      background-image: url(@/assets/images/close.svg)!important;
    }
    .gantt_tree_icon.gantt_open {
      background-image: url(@/assets/images/open.svg)!important;
    }
    .gantt_tree_content {
      white-space: nowrap;
      text-overflow: ellipsis;
      overflow: hidden;
    }
    .secondLevelTask {
      height: 10px !important;
      margin-top: 10px;
      border-radius: 10px;
      min-width: 2.5px!important;
    }
    .firstLevelTask {
      height: 15px !important;
      margin-top: 8px;
      border-radius: 15px;
      min-width: 2.5px!important;
    }
    .today {
      background: #0270E0!important;
      width: 1px !important;
    }
    .gantt_task_row, .gantt_task_row.odd {
      background: #f5f7fa!important;
      border-bottom: 0;
    }
    .gantt_task_cell {
      border: 0;
    }
    .gantt_grid_scale, .gantt_row {
      border-bottom: 0;
    }
    .gantt_grid_data .gantt_row.gantt_selected, .gantt_grid_data .gantt_row.odd.gantt_selected, .gantt_grid_data .gantt_row.odd:hover, .gantt_grid_data .gantt_row:hover {
      background: rgba(2,112,224,0.04)!important;
    }
    .gantt_row_project {
      .gantt_cell_tree {
        font-size: 16px!important;
        color: #212b36!important;
      }
      .gantt_cell {
        font-size: 12px;
        font-weight: 400;
        color: #999999;
      }
    }
    .gantt_row_task {
      .gantt_cell_tree {
        font-size: 14px!important;
        color: #262626!important;
      }
      .gantt_cell {
        font-size: 12px;
        font-weight: 400;
        color: #999999;
      }
    }
    .gridScroll_cell {
      height: 0!important;
      .gantt_layout_content {
        height: 0!important;
        .gantt_layout_cell {
          height: 0!important;
        }
      }
    }
    .gantt_layout_cell_border_right {
      border-right: 1px solid #DCE1E6!important;
    }
    .gantt_layout_cell_border_bottom {
      border-bottom: 0;
      // border-bottom: 1px solid #DCE1E6!important;
    }
    .gantt_layout_cell_border_top {
      border-top: 1px solid #DCE1E6!important;
    }
    .gantt_layout_cell_border_left {
      border-left: 1px solid #DCE1E6!important;
    }
    .container {
      border-bottom: 1px solid #DCE1E6!important;
    }
    .gantt_grid_head_statusName {
      padding-left: 7px!important;
    }
    .father-status-box {
      .status-box2 {
        color: #17a514;
        background: #f0f9eb;
        border: 1px solid #e1f3d8;
      }
      .status-box3 {
        color: #262626;
        background: #EDEDED;
        border: 1px solid rgba(102,102,102,0.06);
      }
      .status-box4 {
        font-size: 14px;
        font-weight: 400;
        text-align: left;
        color: #E20000;
        background: #feebeb;
        border: 1px solid rgba(226,0,0,0.06);
        border-radius: 4px;
        height: 24px;
        line-height: 24px;
        width: 46px;
        text-align: center;
      }
    }
    .child-status-box {
      .status-box0 {
        color: #17a514;
        background: #f0f9eb;
        border: 1px solid #e1f3d8;
      }
      .status-box1 {
        color: #F47D06;
        background: #fef4eb;
        border: 1px solid rgba(244,125,6,0.06);
      }
      .status-box2 {
        color: #262626;
        background: #EDEDED;
        border: 1px solid rgba(102,102,102,0.06);
      }
      .status-box4 {
        font-size: 14px;
        font-weight: 400;
        text-align: left;
        color: #E20000;
        background: #feebeb;
        border: 1px solid rgba(226,0,0,0.06);
        border-radius: 4px;
        height: 24px;
        line-height: 24px;
        width: 46px;
        text-align: center;
      }
    }
    .status-box {
       font-size: 14px;
        font-weight: 400;
        border-radius: 4px;
        height: 24px;
        line-height: 24px;
        text-align: center;
        margin-top: 4px;
    }
    .gantt_task_progress {
      border-radius: 10px;
    }
    .gantt_task_line.gantt_task_inline_color.processing-progress-father {
      .gantt_task_progress {
        background: #51A6FB!important;
        opacity: 1!important;
        border-radius: 10px;
      }
    }
    .gantt_task_line.gantt_task_inline_color.processing-progress-son {
      .gantt_task_progress {
        background: #51A6FB!important;
        opacity: 1!important;
        border-radius: 10px;
      }
    }
    .gantt_task_line.gantt_task_inline_color {
      border: 0;
    }
    .gantt_task .gantt_task_scale .gantt_scale_cell {
      text-align: left;
      padding-left: 10px;
    }
style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474

实现的效果

获取数据和组装数据

接口返回的格式是：

data: [
		{
			 father,
			  relation: [ {}, {} ]
		},
		{
			 father,
			  relation: [ {}, {} ]
		}
]
1
2
3
4
5
6
7
8
9
10

getProjectCompleteState() {
      this.fullscreenLoading = true
      const params = {
        topicType: this.projectObj.topicType || '',
        type: 2,
        keyWord: this.formChart.keyWord,
        taskStatus: this.formChart.taskStatus
      }
      return new Promise((resolve, reject) => {
        getProjectCompleteState(params).then(res => {
          if (res.data.success) {
            this.ganttChartData = []
            const dataList = res.data.data.rows
            dataList.forEach((row, index) => {
              this.ganttChartData.push({
                taskTitle: row.taskTitle, // 父任务标题
                overdueCount: row.overdueCount, // 父任务的逾期数
                id: row.id, // 父任务的标识id
                status: row.status, // 父任务的状态值
                start_date: this.$dayjs(row.firstSubmitTime).format('YYYY-MM-DD'), // 父任务的开始时间，插件会直接使用子任务最早的开始时间
                end_date: this.$dayjs(row.limitDate).format('YYYY-MM-DD'), // 父任务的结束时间，插件会直接使用子任务最后的结束时间
                // 父任务只有状态为办理并且当前时间大于开始时间并且结束时间大于当前时间，才会有完成率（开始时间-当前时间的天数）/ （当前时间-结束时间的天数）
                progress: new Date() > new Date(row.firstSubmitTime) && new Date(row.limitDate) > new Date() && row.status * 1 === 2
                  ? (this.dayTime(this.$dayjs(row.firstSubmitTime).format('YYYY-MM-DD'), this.$dayjs(new Date()).format('YYYY-MM-DD')) /
                      this.dayTime(this.$dayjs(row.firstSubmitTime).format('YYYY-MM-DD'), this.$dayjs(row.limitDate).format('YYYY-MM-DD'))) : '',
                statusName: row.statusName, // 状态名
                color: row.status * 1 === 2 ? '#D8EBFF' : row.status * 1 === 4 ? '#FF6D6D' : '#A2B7CC', // 根据不同的状态图的颜色不同
                statusType: 'father' // 任务标识
              })
              if (row.relationList.length > 0) {
                row.relationList.forEach(item => {
                  this.ganttChartData.push({
                    taskTitle: item.taskTitle, // 子任务标题
                    id: item.rId, // 子任务标识
                    overseerTaskId: item.overseerTaskId, // 父任务id
                    status: item.status, // 子任务状态
                    start_date: this.$dayjs(item.firstSubmitTime).format('YYYY-MM-DD'), // 子任务开始时间
                    end_date: this.$dayjs(item.limitDate).format('YYYY-MM-DD'), // 子任务结束时间
                    statusType: 'child', // 任务标识
                    overdueCount: item.overdueCount, // 子任务逾期数
                    // 子任务只有状态为办理或者待签收并且当前时间大于开始时间并且结束时间大于当前时间，才会有完成率（开始时间-当前时间的天数）/ （当前时间-结束时间的天数）
                    progress: new Date() > new Date(item.firstSubmitTime) && new Date(item.limitDate) > new Date() && item.status * 1 === 0 || item.status * 1 === 1
                      ? this.dayTime(this.$dayjs(item.firstSubmitTime).format('YYYY/MM/DD'), this.$dayjs(new Date()).format('YYYY/MM/DD')) /
                    this.dayTime(this.$dayjs(item.firstSubmitTime).format('YYYY/MM/DD'), this.$dayjs(item.limitDate).format('YYYY/MM/DD'))
                      : '',
                    parent: row.id, // 注意：只有这个字段跟父任务id保持一致，子任务才会在该任务的折叠下
                    statusName: item.statusName,
                    color: item.status * 1 === 0 || item.status * 1 === 1 ? '#D8EBFF' : item.status * 1 === 2 ? '#A2B7CC' : '#FF6D6D' // 根据不同的状态图的颜色不同
                  })
                })
              }
            })
            this.isGanttChart = true
            this.fullscreenLoading = false
            resolve()
          }
        })
      })
    },
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

交互功能

1.左边的树形图支持折叠的表格，最后一个状态的值，要根据返回的值动态显示样式

 // 表格列设置
    gantt.config.columns = [
      { name: 'taskTitle', label: '标题', tree: true, min_width: 200 },
      { name: 'start_date', label: '开始时间', min_width: 80 },
      { name: 'end_date', label: '结束时间', min_width: 80 },
      { name: 'statusName', label: '状态', min_width: 50, template: function(item) {
        let templateDiv = ''
        console.log('1536', item)
        templateDiv = `
${item.statusType === 'father' ? 'father-status-box' : 'child-status-box'} ">
${item.status} status-box">${item.statusName}`
        return templateDiv
      }
      }
    ]
1
2
3
4
5
6
7
8
9
10
11
12
13

给状态字段添加标签和样式

2.日历中的图的显示样式

要在组装样式的方法传一个progress，图上的需求是开始时间到当前时间颜色显示为深色和圆角，当前时间到结束时间显示为浅色和圆角。
progress: (开始时间-当前时间的天数)/(当前时间-结束时间的天数)

点击图弹出详情窗的事件

要绑定一个事件，然后获取每个任务标识id，在通过这个id去数据中遍历，组装自己想要的数据

document.addEventListener('click', (e) => {
      if (e.target.className === 'gantt_task_content') {
        console.log('10258', e.target.parentElement.dataset.taskId)
        const taskId = e.target.parentElement.dataset.taskId
        let objData = {}
        this.ganttChartData.map((item) => {
          if (item.id === taskId) {
            objData = { overseerTaskId: item.overseerTaskId || item.id, id: item.id, statusType: item.statusType }
            return
          }
        })
        this.$emit('handleDetial', objData)
      }
    })
1
2
3
4
5
6
7
8
9
10
11
12
13
14

gantt常见的属性配置

gantt.config = {
	auto_scheduling_move_projects: '定义是否将整个项目移动（请参阅下面的详细信息）',
	preserve_scroll: '在重新绘制甘特图时保留垂直和水平滚动的当前位置',
	auto_scheduling_descendant_links: '允许或禁止创建从父任务（项目）到子任务的链接',
	task_date: '设置灯箱“时间段”部分中日期标签的格式',
	resource_render_empty_cells: '告诉资源时间线渲染元素并为未分配的单元格调用模板',
	tooltip_offset_x: '设置工具提示位置的右侧（如果为正）偏移',
	drag_links: '允许通过拖放创建依赖链接',
	root_id: '设置虚拟根元素的 id',
	readonly: '激活甘特图的只读模式',
	drag_multiple: '可以一次拖动多个选定的任务',
	scale_unit: '设置时间刻度的单位（X 轴）',
	task_scroll_offset: '设置距离时间轴左边框最近的任务的偏移量（以像素为单位）',
	fit_tasks: '甘特图自动扩展时间尺度以适应所有显示的任务',
	editor_types: '包含内联编辑器定义的对象',
	touch: '启用 / 禁用对甘特图的触摸支持',
	datastor: '一组数据存储方法',
	start_date: '设置时间刻度的起始值',
	details_on_create: '在通过单击“+”按钮创建新事件时打开灯箱',
	time_picker: '设置灯箱中时间下拉选择器的格式',
	layer_attribute: '设置任务层的 DOM 元素的属性名称',
	resource_attribute: '更改甘特图用来查找资源网格/时间线中的任务行所指的资源的属性的名称',
	min_column_width: '设置时间轴区域中列的最小宽度',
	version: '返回 dhtmlxGantt 的版本',
	quick_info_detached: '定义任务表单是从屏幕的左侧/右侧出现还是在所选任务附近出现',
	row_height: '设置表格行的默认高度',
	auto_scheduling_compatibility: '禁用任务的时间限制',
	keep_grid_width: '在调整列大小时保留初始网格的宽度',
	editable_property: '更改影响只读甘特图中任务/链接编辑能力的属性名称',
	lightbox: '指定灯箱对象',
	project_end: '指定项目的结束日期',
	touch_feedback: '在触摸设备上拖放之前/之后返回振动反馈',
	start_on_monday: '设置一周的开始日期',
	undo_actions: '设置撤消操作将恢复的操作',
	order_branch: '激活“分支”模式，允许在同一树级别内垂直重新排序任务',
	link_attribute: '设置将指定链接的 HTML 元素的 id 的属性的名称',
	link_line_width: '设置时间线区域中依赖链接的宽度',
	task_height: '设置时间线区域中任务栏的高度',
	rtl: '将甘特图切换到从右到左模式',
	tooltip_hide_timeout: '设置工具提示隐藏之前的时间长度，以毫秒为单位',
	container_resize_timeout: '指定在调整容器大小时重绘甘特图之前的延迟（以毫秒为单位）',
	utils: '各种辅助模块',
	scales: '定义时间刻度的配置设置',
	show_grid: '显示甘特图的网格区域',
	placeholder_task: '在任务列表的末尾添加一个空行以简化通过键盘编辑任务',
	open_tree_initially: '最初打开所有分支',
	drag_resize: '可以通过拖放来调整任务大小',
	env: '一组描述当前环境的标志',
	reorder_grid_columns: '可以通过拖放重新排列网格列 - 左侧树',
	smart_rendering: '为甘特图的任务和链接渲染启用智能渲染模式',
	keyboard_navigation_cells: '启用按单元格的键盘导航',
	resize_rows: '启用通过拖放调整行高的能力',
	sort: '启用表中的排序',
	drag_move: '允许通过拖放移动任务',
	drag_project: '允许拖放项目类型的项目',
	work_time: '可以在工作时间而不是日历时间计算任务的持续时间',
	button_left: '存储位于灯箱左下角的按钮集合',
	end_date: '设置时间刻度的结束值',
	constraint_types: '包含了所有可用的约束类型',
	branch_loading: '在甘特图中启用动态加载',
	auto_scheduling: '启用自动调度',
	task_grid_row_resizer_attribute: '',
	grid_resizer_attribute: '设置网格调整器的 DOM 元素的属性名称',
	min_grid_column_width: '在调整大小时设置网格的最小宽度（以像素为单位）',
	date_scale: '设置时间刻度的格式（X 轴）',
	auto_scheduling_strict: '启用自动调度模式，在这种模式下，任务将始终被重新安排到最早的日期',
	config: '定义日期、比例、控件的配置选项',
	deepcopy_on_parse: '定义甘特图是否对传递给 gantt.parse() 方法的数据对象执行深度复制',
	layout: '指定布局对象',
	quickinfo_buttons: '存储驻留在弹出任务的详细信息表单中的按钮集合',
	details_on_dblclick: '双击任务后打开灯箱',
	step: '设置时间刻度（X 轴）的步长',
	autoscroll: '在将任务或链接拖出当前浏览器屏幕时启用自动滚动',
	lightbox_additional_height: '增加灯箱的高度',
	project_start: '指定项目的开始日期',
	scroll_on_click: '指定在选择显示所选任务时是否滚动时间线区域',
	quickinfo_icons: '重新定义甘特图按钮的默认点击行为',
	calendar: '工作日历对象的接口',
	grid_width: '设置网格的宽度',
	date: '一组日期格式化方法',
	i18n: '一组用于甘特图本地化的方法',
	show_task_cells: '启用/禁用在(任务)图表区域中显示列边框',
	process_resource_assignments: '启用/禁用资源分配的解析',
	resource_property: '定义任务对象的属性，该对象存储与 resourceGrid/Timeline/Histogram/Calendar 关联的资源 ID',
	resource_assignment_store: '指定存储资源分配的数据存储的名称',
	date_format: '设置用于解析数据集中的数据并将日期发送回服务器的日期格式',
	container_resize_method: '定义甘特图是否应以时间间隔跟踪容器的大小调整',
	drag_lightbox: '可以通过标题拖动灯箱',
	show_chart: '显示甘特图的图表（时间线）区域',
	drag_mode: '存储可用拖放模式的类型',
	subscales: '指定第二个时间尺度（已弃用）',
	oldxml: '指定 dhtmlxGantt 1.0 的 XML 格式的序列化和解析',
	show_tasks_outside_timescale: '启用在甘特图中显示指定日期范围之外的任务',
	order_branch_free: '激活“分支”模式，允许在整个甘特图中重新排序任务',
	xml_date: '定义用于从数据集中解析数据并将数据发送到服务器的日期格式',
	autosize_min_width: '设置甘特图在水平“自动调整大小”模式下可以采用的最小宽度（以像素为单位）',
	button_right: '存储位于灯箱右下角的按钮集合',
	date_grid: '设置表格“开始时间”列中的日期格式',
	show_quick_info: '激活/禁用“quick_info”扩展（弹出任务的详细信息表单）',
	schedule_from_end: '启用反向调度',
	skins: '返回可用皮肤的对象',
	constants: '存储各种常量以减少代码中幻数的使用',
	multiselect: '在甘特图中启用/禁用多任务选择',
	redo: '启用甘特图的重做功能',
	duration_unit: '设置持续时间单位',
	touch_feedback_duration: '定义在触摸设备上拖放之前/之后振动反馈的持续时间（以毫秒为单位）',
	drag_timeline: '配置 drag_timeline 扩展的行为',
	drag_progress: '可以通过拖动进度旋钮来更改任务进度',
	horizontal_scroll_key: '通过 Shift|Alt|Meta 键 + 鼠标滚轮移动启用/禁用水平滚动',
	static_background_cells: '在 static_background 模式下启用突出显示的单元格的渲染',
	click_drag: '启用高级拖放',
	auto_scheduling_initial: '定义甘特图是否对数据加载/解析进行自动调度',
	grid_elastic_columns: '调整可滚动网格内列的宽度',
	autosize: '强制甘特图自动更改其大小以显示所有任务而无需滚动',
	bar_height: '设置时间线区域中任务栏的高度',
	ajax: '甘特图 ajax 模块',
	branch_loading_property: '指定任务有尚未从后端加载的子任务',
	templates: '定义甘特图中日期、标题、工具提示的格式模板',
	touch_drag: '定义用于区分长触摸手势和滚动手势的时间段（以毫秒为单位）',
	autoscroll_speed: '定义将任务或链接拖出当前浏览器屏幕时自动滚动的速度（以毫秒为单位）',
	show_errors: '在出现意外行为时启用显示错误警报',
	license: '返回 dhtmlxGantt 的许可证名称',
	calendar_property: '更改影响日历绑定到任务/任务组的属性的名称',
	prevent_default_scroll: '指定甘特容器是否应该阻止鼠标滚轮事件，或者应该将其传播到窗口元素',
	tooltip_offset_y: '设置工具提示位置的顶部（如果为正）偏移',
	show_links: '启用/禁用在甘特图中显示链接',
	inherit_scale_class: '指定子尺度是否默认使用 scale_cell_class 模板',
	scroll_size: '设置垂直（宽度）和水平（高度）滚动的大小',
	inline_editors_date_processing: '在编辑任务的开始/结束期间保持任务的持续时间不变',
	treeDatastore: '一组 treeDatastore 方法',
	select_task: '启用甘特图中的任务选择',
	xml: '指定 XML 序列化和解析',
	smart_scales: '指定仅在屏幕上呈现时间刻度的可见部分',
	wai_aria_attributes: '启用 WA:ARIA 支持以使屏幕阅读器可识别组件',
	wheel_scroll_sensitive: '指定鼠标滚轮滚动甘特图的速度',
	resource_calendars: '定义一组可以分配给特定资源（例如用户）的工作日历',
	external_render: '将外部组件渲染到 DOM 中',
	readonly_property: '更改影响任务/链接只读行为的属性的名称',
	duration_step: '设置与“duration”数据属性的一个单位对应的“gantt.config.duration_unit”单位数。',
	tooltip_timeout: '在显示任务的工具提示之前以毫秒为单位设置超时',
	show_markers: '在页面上显示/隐藏标记',
	scale_offset_minimal: '将最小比例单位（如果使用多个比例）设置为前导/关闭空白空间的间隔',
	ext: '一个存储各种扩展的对象',
	min_duration: '设置可以在调整大小期间为任务设置的最短持续时间（以毫秒为单位）。',
	keyboard_navigation: '在甘特图中启用键盘导航',
	json: '指定 JSON 序列化和解析',
	round_dnd_dates: '允许将任务的开始和结束日期四舍五入到最近的刻度线',
	grid_resizer_column_attribute: '设置列调整器的 DOM 元素的属性名称。该属性表示列的索引',
	locale: '甘特图的当前区域设置对象（特定于区域的标签）',
	keys: '定义甘特图的热键',
	skip_off_time: '从时间尺度隐藏非工作时间',
	auto_types: '自动将带有子任务的任务转换为项目，将没有子任务的项目转换回任务',
	time_step: '设置任务时间值的最小步长（以分钟为单位）',
	inherit_calendar: '定义任务是否应从其摘要父级继承工作日历',
	undo_types: '设置将应用撤消操作的实体类型',
	server_utc: '在将数据发送到服务器的同时将服务器端日期从 UTC 转换为本地时区（和向后）',
	show_unscheduled: '启用显示未计划的任务',
	cascade_delete: '允许的嵌套任务和链接级联删除',
	grid_resize: '通过拖动右侧网格的边框来调整网格的大小',
	right_work_time: '允许将任务的开始和结束日期调整为工作时间（拖动时）',
	min_task_grid_row_height: '设置在调整大小期间可以为任务设置的最小行高',
	static_background: '为时间线区域生成背景图像，而不是渲染实际的列和行行',
	csp: '定义日期格式化方法代码的内部实现',
	link_arrow_size: '设置链接箭头的大小',
	resource_store: '指定连接到 resourceGrid/resourceTimeline/resourceHistogram 视图的 dataStore 的名称',
	dynamic_resource_calendars: '启用将多个资源日历自动合并为一个',
	type_renderers: '重新定义负责显示不同类型任务的函数',
	scale_height: '设置时间刻度的高度和网格的标题',
	links: '存储链接依赖的类型',
	undo: '启用甘特图的撤消功能',
	task_attribute: '设置将指定任务的 HTML 元素的 id 的属性的名称',
	show_progress: '启用在任务栏中显示进度',
	columns: '配置表的列',
	initial_scroll: '设置时间线区域是否最初滚动以显示最早的任务',
	types: '存储灯箱结构的名称（用于不同类型的任务）',
	skin: '返回甘特图的当前皮肤',
	Wide_form: '将节及其标签设置在同一行',
	link_wrapper_width: '设置对点击敏感的区域的宽度（在链接上）',
	highlight_critical_path: '显示图表中的关键路径',
	multiselect_one_level: '指定多任务选择将在一个或任何级别内可用',
	undo_steps: '设置应由 undo 方法恢复的步骤数',
	autofit: '允许将网格的列自动调整为网格的宽度',
	open_split_tasks: '通过单击 +/- 按钮启用展开/折叠拆分任务的可能性'
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184