이 기능은 PRO 에디션에서만 사용할 수 있습니다.
Gantt 차트에서 표시할 수 있는 세 가지 기본 작업 유형이 있습니다(사용자 정의 유형을 생성할 수도 있습니다):
작업 유형을 지정하려면 데이터 항목 내에서 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"로 지정된 작업의 특징은 다음과 같습니다:
프로젝트 작업 추가를 활성화하려면 Milestones를 참고하세요. 마일스톤 생성을 활성화하면 프로젝트 작업도 추가할 수 있습니다.
마일스톤은 기간이 0인 작업으로, 프로젝트의 주요 날짜를 강조할 때 사용됩니다(자세히 보기).
마일스톤 지정
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"로 지정된 작업의 특징은 다음과 같습니다:
마일스톤 생성을 활성화하는 방법은 Milestones를 참고하세요.
각 작업 유형마다 고유한 속성이 있으므로, 세부 입력 폼(라이트박스)을 유형별로 개별 구성할 수 있습니다. 구성 정보는 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"}
];
작업 유형이 선택 컨트롤에서 변경되면 라이트박스도 자동으로 새로운 구성에 맞게 동적으로 업데이트됩니다.
사용자 정의 작업 유형을 생성하고 해당 라이트박스 구조도 정의할 수 있습니다.
라이트박스 구성에 대한 자세한 내용은 편집 폼 구성하기 챕터를 참고하세요.
모든 작업 유형은 types 객체에 정의되어 있습니다.
사용자 정의 작업 유형을 추가하려면 일반적으로 다음 단계를 따릅니다:
예를 들어, 일반 작업처럼 동작하지만 고유한 색상과 라이트박스 입력을 가진 meeting이라는 새 유형을 추가하려면:
meeting이라는 새 유형과 해당 라이트박스를 다음과 같이 정의할 수 있습니다:
gantt.config.types.meeting = "type_id";
여기서 "meeting"은 코드 가독성을 위한 프로그래밍 이름입니다.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;
};
Back to top