Примеры Форум Поддержка
Документация
СтартРуководстваНастройка грида

Указание столбцов

Вы можете настроить столбцы грида, используя параметр колонки.

// определение столбцов по умолчанию
gantt.config.columns = [
    {name:"text",       label:"Task name",  width:"*", tree:true },
    {name:"start_date", label:"Start time", align:"center" },
    {name:"duration",   label:"Duration",   align:"center" },
    {name:"add",        label:"",           width:44 }
];

Посмотрите это видео-руководство для подробного ознакомления с настройкой столбцов грида:

Обзор

Грид по умолчанию содержит 4 столбца:

  1. Название задачи
  2. Дата начала
  3. Продолжительность
  4. Столбец '+', который является специальным столбцом с атрибутом <code>name="add"</code>. Этот столбец отображает кнопку '+' для добавления дочерних задач.

Вам не нужно явно задавать параметр колонки для использования столбцов по умолчанию.

Параметр колонки представляет собой массив, где каждый объект определяет один столбец. Например, чтобы добавить 5 столбцов в грид — 'Задача', 'Дата начала', 'Дата окончания', 'Ответственный', 'Прогресс' — вы можете определить их следующим образом:

gantt.config.columns =  [
    {name:"text",       label:"Task name",  tree:true, width:"*" },
    {name:"holder",     label:"Holder",     align:"center" },
    {name:"start_date", label:"Start time", align:"center" },
    {name:"end_date",   label:"End date",   align:"center" },
    {name:"progress",   label:"Progress",   align:"center" },
];
 
gantt.init("gantt_here");

Здесь 'text', 'holder', 'start_date', 'end_date' и 'progress' являются именами свойств данных.

Отображение даты окончания задач

Если ваши данные задачи содержат дату начала и окончания в таких форматах, как "%Y-%m-%d" или "%d-%m-%Y" (без указания времени), форматирование по умолчанию может не дать ожидаемых результатов. Для получения дополнительной информации о работе с датами окончания обратитесь к статье Отображение даты окончания задачи и включение дат окончания.

Скрытие кнопки "Добавить" для определенных задач

Если вы хотите запретить пользователям добавлять подзадачи к определенным задачам, вы можете скрыть кнопку 'Add' с помощью CSS.

  1. Присвойте класс CSS для каждой строки задачи, используя шаблон grid_row_class:
gantt.templates.grid_row_class = function( start, end, task ){
    if ( task.$level > 1 ){
        return "nested_task"
    }
    return "";
};
  1. Используйте CSS, чтобы скрыть кнопку 'Add' для строк с назначенным классом:
.nested_task .gantt_add{
    display: none !important;
}

Related sample:  Predefined Project Structure

Ширина

Чтобы контролировать ширину столбца, задайте атрибут width в объекте столбца:

gantt.config.columns =  [
    {name:"text",       label:"Task name",  width:"*", tree:true },
    {name:"start_date", label:"Start time", width:150 },
    {name:"duration",   label:"Duration",   width:120 }
];
gantt.init("gantt_here");

Использование значения '*' позволяет столбцу занимать все оставшееся пространство.

Имейте в виду, что ширина столбца грида зависит от двух атрибутов: width столбца и настройки grid_width. Если их суммарная ширина не совпадает с шириной грида, Gantt корректирует один из них.

Минимальная/Максимальная ширина столбца

Вы можете ограничить изменение размера столбца с помощью свойств min_width и max_width:

gantt.config.columns =  [
 {name:"text", label:"Task name", width:"*", min_width: 150, max_width:300, tree:true},
 {name:"start_date", label:"Start time", width:150 },
 {name:"duration",   label:"Duration",   width:120 }
];
gantt.init("gantt_here");

Свойство min_width столбца имеет приоритет над свойством min_grid_column_width грида.

Минимальная ширина грида при изменении размера

Минимальная ширина грида при изменении размера контролируется параметром gantt.config.min_grid_column_width. Это определяет минимальную ширину, до которой каждый столбец может быть уменьшен при изменении размера грида:

