Настройка колонки дерева

Если вы ищете методы, связанные с деревом, ознакомьтесь со статьей Задача Родитель/Дети.

Раскрытие/сворачивание ветки задачи

• Чтобы раскрыть ветку задачи, используйте метод 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");

Раскрытие/сворачивание нескольких веток

Если вы хотите раскрыть или свернуть несколько веток задач одновременно, самый быстрый способ — установить свойство .$open в true (чтобы раскрыть) или false (чтобы свернуть) для нужных задач. После этого просто перерисуйте диаграмму Ганта.

• Чтобы раскрыть все задачи:

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 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>";
};

Установка отступа для дочерних элементов в ветке

Вы можете настроить отступ для дочерних задач в ветке, используя шаблон grid_indent. Просто измените CSS-свойство width:

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>"
};

Установка шаблона узлов дерева

Чтобы задать шаблон для узлов дерева, используйте атрибут template в свойстве колонки. Возвращаемое значение функции template будет вставлено как внутренний 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+")";
};

Related sample:  Template for tree nodes

К началу