dhtmlxGantt使用教程：如何配置树列

dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求，是最完善的甘特图图表库。它允许你创建动态甘特图，并以一个方便的图形化方式可视化项目进度。有了dhtmlxGantt，你可以显示活动之间的依赖关系，显示具有完成百分比阴影的当前任务状态以及组织活动到树结构。

下载dhtmlxGantt试用版

扩展/折叠任务分支

要打开任务分支，请使用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");
扩展/折叠多个分支
如果需要打开/关闭多个任务分支，最快的方法是以编程方式将所需的布尔值（true-打开，false-关闭）设置为所需任务的。$ open属性，然后重新绘制甘特图。

扩展所有任务：

gantt.eachTask(function(task){
task.$open = true;
});
gantt.render();
折叠所有任务：
gantt.eachTask(function(task){
task.$open = false;
});
gantt.render();

获取任务的子代

要获取分支任务的子代，请使用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"]
要查看更多与树相关的方法，请阅读“任务父/子”文章。

更改树的图标

父项

要为父项设置图标，请使用grid_folder模板：
gantt.templates.grid_folder = function(item) {
return "<div class='gantt_tree_icon ganttfolder" +
(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_treeicon gantt" +
(item.$open ? "close" : "open") + "'></div>";
};

设置分支中孩子的缩进

要在分支中设置子任务的缩进，请使用grid_indent模板（更改width CSS属性）：
gantt.templates.grid_indent=function(task){
return "<div style='width:20px; float:left; height:100%'></div>"
};

将复选框添加到树节点

要将复选框（或任何其他HTML内容）添加到树节点，请使用grid_blank模板：
gantt.templates.grid_blank=function(task){
return "<input id='ch1' type='checkbox' onClick='someFunc()'></input>"
};

设置树节点模板

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

请注意，如果你不使用dhtmlxConnector来与服务器端的整合，你必须消毒，以防止可能的XSS***你加载到甘特图中的数据（dhtmlxConnector自动完成它）
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+")";
};