gantt.config.columns =  [
    {name:"text",       label:"Task name",  width:150, tree:true },
    {name:"start_date", label:"Start time", width:100 },
    {name:"duration",   label:"Duration",   width:50 },
   // {name:"add",        label:"",           width:44 }
];
gantt.config.min_grid_column_width = 30; // грид может быть уменьшен до 90 пикселей
 
gantt.init("gantt_here");

Related sample:  Минимальная ширина грида

Обратите внимание, что минимальная ширина грида при изменении размера также зависит от минимальной ширины столбца 'add' по умолчанию (44 по умолчанию). Чтобы разрешить изменение размера ниже 44 пикселей, установите пользовательское значение min_width для столбца 'add':

{name: "add", label: "", min_width: 1 }

Маппинг данных и шаблоны

По умолчанию dhtmlxGantt заполняет столбцы грида, используя свойства данных, которые совпадают с именами столбцов. Например, если name столбца установлен в "holder", Gantt будет искать это свойство во входящих JSON данных и загружать его значение в столбец.

Использование шаблонов для данных столбцов

Если вы хотите, чтобы столбец отображал комбинацию нескольких свойств данных, вы можете определить пользовательский шаблон с атрибутом template. Например, вы можете создать столбец с именем "staff" и использовать шаблон для объединения значений "holder" и "progress":

gantt.config.columns =  [
    {name:"text",       label:"Task name",  tree:true, width:"*" },
    {name:"start_date", label:"Start time", align: "center" },
    {name:"staff",      label:"Holder(s)", template:function(obj){
                                return obj.holder+"("+obj.progress+")"} }
];
 
gantt.init("gantt_here");

Выравнивание текста

Вы можете выровнять текст по горизонтали внутри столбца, используя атрибут align в объекте столбца:

gantt.config.columns =  [
    {name:"text",       label:"Task name",  tree:true, align:"center"},
    {name:"start_date", label:"Start time", align: "center" },
    {name:"duration",   label:"Duration",   align: "center" }
];
 
gantt.init("gantt_here");

Код WBS

Чтобы отобразить номера контуров (код WBS) задач, используйте метод getWBSCode в шаблоне столбца:

gantt.config.columns = [
    {name:"wbs", label:"WBS", width:40, template:gantt.getWBSCode },     {name:"text", label:"Task name", tree:true, width:170 },
    {name:"start_date", align:"center", width: 90},
    {name:"duration", align:"center", width: 60},
    {name:"add", width:40}
];

Related sample:  Show Task WBS Codes (Outline Numbers)

Получение кода WBS задачи

Метод getWBSCode извлекает код WBS для конкретной задачи. Например, если вы загрузите следующие задачи в Gantt:

gantt.parse({
 "tasks":[
    {"id":1, "text":"Project #1", "start_date":"28-03-2020", 
        "duration":"11", "parent":"0", "open":true},
    {"id":2, "text":"Task #1", "start_date":"01-04-2020", 
        "duration":"18", "parent":"1"},
    {"id":3, "text":"Task #2", "start_date":"02-04-2020", 
        "duration":"8", "parent":"1"}
 ],
 "links":[]
});

Вы можете получить код WBS для задачи с id=3, передав объект задачи в метод. Он вернет код WBS в виде строки:

var wbs_code = gantt.getWBSCode(gantt.getTask(3)); // -> возвращает "1.2"

Получение задачи по коду WBS

Вы можете получить объект задачи, указав его код WBS в методе gantt.getTaskByWBSCode:

var task = gantt.getTaskByWBSCode("1.2");
// => {id:"t1", text:"Task #1, unscheduled: true, duration: 1, …}

Временные ограничения для задач

Эта функциональность доступна только в PRO-версии

Можно включить специфические столбцы грида для управления типом временного ограничения для задачи и, при необходимости, установить дату ограничения. Эти столбцы идентифицируются именами "constraint_type" и "constraint_date".

gantt.config.columns = [
    {
      name: "constraint_type", align: "center", width: 100, 
      template: function(task) { /* логика шаблона */ }, 
      resize: true, editor: constraintTypeEditor
    },
    {
      name: "constraint_date", align: "center", width: 120, 
      template: function(task) { /* логика шаблона */ }, 
      resize: true, editor: constraintDateEditor
    },
    { name: "add", width: 44 }
];

