dhtmlxgantt中文手册(html gt lt)

dhtmlx甘特图常用方法及基本配置集合甘特图基本配置

甘特图扩展功能

gantt.plugins({tooltip:true,Quick_info:true,//快速信息框//multiselect:true,//激活多任务选择});

甘特图任务悬浮框位置

甘特.config.tooltip_offset_x=10;甘特.config.tooltip_offset_y=30;

激活列表展开功能

gantt.config.open_split_tasks=true;

创建新事件通过点击“+”按钮打开灯箱

gantt.config.details_on_create=true;

甘特图图表宽度自适应

甘特.config.autofit=true;

用户可以通过拖拽调整行高

gantt.config.resize_rows=true;

界面初始化时展开图表树形结构

gantt.config.open_tree_initially=true;

图表项目栏可以任意拖拽

gantt.plugins({tooltip:true,Quick_info:true,//快速信息框});gantt.config.show_quick_info=true;

点击表头可排序

甘特.config.sort=true;

设置行高

甘特.config.row_height=44;

允许拖放

gantt.config.drag_project=true;

配置甘特图时间刻度高度

甘特.config.scale_height=40;

设置甘特图时间的起始结束时间，并允许显示超过时间刻度任务

gantt.config.start_date=newDate(`${newDate().getFullYear()-2},${newDate().getMonth()},${newDate().getDay()}`)gantt.config.end_date=newDate(`${newDate().getFullYear()+2},${newDate().getMonth()},${newDate().getDay()}`)gantt.config.show_tasks_outside_timescale=true

设置时间刻度相关属性

gantt.config.scales=[{unit:'年',step:1,format:'%Y'},{unit:'月',step:1,format:'%M'},];

配置任务内部显示元素

gantt.templates.task_text=function(start,end,task){return`spanstyle='margin-left:10px;color:white;'${task.text}/span`;};

配置Gantt内置弹出框元素(title内容)

gantt.templates.lightbox_header=function(start_date,end_date,task){return`b${task.text}/b`};

配置Gantt内置弹出框元素

【自定义元素的详细配置方法在另一篇文章中有讲解】

gantt.config.lightbox.sections=[{name:'描述',height:36,map_to:'文本',type:'textarea',focus:true,},{name:'时间',type:'持续时间',map_to:'自动'},{name:'参与者',height:36,map_to:'参与者',type:'ParticipantsPlan',focus:true,},{name:'BgColor',height:36,map_to:'颜色',type:'ParticipantsPlanColor',focus3第3360章

Gantt除了配置基本也可以配置指定元素弹出框

//配置任务灯箱gantt.config.lightbox.project_sections=[{name:'description',height:70,map_to:'text',type:'textarea',focus:true},{name:'type',type:'typeselect',map_to:'类型'},{name:'时间',type:'持续时间',readonly:true,map_to:'自动'}];//配置里程碑灯箱gantt.config.lightbox.milestone_sections=[{name:'description',height:70,map_to:'text',type:'textarea',focus:true},{name:'type',type:'typeselect',map_to:'类型'}，{name:'时间'，type:'持续时间'，single_date:true，map_to:'自动'}];

控制网格区域的样式

gantt.templates.grid_row_class=function(start,end,task){console.log('网格类',start,end,task);};

日期网格配置

gantt.templates.date_grid=function(date,task,column){console.log('日期网格',date,task,column)if(taskgantt.isUnscheduled(task)gantt.config.show_unscheduled){return甘特.模板.task_unscheduled_time(任务);}其他{返回gantt.templates.grid_date_format(日期);}}

配置网格缩进

gantt.templates.grid_indent=function(item){return'divclass='gantt_tree_indent'style='display:none'/div'}

网格内容配置

【自定义元素的详细配置方法在另一篇文章中有讲解】

gantt.config.columns=[{name:'文本',label:'任务名称',tree:true,width:'*'},{name:'开始日期',label:'开始时间',align:'中心'},{name:'持续时间',label:'持续时间',align:'中心'},{name:'添加',label:''}];

任务的日期

gantt.templates.task_date=function(date){returngantt.date.date_to_str(gantt.config.task_date)(date);};

鼠标悬浮工具提示文本配置

【该功能为扩展功能，需要单独配置】

甘特.插件({tooltip:true});

gantt.templates.tooltip_text=函数{return('btitle:/b'+task.text+'br/spanstart:/span'+gantt.templates.tooltip_date_format(start)+'br/spanend:/span'+gantt.templates.tooltip_date_format(end)+'br/span进度：/span'+Math.round(task.progress*100)+'%');};

Gantt内置方法

【返回true表示执行，默认即可，如果需要自定义返回fasle。内置方法不会被执行]

双击任务触发

gantt.attachEvent('onTaskDblClick',function(id,e){returntrue})

将任务添加到Gantt之前触发

gantt.attachEvent('onAfterTaskAdd',function(id,item){returntrue})

用户选择任务时触发

gantt.attachEvent('onTaskSelected',function(id){returntrue})

用户悬停Gantt时触发

gantt.attachEvent('onMouseMove',function(id,e){})

用户拖拽任务后释放鼠标之后，应用更改之前触发

gantt.attachEvent('onAfterTaskDrag',function(id,mode,e){returntrue})

点击“+”进行添加任务操作触发

gantt.attachEvent('onTaskCreated',function(task){returntrue})

用户打开Gantt内置弹出框之前触发

gantt.attachEvent('onBeforeLightbox',function(id){returntrue})

获取进度条进度

gantt.templates.progress_text=function(start,end,task){returnMath.round(task.progress*100)+'%';};

获取拉杆状态

gantt.templates.drag_link=function(from,from_start,to,to_start){console.log('拖动自',from,from_start,to,to_start);//返回文本；};

获取拖动链接类

gantt.templates.drag_link_class=function(from,from_start,to,to_start){console.log('from',from,from_start,to,to_start);};

以上是项目中用到的一些方法。详细信息请查看官方文档。

甘特图文档