免费JS甘特图组件dhtmlxgantt (2)

默认为false,若设置为true则平均分布。
例如任务名称列内容较多,设置为true后则可能显示不全,设置为false后任务名称列会宽一些。

gantt.config.autofit = true; gantt.config.grid_width = 500; autoscroll 操作的任务或链接超出屏幕后自动滚动到该位置

默认为true。

autoscroll_speed 自动滚动的速度

默认为30ms。

gantt.config.autoscroll = true; gantt.config.autoscroll_speed = 50; gantt.init("gantt_here"); autosize 自动调整甘特图大小以适应屏幕

默认为false,即甘特图可超出屏幕大小,超出后有滚动条可拖动。
如果设置为xy,则竖直内容不足屏幕,则面板将缩小至其高度,水平内容超过屏幕,则截断无滚动条。

可赋值:"y" ( or true),"x", "xy"

gantt.config.autosize = "xy"; gantt.init("gantt_here"); autosize_min_width 水平自动缩放时的最小宽度

默认值0.

gantt.config.autosize = "xy"; gantt.config.autosize_min_width = 800; gantt.init("gantt_here"); bar_height 时间线中的任务条的高度

默认值full。

gantt.config.bar_height = 30; gantt.init("gantt_here"); buttons_left 任务详情弹窗中左下角的按钮定义

默认 ["gantt_save_btn", "gantt_cancel_btn"],保存和取消

可自定义按钮,并定义该按钮的事件响应函数。 <style> .complete_button{ margin-top: 2px; background-image:url("common/v_complete.png"); width: 20px; } </style> <script> gantt.locale.labels["complete_button"] = "Complete"; gantt.attachEvent("onGanttReady", function(){ gantt.config.buttons_left = ["gantt_save_btn","gantt_cancel_btn", "complete_button"]; }); gantt.init("gantt_here"); gantt.attachEvent("onLightboxButton", function(button_id, node, e){ if(button_id == "complete_button"){ var id = gantt.getState().lightbox; gantt.getTask(id).progress = 1; gantt.updateTask(id); gantt.hideLightbox(); } }); </script> 也可修改默认的按钮 gantt.locale.labels.icon_save = "New Label"; gantt.locale.labels.icon_cancel = "New Label"; gantt.init("gantt_here"); buttons_right 弹窗的右下角按钮

默认值:["gantt_delete_btn"]; 删除

calendar_property 任务绑定的日历 cascade_delete 级联删除任务和关联

默认值为true

gantt.config.cascade_delete = false; gantt.init("gantt_here"); click_drag 启用拖拽功能 gantt.config.click_drag = { callback: function( startPosition, endPosition, startDate, endDate, tasksBetween, rowsBetween ){ var parentId = gantt.config.root_id; if(rowsBetween.length){ parentId = rowsBetween[0].id; } gantt.createTask({ text: "新任务", start_date: gantt.roundDate(startDate), end_date: gantt.roundDate(endDate) }, parentId); }, singleRow: true }; columns 配置任务表格的列

默认列定义为:

// default columns definition gantt.config.columns=[ {name:"text", label:"任务名称", tree:true, width:'*' }, {name:"start_date", label:"开始时间", align: "center" }, {name:"duration", label:"工期", align: "center" }, {name:"add", label:"" } ]; gantt.init("gantt_here"); 插件

使用插件可扩展甘特图的基本功能。
使用时,先引入插件,然后按照插件的使用配置甘特图(config属性配置)。
https://docs.dhtmlx.com/gantt/api__gantt_plugins.html

gantt.plugins({ quick_info: true, keyboard_navigation: true, undo: true });

click_drag: true 通过拖拽来创建和选择任务

auto_scheduling: true 自动排程,根据任务的链接自动排定时间

critical_path: true 最短路径,Pro版支持

drag_timeline: true 拖拽时间线

overlay: true 在甘特图上增加一个用户自定义的层来显示信息

fullscreen: true 全屏

grouping: true 按任务的任何属性来分组任务

keyboard_navigation: true 使用键盘快捷键来导航,创建任务、选中甘特图等.
gantt.config.keyboard_navigation_cells = true;

multiselect: true 允许选择多个任务

quick_info: true 点击任务或时间线中的任务条后,显示一个任务详细并带有删除和编辑按钮的浮窗

tooltip: true 提示

undo: true 取消、重做

marker: true 竖直标记线,高亮当前日期或特定日期

常见模板API date_grid 任务表格的开始时间列的内容 gantt.templates.date_grid = function(date, task, column){ if(task && gantt.isUnscheduled(task) && gantt.config.show_unscheduled){ return gantt.templates.task_unscheduled_time(task); }else{ return gantt.templates.grid_date_format(date); } } drag_link 用户创建一个新任务链接时显示的tooltip提示文本 gantt.templates.drag_link = function(from, from_start, to, to_start) { from = gantt.getTask(from); var text = "From:<b> " +from.text + "</b> " +(from_start?"Start":"End")+"<br/>"; if(to){ to = gantt.getTask(to); text += "To:<b> " + to.text + "</b> "+ (to_start?"Start":"End")+"<br/>"; } return text; }; drag_link_class 当用户拖拽任务链接时应用在弹窗的css样式表 gantt.templates.drag_link_class = function(from, from_start, to, to_start) { var add = ""; if(from && to){ var allowed = gantt.isLinkAllowed(from, to, from_start, to_start); add = " " + (allowed ? "gantt_link_allow" : "gantt_link_deny"); } return "gantt_link_tooltip" + add; }; format_date 转换日期对象为日期字符串,以发送给服务器端 var dateToStr = gantt.date.date_to_str("%Y-%m-%d %H:%i"); gantt.templates.format_date = function(date){ return dateToStr (date); }; grid_blank 在树形列中子项的自定义内容 gantt.templates.grid_blank = function(item) { return "<div></div>"; }; grid_file 设置树形列的子项图标 gantt.templates.grid_file = function(item) { return "<div></div>"; }; grid_folder 设置树形列的父项图标 link_class 任务链接线的样式 gantt.templates.link_class = function(link){ return ""; }; progress_text 时间线上任务条的完成部分的文本

默认不显示。默认尽在中部显示任务名称。

gantt.templates.progress_text=function(start, end, task){return "";};

内容版权声明:除非注明,否则皆为本站原创文章。

转载注明出处:https://www.heiqu.com/zysdfy.html