버전 3.2부터 라이브러리에는 여러 작업을 동시에 선택할 수 있는 multiselect 확장 기능이 포함되어 있습니다.
작업에 대해 멀티 태스크 선택을 활성화하려면 gantt.plugins 메서드를 사용하여 활성화하세요:
<!DOCTYPE html>
<html>
<head>
<script src="codebase/dhtmlxgantt.js"></script>
<link href="codebase/dhtmlxgantt.css" rel="stylesheet">
</head>
<body>
gantt.plugins({ multiselect: true }); //your code will be here
</body>
</html>
Related sample: Multiselection and Indent/Outdent tasks
활성화하면 멀티 태스크 선택 기능이 자동으로 적용됩니다.
이 확장 기능을 비활성화하려면 multiselect 옵션을 사용하세요:
Disabling multi-task selection
gantt.config.multiselect = false;
여러 작업이나 링크를 동시에 수정하려면 batchUpdate 메서드를 사용하세요:
gantt.batchUpdate(function () {
var tasks = gantt.getTaskByTime();
for(var i = 0; i < tasks.length; i++){
var task = tasks[i];
task.start_date = gantt.date.add(task.start_date, 1, "day");
task.end_date = gantt.calculateEndDate(task.start_date, task.duration);
gantt.updateTask(task.id);
}
});
이 메서드를 사용하면 여러 작업이나 링크를 한 번의 렌더링으로 일괄 업데이트할 수 있으므로, 여러 번의 업데이트로 인한 반복 렌더링을 방지할 수 있습니다.
Related sample: Multiselection and Indent/Outdent tasks
간트 차트에서 선택된 모든 작업을 반복 처리하려면 eachSelectedTask 메서드를 사용하세요:
gantt.batchUpdate(function () {
gantt.eachSelectedTask(function(task_id){
if(gantt.isTaskExists(task_id))
gantt.deleteTask(task_id);
});
});
Related sample: Multiselection and Indent/Outdent tasks
멀티 태스크 선택을 사용하면 여러 작업에 동시에 작업을 적용할 수 있습니다. 예를 들어, 들여쓰기 또는 내어쓰기를 통해 작업을 하위 작업으로 만들거나, 하위 작업을 다시 상위 작업으로 승격할 수 있습니다.
Related sample: Multiselection and Indent/Outdent tasks
현재 작업이 선택되어 있는지 확인하려면 isSelectedTask 메서드를 사용하세요:
gantt.templates.task_class =
gantt.templates.grid_row_class =
gantt.templates.task_row_class = function (start, end, task) {
if (gantt.isSelectedTask(task.id))
return "gantt_selected";
};
Related sample: Multiselection and Indent/Outdent tasks
작업의 선택 상태를 전환하려면 toggleTaskSelection 메서드를 사용하세요:
gantt.toggleTaskSelection("t_1"); //"t_1"은 작업의 id입니다
gantt.render();
현재 선택된 모든 작업을 가져오려면 getSelectedTasks 메서드를 사용하세요:
gantt.getSelectedTasks();
가장 최근에 선택된 작업을 가져오려면 getLastSelectedTask 메서드를 사용하세요:
gantt.getLastSelectedTask();
동일한 레벨의 작업만 선택할 수 있도록 제한하려면 multiselect_one_level 옵션을 사용하세요:
gantt.config.multiselect_one_level = true;
gantt.init('gantt_here');
multiselect.js 확장 기능이 활성화된 상태에서 Ctrl 또는 Shift를 누르면 여러 작업을 선택할 수 있으며, 선택된 작업을 함께 수평으로 드래그할 수 있습니다.
이 기능을 비활성화하려면 drag_multiple 옵션을 false로 설정하세요:
gantt.config.drag_multiple = true;
Related sample: Multiselection and Indent/Outdent tasks
단일 선택 모드에서는 작업을 클릭하면 바로 인라인 에디터가 열립니다.
멀티 선택 모드에서는 선택되지 않은 작업을 클릭하면 작업이 선택만 되고, 인라인 에디터는 두 번째 클릭 이후에만 열립니다.
멀티 선택 모드에서도 첫 클릭에 에디터가 열리도록 하려면 inline_editors_multiselect_open 설정을 활성화하세요.
gantt.plugins({
multiselect: true
});
...
gantt.config.inline_editors_multiselect_open = true;
멀티 태스크 선택이 활성화된 경우, 하나 이상의 작업을 선택하면 일반 onTaskSelected / onTaskUnselected 이벤트와 멀티셀렉트 확장 전용 이벤트가 모두 발생합니다.
멀티 태스크 선택 시 발생하는 이벤트 흐름은 다음과 같습니다: