Работа со стилями Gantt

dhtmlxGantt предлагает множество опций для настройки его внешнего вида. Вы можете либо применить один из предопределенных скинов для изменения общего вида, либо настроить отдельные элементы, такие как задачи, связи, шкалы, гриды и т.д. Это руководство объединяет общие инструкции по стилям различных частей диаграммы Ганта, что облегчает навигацию по документации. Для получения более подробной информации об отдельных элементах, ознакомьтесь с соответствующими статьями.

Стилизация грида

Область грида можно стилизовать с помощью соответствующих настроек, предоставленных в Шаблоны грида.

Стилизация заголовков колонок грида

Вы можете использовать шаблон grid_header_class, чтобы применить пользовательские стили к заголовкам колонок грида. Например, вот как можно изменить цвет фона определенных заголовков:

<style>
    .updColor {
        background-color: #ffeb8a !important;
    }
</style>

gantt.templates.grid_header_class = function(columnName, column) {
  if (columnName === 'duration' || columnName === 'text')
    return "updColor";
};

Добавление пользовательских элементов в заголовки грида

Вы можете включить пользовательские элементы, такие как кнопки, иконки или поля ввода, в заголовок грида, установив их HTML в качестве значения свойства label в конфигурации gantt.config.columns:

gantt.config.columns = [
  {name:"add", label:"", width:50, align:"left" },
  {name:"text", label:"<div class='searchEl'>Task name <input id='search' type='text'"+       "placeholder='Search tasks...'></div>", width:250, tree:true},                            // другие колонки
];

Для реализации функциональности поиска:

var inputEl = document.getElementById('search');
 
inputEl.oninput = function() {
  gantt.refreshData();
}
 
function hasSubstr(parentId) {
  var task = gantt.getTask(parentId);
  if (task.text.toLowerCase().indexOf(inputEl.value.toLowerCase()) !== -1)
    return true;
 
  var child = gantt.getChildren(parentId);
  for (var i = 0; i < child.length; i++) {
    if (hasSubstr(child[i]))
      return true;
  }
  return false;
}
 
gantt.attachEvent("onBeforeTaskDisplay", function(id, task) {
  if (hasSubstr(id))
    return true;
 
    return false;
});

Добавление иконок и изображений в заголовки грида

Вы можете добавить изображение или иконку в заголовок, встроив его в внутренний HTML ячейки с использованием свойства label:

var textLabel = [
    "<div class='gantt-text-label'>"+
    "<img src='http://docs.dhtmlx.com/scheduler/assets/index/icon1.png'>"+
    "<span>Text</span>" +
    "</div>"
].join("");
 
gantt.config.columns = [
    {name: "text", label:textLabel, tree: true, width: '*', resize: true},
    {name: "start_date", align: "center", resize: true},
    {name: "duration", align: "center"},
    {name: "add", width: 44}
];

В качестве альтернативы можно использовать CSS для стилизации:

.gantt_grid_head_text  {
    background-image:url('http://docs.dhtmlx.com/scheduler/assets/index/icon1.png');
    background-repeat:no-repeat;  
}

Многострочный текст в заголовках грида

Посмотрите раздел Как отображать несколько строк в ячейке/заголовке грида для примеров.

Настройка цвета фона строк грида

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

<style>
  .updColor {
    background-color: #ffeb8a!important;  
  }
</style>

gantt.templates.grid_row_class = function(start, end, task) {
 if (task.id === 12)
    return "updColor";
};

Related sample: Coloring Grid Rows

Подсветка строк грида при наведении

Чтобы выделить строку грида при наведении, используйте следующие стили:

.gantt_grid_data .gantt_row.odd:hover, .gantt_grid_data .gantt_row:hover,
.gantt_grid_data .gantt_row.gantt_selected,
.gantt_grid_data .gantt_row.odd.gantt_selected,
.gantt_task_row.gantt_selected {
    background-color: cyan; 
}

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

Вы можете изменить внешний вид колонок грида, используя атрибут template в gantt.config.columns. Эта функция принимает объект элемента данных и возвращает итоговый шаблон данных.

Изменение цвета текста в строках грида

Например, вы можете установить разные цвета текста в зависимости от приоритета задачи:

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

Добавление пользовательских элементов в колонки грида

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