Эти столбцы связаны с встроенными редакторами, которые позволяют пользователям выбирать тип ограничения для задачи и редактировать его дату прямо в гриде.

var constraintTypeEditor = {
    type: "select", map_to: "constraint_type", options: [
        { key: "asap", label: gantt.locale.labels.asap },
        { key: "alap", label: gantt.locale.labels.alap },
        { key: "snet", label: gantt.locale.labels.snet },
        { key: "snlt", label: gantt.locale.labels.snlt },
        { key: "fnet", label: gantt.locale.labels.fnet },
        { key: "fnlt", label: gantt.locale.labels.fnlt },
        { key: "mso", label: gantt.locale.labels.mso },
        { key: "mfo", label: gantt.locale.labels.mfo }
    ]
};
 
var constraintDateEditor = {
    type: "date", 
    map_to: "constraint_date", 
    min: new Date(2019, 0, 1), 
    max: new Date(2020, 0, 1)
};

Related sample:  Auto-Schedule From Project Start & Constraints

Изменение размера

Функциональность, описанная ниже, доступна только в PRO-версии

Чтобы включить изменение размера столбца путем перетаскивания его правой границы, используйте атрибут resize в конфигурации столбца:

gantt.config.columns = [
  { name: "text", tree: true, width: "*", resize: true }, // 'resize' включен
  { name: "start_date", resize: true, min_width: 100 },  // 'resize' с 'min_width'
  { name: "duration", align: "center" },                // без изменения размера
  { name: "add", width: "44" }
];

Related sample:  Grid columns resize events

Чтобы сделать весь грид изменяемым по размеру путем перетаскивания его границы, настройте параметр gantt.config.layout с объектами грида и разделителя:

gantt.config.layout = {
    css: "gantt_container",
    rows: [
      {
        cols: [
          { view: "grid", id: "grid", scrollX: "scrollHor", scrollY: "scrollVer" },
          { resizer: true, width: 1 },
          { view: "timeline", id: "timeline", scrollX: "scrollHor", scrollY: "scrollVer" },
          { view: "scrollbar", scroll: "y", id: "scrollVer" }
        ]
      },
      { view: "scrollbar", scroll: "x", id: "scrollHor", height: 20 }
    ]
};
 
gantt.init("gantt_here");

Чтобы сохранить размер грида при изменении размеров столбцов, установите параметр gantt.config.keep_grid_width в значение true:

gantt.config.columns = [
    { name: "text", tree: true, width: "*", resize: true },
    { name: "start_date", align: "center" },
    { name: "duration", align: "center", width: 70 },
    { name: "add", width: 44 }
];
 
gantt.config.keep_grid_width = true; gantt.init("gantt_here");

Related sample:  Grid columns resize events

События

dhtmlxGantt предоставляет шесть событий для обработки действий изменения размеров:

  • gantt.onColumnResizeStart - срабатывает перед началом изменения размера столбца
  • gantt.onColumnResize - срабатывает во время изменения размера столбца
  • gantt.onColumnResizeEnd - срабатывает после окончания изменения размера столбца
  • gantt.onGridResizeStart - срабатывает перед началом изменения размера грида
  • gantt.onGridResize - срабатывает во время изменения размера грида
  • gantt.onGridResizeEnd - срабатывает после окончания изменения размера грида

Видимость

Чтобы контролировать видимость столбца, используйте атрибут hide в конфигурации столбца. Видимость также может быть динамически переключена путем изменения свойства hide и обновления диаграммы.

Эта функциональность доступна только в PRO-версии

Переключение между базовым и детализированным видом

gantt.config.columns = [
    { name: "text", label: "Task name", width: "*", tree: true, resize: true },
    { name: "start_date", label: "Start time" },
    { name: "duration", label: "Duration", width: 60, hide: true },     { name: "planned_start", label: "Planned start", hide: true },     { name: "planned_end", label: "Planned end", width: 80, hide: true },     { name: "add", label: "", width: 36 }
];
 
