有关可用的树相关方法的详细信息,请参阅 任务的父子关系 文章。
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");
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");
当需要同时展开或折叠多个任务分支时,最快的方法是通过代码将相关任务的 .$open 属性赋值为布尔值(true 为展开,false 为折叠),然后刷新 gantt。
gantt.eachTask(function(task){
task.$open = true;
});
gantt.render();
gantt.eachTask(function(task){
task.$open = false;
});
gantt.render();
如需添加一个按钮以一次性折叠或展开所有任务,请参见 How to expand/collapse all tasks with a button 部分。
要获取某个分支任务的子节点,请使用 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 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>";
};
要调整分支中子任务的缩进,请通过修改 width CSS 属性,使用 grid_indent 模板:
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 属性。
template 函数的返回值将作为 inner HTML 添加,因此该属性可包含任意 HTML 结构。
请注意,如果你没有使用 dhtmlxConnector 进行 server-side integration,加载到 Gantt 图的数据需要进行安全处理,以避免潜在的 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+")";
};
Related sample: Template for tree nodes
Back to top