项目管理软件dhtmlxGantt配置教程（三）：配置树列

这篇文章给大家讲解dhtmlxGantt树列配置设置。

1、展开/折叠任务分支

• 要打开任务分支，请使用open方法：

var data = {  tasks:[     {id:"p_1", text:"Project #1", start_date:"01-04-2020", duration:18},     {id:"t_1", text:"Task #1",    start_date:"02-04-2020", duration:8,     parent:"p_1"}]};gantt.open("p_1");

• 要关闭任务分支，请使用close方法：

var data = {  tasks:[     {id:"p_1", text:"Project #1", start_date:"01-04-2020", duration:18},     {id:"t_1", text:"Task #1",    start_date:"02-04-2020", duration:8,     parent:"p_1"}]};gantt.close("p_1");

2、展开/折叠多个分支

如果您需要打开/关闭多个任务分支，最快的方法是以编程方式将相应的布尔值（true – 打开，false – 关闭）设置为所需任务的.$open属性，然后重新绘制甘特图。

• 扩展所有任务：

gantt.eachTask(function(task){    task.$open = true;});gantt.render();

• 折叠所有任务：

gantt.eachTask(function(task){    task.$open = false;});gantt.render();

3、获取子级任务

要获取分支任务的子任务，请使用getChildren方法：

var data = {  tasks:[     {id:"p_1", text:"Project #1", start_date:"01-04-2020", duration:18},     {id:"t_1", text:"Task #1",    start_date:"02-04-2020", duration:8,     parent:"p_1"}]};gantt.getChildren("p_1");//->["t_1"]

4、更改树的图标

父项

要设置父项的图标，请使用grid_folder模板：

gantt.templates.grid_folder = function(item) {    return "<div class='gantt_tree_icon gantt_folder_" +    (item.$open "open" : "closed") + "'></div>";};

子项

要设置子项的图标，请使用grid_file模板：

gantt.templates.grid_file = function(item) {    return "<div class='gantt_tree_icon gantt_file'></div>";};

打开/关闭标志

要设置打开/关闭符号的图标，请使用grid_open模板：

gantt.templates.grid_open = function(item) {    return "<div class='gantt_tree_icon gantt_" +    (item.$open "close" : "open") + "'></div>";};

5、在分支中设置子项的缩进

要设置分支中子任务的缩进，请使用grid_indent模板（更改宽度CSS 属性）：

gantt.templates.grid_indent=function(task){    return "<div style='width:20px; float:left; height:100%'></div>"};

6、向树节点添加复选框

要将复选框（或任何其他 HTML 内容）添加到树节点，请使用grid_blank模板：

gantt.templates.grid_blank=function(task){    return "<input id='ch1' type='checkbox' onClick='someFunc()'></input>"};

7、设置树节点的模板

要为树节点设置模板，请使用columns属性中的模板属性。模板函数的返回值将作为内部 HTML 添加。这就是为什么您可以在属性中使用任何HTML结构。

gantt.config.columns=[    {name:"text",       label:"Task name",  tree:true, width:230, template:myFunc },    {name:"start_date", label:"Start time", align: "center" },    {name:"duration",   label:"Duration",   align: "center" }];gantt.init("gantt_here");function myFunc(task){    if(task.priority ==1)        return "<div class='important'>"+task.text+" ("+task.users+") </div>";    return task.text+" ("+task.users+")";};

dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表，可满足项目管理控件应用程序的所有需求，是最完善的甘特图图表库。了解更多DhtmlxGantt相关内容和资讯，欢迎在线咨询或者私信我获取正版试用版及报价。

甘特图控件交流群：764148812    欢迎进群交流讨论

更多正版甘特图软件下载、购买、授权咨询，请点这里！

标签：

来源：慧都