var show_details = false;
function toggleView() {
    show_details = !show_details;
    gantt.getGridColumn("duration").hide = !show_details;
    gantt.getGridColumn("planned_start").hide = !show_details;
    gantt.getGridColumn("planned_end").hide = !show_details;
 
    if (show_details) {
        gantt.config.grid_width = 600;
    } else {
        gantt.config.grid_width = 300;
    }
    gantt.render();
}
gantt.init("gantt_here");

Related sample:  Hiding grid columns

Доступно видео-руководство, демонстрирующее управление видимостью столбцов:

Изменение ячеек после рендеринга

Иногда может потребоваться отрегулировать внешний вид или поведение ячейки грида после рендеринга. Начиная с версии 7.1, атрибут onrender в конфигурации столбца может помочь в этом. Например:

gantt.config.columns = [
    { name: "text", tree: true, width: "*", resize: true },
    { name: "start_date", align: "center", resize: true },
    { name: "duration", align: "center", onrender: function(task, node) {
        node.setAttribute("title", task.text);
    }},
    { name: "add", width: 44 }
];

В качестве альтернативы вы можете использовать колбэк onrender для интеграции внешних компонентов, таких как React, в ячейки грида:

gantt.config.columns = [
    { name: "text", label: "Task name", tree: true, width: "*" },
    { name: "start_date", label: "Start time", align: "center" },
    { name: "duration", label: "Duration", align: "center" },
    { 
        name: "external", label: "Element 1", align: "center",
        onrender: (item, node) => {
            return <DemoButton
                    text="Edit 1"
                    onClick={() => alert("Element as React Component")}
                    />
        }
    }
];

Для этого необходимо определить конфигурацию gantt.config.external_render:

import ReactDOM from 'react-dom';
import React from 'react';
 
gantt.config.external_render = { 
    isElement: (element) => React.isValidElement(element),
    renderElement: (element, container) => ReactDOM.render(element, container)
};

Процесс включает:

  • Проверку, является ли возвращаемый объект из onrender допустимым с помощью isElement.
  • Если допустим, рендеринг объекта в DOM с использованием renderElement.

Горизонтальная полоса прокрутки

Чтобы сделать грид прокручиваемым, используйте свойство scrollable в конфигурации макета. Узнайте больше о привязке представлений макета к полосе прокрутки.

Добавление горизонтальной полосы прокрутки к гриду позволяет автоматически регулировать ширину столбцов при изменении размера грида. Узнайте больше об активации этой функциональности.

gantt.config.layout = {
  css: "gantt_container",
  cols: [
   {
     width: 400,
     minWidth: 200,
     maxWidth: 600,
     rows: [
      { view: "grid", scrollX: "gridScroll", scrollable: true, scrollY: "scrollVer" },       { view: "scrollbar", id: "gridScroll" }      ]
   },
   { resizer: true, width: 1 },
   {
     rows: [
      { view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer" },
      { view: "scrollbar", id: "scrollHor" }
     ]
   },
   { view: "scrollbar", id: "scrollVer" }
  ]
};

Чтобы синхронизировать видимость между полосами прокрутки, назначенными одной группе, используйте свойство group:

gantt.config.layout = {
  css: "gantt_container",
  cols: [
    {
      width: 400,
      minWidth: 200,
      maxWidth: 600,
      rows: [
        { view: "grid", scrollX: "gridScroll", scrollable: true, scrollY: "scrollVer" },
        { view: "scrollbar", id: "gridScroll", group: "horizontal" }       ]
    },
    { resizer: true, width: 1 },
    {
      rows: [
        { view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer" },
        { view: "scrollbar", id: "scrollHor", group: "horizontal" }       ]
    },
    { view: "scrollbar", id: "scrollVer" }
  ]
};

Если любая полоса прокрутки в группе видима, все полосы прокрутки в группе также будут отображаться.

Related sample:  Horizontal scroll inside Grid

Стилизация

Для подробной информации о стилизации ячеек грида обратитесь к руководству по стилизации.

К началу