var colContent = function(task) {
    return ('<i class="fa gantt_button_grid gantt_grid_edit fa-pencil"'+
                'onclick="clickGridButton(' + task.id + ', \'edit\')"></i>' +
            '<i class="fa gantt_button_grid gantt_grid_add fa-plus"'+
                'onclick="clickGridButton(' + task.id + ', \'add\')"></i>' +
            '<i class="fa gantt_button_grid gantt_grid_delete fa-times"'+
                'onclick="clickGridButton(' + task.id + ', \'delete\')"></i>');
};
 
gantt.config.columns = [
    {name: "text", tree: true, width: '*', resize: true},
    {name: "start_date", align: "center", resize: true},
    {name: "duration", align: "center"},
    {name: "buttons", label: colHeader, width: 75, template: colContent}  ];

Усечение длинного текста в колонках грида

Начиная с версии 7.0, длинный текст в строках грида можно усекать с помощью многоточия, переопределив класс .gantt_tree_content CSS:

<style>
.gantt_tree_content {
    overflow: hidden;
    text-overflow: ellipsis;
}
</style>
 
gantt.init("gantt_here");

Многострочный текст в ячейках грида

Примеры доступны в разделе Как отображать несколько строк в ячейке/заголовке грида.

Стилизация шкалы

Шкала области временной шкалы может быть стилизована с использованием предоставленных шаблонов.

Стилизация строк шкалы

Вы можете стилизовать строку шкалы, используя шаблон scale_row_class. Например, чтобы установить цвет фона:

<style>
  .updColor {
    background-color: #ffeb8a !important;   
  }
</style>

gantt.templates.scale_row_class = function(scale) {           
    return "updColor";
}

Стилизация ячеек шкалы

Определенные ячейки в шкале можно стилизовать с помощью шаблона scale_cell_class. Например, вы можете покрасить выходные в временной шкале:

gantt.templates.scale_cell_class = function(date) {
    if (date.getDay() === 0 || date.getDay() === 6) {
        return "updColor";
    }
};

Для получения более подробной информации ознакомьтесь с статьями Настройка Масштаба и Выделение временных слотов.

Стилизация подсекций

Вы можете определить новый стиль для подсекций, используя атрибут css свойства scales. Например, чтобы покрасить выходные:

<style type="text/css">
    .weekend {
        background: #F0DFE5 !important;
    }
</style>

var daysStyle = function(date) {
    var dateToStr = gantt.date.date_to_str("%D");
    if (dateToStr(date) === "Sun" || dateToStr(date) === "Sat")  return "weekend";
 
    return "";
};
 
gantt.config.scales = [
    {unit:"day", format:"%D", css:daysStyle }
];

Related sample: Multiple scales

Стилизация задач

Вы можете настроить внешний вид задач, используя шаблоны временной шкалы.

Стилизация полос задач

Шаблон task_class позволяет настроить стили задач. Например, вы можете изменить внешний вид в зависимости от прогресса задачи:

gantt.templates.task_class = function(start, end, task) {
    if (task.progress > 0.5) {
        return "";
    } else {
        return "important";
    }
};

Стилизация текста на полосе задач

Шаблон task_text позволяет использовать встроенные стили для текста на полосе задач. Например:

gantt.templates.task_text = function(start, end, task) {
  if (task.id === 12)
    return "<span style='color:red'>"+task.text+"</span>";
 
  return task.text;
};

Добавление пользовательских элементов на полосы задач

Вы можете включить пользовательские элементы, такие как кнопки, на полосы задач:

gantt.templates.task_text = function(start, end, task) {  
  return task.text + " <button>Text</button>";    
};

Установка стиля с помощью свойств объекта задачи

Вы можете настроить внешний вид задач, добавив пользовательские свойства, такие как color, textColor и progressColor в конфигурацию объекта задачи. Вот пример:

var tasks = {
  data:[
     {id:1, text:"Project #1", start_date:"01-04-2013", duration:18, color:"red"},
     {id:2, text:"Task #1", start_date:"02-04-2013", 
        duration:8, color:"blue", parent:1}
   ]
};
gantt.init("gantt_here");
gantt.parse(tasks);
 
gantt.getTask(1).color = "red"

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

Настройка полос задач через Lightbox

Вы можете предопределить варианты цвета и включить их в конфигурацию lightbox, чтобы установить цвет фона или текста задачи:

var colors = [
    {key:"", label:"Default"},
    {key:"#4B0082",label:"Indigo"},
    {key:"#FFFFF0",label:"Ivory"},
    {key:"#F0E68C",label:"Khaki"}
    // more colors
];
 
