отображает дополнительный слой с пользовательскими элементами для задач в области timeline
| func | TaskLayerRender | TaskLayerConfig | функция рендеринга или объект конфигурации |
| string | DOM-элемент, который будет отображён в слое |
Available only in PRO Edition
gantt.init("gantt_here");
gantt.addTaskLayer(function draw_deadline(task) {
if (task.deadline) {
var el = document.createElement('div');
el.className = 'deadline';
var sizes = gantt.getTaskPosition(task, task.deadline);
el.style.left = sizes.left + 'px';
el.style.top = sizes.top + 'px';
el.setAttribute('title', gantt.templates.task_date(task.deadline));
return el;
}
return false;
});
Эта функция доступна только в PRO-редакции.
Аргумент может быть одного из следующих типов:
taskLayerRender (task, timeline, config, viewport): HTMLElement|boolean|void - функция, которая получает объект задачи и возвращает DOM-элемент для отображения в слое.
taskLayerConfig - (object) - объект конфигурации дополнительного слоя задач, который включает:
ReactDOM.render)
Viewport слоя включает следующие свойства:
viewport - (object) - объект viewport для слоя
Учтите, что пользовательские слои будут очищены после следующего вызова gantt.init
Умный рендеринг направлен на отображение только тех HTML-элементов, которые видны пользователю, избегая отрисовки скрытых за скроллбаром.
Однако с пользовательскими слоями Gantt не знает, где именно размещены пользовательские элементы, так как логика их рендеринга полностью контролируется пользователем.
Для решения этой задачи умный рендеринг предполагает, что пользовательский элемент расположен в той же строке, что и связанная с ним задача. Пользовательские элементы добавляются в DOM только когда строки их задач видимы на экране. При этом Gantt игнорирует положение горизонтального скроллбара, поэтому элемент может присутствовать в разметке, но быть невидимым на странице, если он прокручен по горизонтали.
Это обычно работает хорошо, но если у вас много слоёв, вы можете дополнительно оптимизировать рендеринг, предоставив Gantt точные координаты пользовательских элементов.
Для этого используйте параметр object метода addTaskLayer() и передайте объект renderer с такими методами:
gantt.addTaskLayer({
renderer: {
render: function(task, timeline, viewport){
...
return HTMLElement
},
getRectangle: function(task, view){
....
return {left, top, height, width};
}
}
});
Процесс рендеринга пользовательских элементов работает так:
1. При изменении положения горизонтального скролла умный рендеринг получает координаты текущей видимой области.
2. dhtmlxGantt вызывает getRectangle для каждой задачи/связи, чтобы получить точные координаты пользовательского элемента.
3. Если getRectangle возвращает null, функция render пропускается, и пользовательский элемент не отображается.
4. Если getRectangle возвращает координаты, пересекающиеся с текущим viewport, вызывается функция render для отображения пользовательского элемента.
gantt.addTaskLayer({
renderer: {
render: function draw_planned(task) {
if (task.planned_start && task.planned_end) {
var sizes = gantt.getTaskPosition(task,task.planned_start,task.planned_end);
var el = document.createElement('div');
el.className = 'baseline';
el.style.left = sizes.left + 'px';
el.style.width = sizes.width + 'px';
el.style.top = sizes.top + gantt.config.task_height + 13 + 'px';
return el;
}
return false;
},
// определение getRectangle подключает слой к умному рендерингу
getRectangle: function(task, view){
return gantt.getTaskPosition(task, task.planned_start, task.planned_end);
}
}
});
Объект renderer в addTaskLayer() также поддерживает обновление разметки узла, чтобы показывать только видимую часть пользовательского элемента через метод update:
gantt.addTaskLayer({
renderer: {
render: function(task, timeline, viewport){
...
return HTMLElement
},
update: function(task, node, timeline, viewport){
...
// обновить внутренний HTML узла, чтобы показывать только видимые части
},
getRectangle: function(task, view){
....
return {left, top, height, width};
}
}
});
Метод update вызывается после события onGanttScroll, предоставляя узел задачи, созданный функцией render, и текущий viewport.
Начиная с версии v7.1.8 объект renderer поддерживает функцию getVisibleRange для указания видимого диапазона строк задач:
gantt.addTaskLayer({
renderer: {
render: function(task, timeline, viewport){
...
return HTMLElement
},
getVisibleRange: function(){
...
return {
start: indexStart,
end: indexEnd
}
}
}
});
Если getVisibleRange возвращает false вместо объекта, Gantt считает, что все задачи видимы и рендерит дополнительные слои для всех.
Объект renderer также включает коллбек onrender:
gantt.addTaskLayer({
renderer: {
render: function(task, timeline, viewport){
...
return HTMLElement
},
onrender: function(item, node, view){
console.log("render", item, node)
}
}
});
Функция onrender вызывается каждый раз, когда элемент данных отрисовывается в DOM. Она предоставляет доступ к элементу данных, результату DOM-элементу и виду, который вызвал рендер (grid или timeline).
Этот коллбек можно использовать для модификации DOM-элементов после рендеринга или для инициализации сторонних виджетов внутри отрисованных элементов.