Dhtmlx gantt SAMPLE文件夹整理

DHTMLX-GANTT 7.0中SAMPLE文件夹提供了许多例子，每个例子都跑了一边，整理一下，方便以后用。

说明：红色字是一些基础功能。

 

sample解析

1. Initialization初始化（基本功能）
   1. Basic init基础初始
   2. 导入json
   3. 导入xml
   4. 06_touch_forced
   5. 08_explicit_time_range.html明确时间范围（应该是整个时间轴）
   6. 09_backward_compatibility向后兼容
   7. 10_fixed_size设置合适尺寸（<div id="gantt_here" style='width:1020px; height:400px;'></div>）
   8. 11_clickable_links：点击连接线显示提示信息
   9. 12_localization：本地语言
   10. 13_project_duration：项目所需时间设置：{id:23, text:"Task #4.3", start_date:"03-04-2018", duration:"5", parent:15, progress: 0, open: true}
   11. 14_reinitializtion：重新初始化
   12. 15_connector_json_enddate：读取有开始时间、结束时间JSON格式的数据。"start_date": "2018-04-01 00:00:00", "end_date": "2018-04-06 00:00:00",
   13. 17_bootstrap：
   14. 18_backward_planning：逆向方法计算任务：结束时间-任务所需时间。"end_date": "2018-04-01 00:00:00","duration": 5
   15. 19_tasks_without_dates：没有时间的任务，不显示
   16. 20_tasks_outside_timescale：超出的时间在左边的grid里面显示，但是不在右侧显示甘特图
2. Extension扩展
   1. 01_quickinfo：点击任务，会出现编辑/删除该任务信息。gantt.plugins({        quick_info: true        });
   2. 02_tooltip：鼠标移到任务，显示具体信息
   3. 05_today_line：显示当天时间线。
   4. 09_multiselection：选择多个任务
   5. 11_full_screen：全屏（未找到全屏按钮）
   6. 13_smart_rendering：智能处理。（看到的是智能排序了）
   7. 14_undo：设置任务状态（undo是没有做，redo是重做）
   8. 16_keyboard_navigation：开启键盘控制功能。keyboard_navigation: true
   9. 17_keyboard_navigation_cell：键盘控制功能。
   10. 18_linked_tasks：（不明白）
   11. 21_overlay：覆盖（如何覆盖不明白）
   12. 22_tooltip_api：提示功能API（和02相似）
   13. 23_click_drag_splittask：
   14. 24_click_drag：
   15. 25_click_drag_select_by_drag
   16. 26_full_screen_with_additional_elements：显示全屏，有全屏按钮
   17. 27_drag_timeline：通过鼠标移动日期来移动。
3. Scales日期缩放
   1. 01_multiple_scales。多重缩放：月、周、日（有周六、周日特殊颜色）
   2. 02_month_days（显示月、日（有星期））代码简单
   3. 03_full_year：全年缩放（年、季度、月）
   4. 04_days：每天（每天时间）
   5. 05_dynamic_scales：动态缩放（有缩放按钮）
   6. 06_custom_scales：一般的日期缩放（以日为最小单位）
   7. 07_minutes_scale：分钟为最小单位缩放
   8. 08_scale_autoconfig：自动调整缩放比例。（根据日期和任务的改变自动调整缩放比例）
   9. 10_working_hours
   10. 11_select_column：显示列（点击时间，会有一个颜色变化）
   11. 12_year_quarters：缩放1/4
   12. 13_zoom_to_fit：缩放甘特图使得整个任务在时间轴范围内都能够看到
   13. 14_scale_zoom_by_wheelmouse：支持鼠标+ctrl滚动缩放
