Эта функция доступна только в PRO-версии.
Существует три предопределенных типа задач, которые вы можете отображать на диаграмме Ганта (вы также можете создать пользовательский тип):
Чтобы определить тип задачи, вы можете использовать свойство type в элементе данных (значения хранятся в объекте types):
Указание типа задачи в наборе данных
var data = {
task:[
{id:1, text:"Project #1", type:"project", open:true}, {id:2, text:"Task #1", start_date:"12-04-2020", duration:3, parent:1},
{id:3, text:"Alpha release", type:"milestone", parent:1, start_date:"14-04-2020"}, {id:4, text:"Task #2", start_date:"17-04-2020", duration:3, parent:1}],
links:[]
};
Related sample: Projects and milestones
По умолчанию, dhtmlxGantt создает обычные задачи (задачи с type="task").
Указание обычных задач
var data = {
tasks:[{id:2, text:"Task #1", start_date:"12-04-2020", duration:3}], links:[]
};
//или
var data = {
tasks:[{id:2, text:"Task #1", start_date:"12-04-2020", duration:3, type:"task"}], links:[]
};
Related sample: Projects and milestones
Вот некоторые характеристики задач с type="task":
Проектная задача автоматически начинается, когда начинается самая ранняя дочерняя задача, и заканчивается, когда заканчивается самая поздняя дочерняя задача.
Ключевое отличие проектных и обычных задач в том, что продолжительность проектной задачи основана на ее дочерних задачах и корректируется соответственно.
Указание проектных задач
var data = {
tasks:[
{id:1, text:"Project #1", type:"project", open:true}, {id:2, text:"Task #1", start_date:"12-04-2020", duration:3, parent:1},
{id:3, text:"Alpha release", type:"milestone", parent:1,
start_date:"14-04-2020"}],
links:[]
};
Related sample: Projects and milestones
Вот что вам следует знать о задачах с type="project":
Чтобы включить добавление проектных задач, обратитесь к статье Вехи. Разрешение вех позволяет пользователям также добавлять проектные задачи.
Контрольные точки - это задачи с нулевой продолжительностью, используемые для выделения ключевых дат в проекте (подробнее).
Указание контрольных точек
var data = {
tasks:[
{id:1, text:"Project #1", type:"project", open:true},
{id:2, text:"Task #1", start_date:"12-04-2020", duration:3, parent:1},
{id:3, text:"Alpha release", type:"milestone", parent:1, start_date:"14-04-2020"}], links:[]
};
Related sample: Projects and milestones
Контрольные точки с type="milestone" имеют следующие характеристики:
Чтобы включить добавление контрольных точек, обратитесь к статье Вехи.
Каждый тип задачи имеет уникальные характеристики, поэтому возможно настроить индивидуальную форму деталей (lightbox) для каждого типа. Эти конфигурации хранятся в объекте lightbox.
Доступные конфигурации:
Настройки по умолчанию выглядят следующим образом:
gantt.config.lightbox.sections = [
{name: "description", height: 70, map_to: "text", type: "textarea", focus: true},
{name: "time", type: "duration", map_to: "auto"}
];
gantt.config.lightbox.project_sections= [
{name: "description", height: 70, map_to: "text", type: "textarea", focus: true},
{name: "type", type: "typeselect", map_to: "type"},
{name: "time", type: "duration", readonly: true, map_to: "auto"}
];
gantt.config.lightbox.milestone_sections= [
{name: "description", height: 70, map_to: "text", type: "textarea", focus: true},
{name: "type", type: "typeselect", map_to: "type"},
{name: "time", type: "duration", single_date: true, map_to: "auto"}
];
Когда тип задачи изменяется в lightbox, соответствующая конфигурация применяется динамически.
Вы также можете добавить пользовательский тип и определить для него соответствующую структуру lightbox.
Для получения дополнительной информации о конфигурации lightbox обратитесь к главе Настройка формы редактирования.
Все типы задач определены в объекте types. Чтобы добавить новый пользовательский тип задачи, выполните следующие шаги:
Например, если вы хотите создать новый тип задачи под названием meeting, который является обычной задачей с уникальным цветом и пользовательскими элементами ввода lightbox:
Чтобы определить тип meeting и настроить его lightbox, выполните следующие шаги:
gantt.config.types.meeting = "type_id";
Здесь "meeting" — это программное имя типа, используемое для удобочитаемости. "type_id" — это уникальный идентификатор типа, хранящийся в базе данных.
gantt.locale.labels.type_meeting = "Meeting";
gantt.config.lightbox.meeting_sections = [
{name:"title", height:20, map_to:"text", type:"textarea", focus:true},
{name:"details", height:70, map_to: "details", type: "textarea"},
{name:"type", type:"typeselect", map_to:"type"},
{name:"time", height:72, type:"time", map_to:"auto"}
];
gantt.locale.labels.section_title = "Subject";
gantt.locale.labels.section_details = "Details";
.meeting_task{
border:2px solid #BFC518;
color:#6ba8e3;
background: #F2F67E;
}
.meeting_task .gantt_task_progress{
background:#D9DF29;
}
gantt.templates.task_class = function(start, end, task){
if(task.type == gantt.config.types.meeting){
return "meeting_task";
}
return "";
};
gantt.templates.task_text = function(start, end, task){
if(task.type == gantt.config.types.meeting){
return "Meeting: <b>" + task.text + "</b>";
}
return task.text;
};
Related sample: Custom task type
Чтобы настроить, как отображаются существующие типы задач, используйте опцию type_renderers. Это позволяет переопределять функции, которые контролируют, как отображаются различные типы задач.
gantt.config.type_renderers["project"]=function(task, defaultRender){
var main_el = document.createElement("div");
main_el.setAttribute(gantt.config.task_attribute, task.id);
var size = gantt.getTaskPosition(task);
main_el.innerHTML = [
"<div class='project-left'></div>",
"<div class='project-right'></div>"
].join('');
main_el.className = "custom-project";
main_el.style.left = size.left + "px";
main_el.style.top = size.top + 7 + "px";
main_el.style.width = size.width + "px";
return main_el;
};
К началу