Настройка столбца дерева

Чтобы узнать о доступных методах, связанных с деревом, пожалуйста, ознакомьтесь со статьей «Родитель/Дочерний элемент задачи».

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

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

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

Если вам нужно открыть/закрыть несколько ветвей задач, fastest способ — программно задать соответствующее логическое значение (true — открыть, false — закрыть) в свойство .$open нужных задач и затем перерисовать Gantt.

• раскрытие всех задач:

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 className='gantt_tree_icon gantt_folder_" +
    (item.$open ? "open" : "closed") + "'></div>";
};

Дочерние элементы

Чтобы задать иконку для дочерних элементов, используйте шаблон grid_file:

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

Знак открытия/закрытия

Чтобы задать иконку для знака открытия/закрытия, используйте шаблон grid_open:

gantt.templates.grid_open = function(item) {
    return "<div className='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 в свойстве columns.

Возвращаемое значение функции шаблона будет добавлено в качестве внутреннего HTML. Поэтому вы можете использовать любые HTML-структуры в этом атрибуте.

заметка

Примечание: если вы не используете dhtmlxConnector для интеграции с серверной стороной, вам нужно очистить данные, которые вы загружаете в диаграмму 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 className='important'>"+task.text+" ("+task.users+") </div>";
    return task.text+" ("+task.users+")";
};

Шаблон узлов дерева