отображает дополнительный слой с пользовательскими элементами для задачи в области временной шкалы
| func | TaskLayerRender|TaskLayerConfig | функция рендеринга или объект конфигурации |
| string|DOMElement | элемент, который будет отображаться в слое |
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 - (object) - объект области видимости слоя
Обратите внимание, пользовательские слои будут сброшены после следующего вызова gantt.init
Умный рендеринг пытается отображать только те HTML элементы, которые в данный момент видны пользователю и не скрыты под горизонтальными и вертикальными полосами прокрутки.
Однако в случае пользовательских слоев Gantt не знает, где расположены пользовательские элементы, так как это полностью зависит от реализации функции рендеринга.
Как решение, умный рендеринг предполагает, что пользовательский элемент находится в той же строке, где и связанная с ним задача. Пользовательские элементы добавляются в разметку страницы, когда строки их связанных задач отображаются на экране. В этом режиме 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 возвращает объект с координатами задачи/ссылки и полученные координаты попадают в текущую область видимости, то будет вызвана функция 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){
...
// поместите в node внутренний html текущую видимую часть элемента
},
getRectangle: function(task, view){
....
return {left, top, height, width};
}
}
});
Метод update вызывается после того, как срабатывает событие onGanttScroll. Он предоставляет узел задачи (созданный изначально методом render) и текущую область видимости.
Начиная с версии 7.1.8, объект renderer метода addTaskLayer() позволяет получить видимый диапазон строк задач с помощью функции getVisibleRange:
gantt.addTaskLayer({
renderer: {
render: function(task, timeline, viewport){
...
return HTMLElement
},
getVisibleRange: function(){
...
return {
start: indexStart,
end: indexEnd
}
}
}
});
Если функция getVisibleRange возвращает false вместо объекта, Gantt предполагает, что используется весь диапазон задач, и дополнительный слой будет отрисован, даже если задача не видна на экране.
Объект renderer метода addTaskLayer() предоставляет колбэк 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 или временная шкала).
Колбэк может использоваться для модификации DOM элементов после их отрисовки в DOM или для инициализации сторонних виджетов внутри отрисованных элементов.