gantt.config.lightbox.sections = [
    {name:"description", height:38, map_to:"text", type:"textarea", focus:true},
    {name:"priority", height:22, map_to:"color", type:"select", options:colors},
    {name:"textColor", height:22, map_to:"textColor", type:"select", options:colors},
    {name:"time", type:"duration", map_to:"auto"}
];

Стилизация строк области временной шкалы

API task_row_class позволяет изменить цвета строк в области временной шкалы, которые отображаются позади задач.

gantt.templates.task_row_class = function(start, end, task){
  if(task.id == 12)
    return "updColor";
};

Related sample: Custom tree formatting

Подсветка ячеек временной шкалы

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

<style>
    .weekend{
        background: #f4f7f4;
    }   
</style>

gantt.templates.timeline_cell_class = function(item,date){
    if(date.getDay()==0||date.getDay()==6){
        return "weekend"
    }
};

Related sample: Highlighting weekends

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

Отображение внешних элементов (базовые линии, дедлайны и т.д.)

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

Вы можете включить дополнительные элементы, такие как базовые линии или дедлайны, в диаграмму Ганта, создав новый слой с помощью метода addTaskLayer. Метод принимает функцию, которая генерирует DOM-элемент или возвращает false, чтобы скрыть его.

gantt.addTaskLayer(function myNewElement(task) {
    var el = document.createElement('div');
    // ваш код
    return el;
});

Примеры включают:

Базовые линии

Related sample: Display baselines
Дедлайны

Related sample: Displaying deadlines

Более подробно на эту тему описано в Пользовательские элементы в области временной шкалы.

Тултипы задач

Тултипы упрощают отображение деталей задачи в компактном формате.

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

Настройка текста тултипа

Чтобы настроить содержимое тултипа, используйте шаблон tooltip_text:

gantt.templates.tooltip_text = function(start,end,task){
    return "<b>Task:</b> "+task.text+"<br/><b>Duration:</b> " + task.duration;
};

Более подробная информация доступна в Тултипы для элементов Gantt.

Стилизация связей

Стилизация линий зависимости

Вы можете изменить внешний вид линий зависимости, используя шаблон link_class:

gantt.templates.link_class = function(link){
    return "";
};

Related sample: Link styles

Более подробная информация доступна в Окраска и стилизация ссылок.

Окрашивание связей через свойства объекта связи

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

var tasks = {
  data:[
     // конфигурация задач
  ],
  links:[
     {id:1, source:1, target:2, type:"1", color:"red"}, 
     {id:2, source:2, target:3, type:"0", color:"blue"}
  ]
};
 
gantt.init("gantt_here");
gantt.parse(tasks);
 
gantt.getLink(2).color = "blue";

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

Цвет связи при наведении

Вы можете изменить внешний вид связей зависимости при наведении, используя CSS:

.gantt_task_link:hover .gantt_line_wrapper div{
    box-shadow: 0 0 5px 0 yellowgreen;
    background: yellowgreen
}
 
.gantt_task_link:hover .gantt_link_arrow_left,
.gantt_task_link:hover .gantt_link_arrow_right{
    border-left-color: yellowgreen !important;
    border-right-color: yellowgreen !important;
}

Related sample: Link color on hover

Более подробная информация доступна в Окраска и стилизация ссылок.

Всплывающие окна для связей зависимости

Шаблон drag_link_class позволяет стилизовать всплывающее окно, которое появляется при перетаскивании линии зависимости. Вы можете настроить цвета фона и текста:

<style>
  .gantt_link_tooltip{color:red; background-color:yellow} 
</style>

gantt.templates.drag_link_class = function(from, from_start, to, to_start) {
    return "gantt_link_tooltip" ;
};

Более подробная информация доступна в Шаблоны для Связей Зависимости.

Редактирование значений связей через UI

Хотя встроенного интерфейса для редактирования связей зависимости нет, вы можете создать пользовательский UI, как описано в специальной статье.

Стилизация всплывающего окна Quick Info

Стиль всплывающего окна Quick Info можно настроить, используя quick_info_class. Например, вы можете применить пользовательские стили к всплывающим окнам определенных задач:

<style>
  .updColor{
    background-color:#ffeb8a!important;
  }
  .updColor .gantt_cal_qi_title{
    background-color:#ffeb8a!important;
  }
</style>

gantt.templates.quick_info_class = function(start, end, task){ 
  if(task.id == "12")
    return "updColor";
 
    return ""
};

К началу