4. Customization用户定制
   1. 01_outer_content   ：左右两栏显示额外信息
   2. 02_custom_tree：左边树型配置
   3. 03_link_styles：连接线样式
   4. 04_task_styles：任务样式
   5. 05_tree_template：树型模板
   6. 06_highlight_weekend：高亮周末（没有看到）
   7. 07_progress_text：甘特图显示进度
   8. 08_templates：
   9. 09_html_content
   10. 10_context_menu
   11. 11_split_task
   12. 13_autosize_container：根据文字大小内容调整甘特图
   13. 16_inline_task_colors：设置任务栏的颜色和字体颜色
   14. 18_subtasks_displaying：大任务观变小任务显示
   15. 20_message_types：右上角显示不同类型的提醒信息
   16. 21_open_split_task

 

1. Lightbox编辑任务栏信息中的信息
   1. 01_lightbox_customization
   2. 02_checkbox
   3. 02_progress_lightbox
   4. 02_radio
   5. 03_validation
   6. 04_custom_editor
   7. 05_template
   8. 06_custom_button：增加按钮
   9. 07_time：开始时间——结束时间
   10. 08_parent_selector：选择所属任务
   11. 09_years_selector_range：年份。year_range: [2010, 2025]
   12. 10_progress_slider：进度条
   13. 11_datepicker_for_lightbox
   14. 12_select
   15. 14_jquery_multiselect
2. Skins皮肤

06_dynamic_skin：动态皮肤.metail甘特图中日期有格子。

08_high_contrast_white：里面有各种弹出信息提示框。

            onclick="gantt.alert({text:'Some text'})"

1. Grid
   1. 01_builtin_sorting：左侧栏目排序 gantt.config.sort = true;
   2. 02_branch_ordering：分枝排序
   3. 03_filtering：过滤显示
   4. 04_custom_sorting
   5. 05_sort_api：根据优先度、根据名字排序
   6. 06_without_grid：无左侧
   7. 07_custom_buttons：添加、修改、删除按钮
   8. 08_drag_between_levels
   9. 09_wbs_column：项目目录结构
   10. 10_scrollable_grid：左右两侧都有滚动条
   11. 11_inline_edit_basic
   12. 12_inline_edit_key_nav
   13. 13_custom_mapping
   14. 14_branch_ordering_highlight
2. Api
   1. 01_dnd_events：onAfterTaskDrag，onBeforeTaskChanged，onBeforeTaskDrag
   2. 02_constraints：限制条件，禁止左右移动
   3. 03_validation：校验
   4. 04_limit_project：
   5. 05_limit_drag_dates：onTaskDrag,onAfterTaskDrag
   6. 06_export：导出功能
   7. 07_export_styles
   8. 08_export_other
   9. 11_project_structure：项目结构
   10. 12_fit_task_text：字体调整
   11. 13_highlight_drag_position
   12. 18_load_from_mpp
   13. 18_load_from_primaverap6
   14. 19_draggable_projects
   15. 21_load_from_excel：从EXCEL导入
   16. 22_data_processor
3. worktime任务时间调整
4. layout布局
   1. 01_rightside_columns：右侧栏目
   2. 02_resource_panel：下侧资源栏目
   3. 03_scale_at_bottom：日期在下面
   4. 04_rtl：布局左右调整
5. Resources分派资源
6. common

 

 

有参考价值网站：

https://www.jianshu.com/p/1fdec68a70ff

 

甘特图配置

https://blog.csdn.net/qq_24472595/article/details/81630117

 

基本配置

https://blog.csdn.net/max229max/article/details/105745837

 

vue+dhtmlx

https://blog.csdn.net/m0_37722484/article/details/102568708

 

vue+dhtmlx

https://blog.csdn.net/qq_33599109/article/details/84256685?utm_medium=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase&depth_1-utm_source=distribute.pc_relevant_t0.none-task-blog-BlogCommendFromMachineLearnPai2-1.nonecase

 

官方文档

https://docs.dhtmlx.com/gantt/api__refs__gantt.html

 

dthmlx在VUE中运用（英文）

https://dhtmlx.com/blog/use-dhtmlxgantt-vue-js-framework-demo/