Множественный выбор задач

Начиная с версии 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     });     //ваш код будет здесь
</body>
</html>

После включения множественный выбор задач становится активным автоматически.

Чтобы отключить расширение, используйте опцию 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);
    }
});

Этот метод позволяет обновлять сразу несколько задач или связей за одно повторное отображение, вместо нескольких обновлений и рендеров.

Итератор

Чтобы перебрать все выбранные задачи в Gantt, используйте метод eachSelectedTask:

gantt.batchUpdate(function () {
    gantt.eachSelectedTask(function(task_id){
        if(gantt.isTaskExists(task_id))
            gantt.deleteTask(task_id);
    });
});

Одновременное увеличение/уменьшение отступа

С помощью множественного выбора можно применять операции сразу к нескольким задачам. Например, вы можете сдвигать задачи вправо или влево, превращая их в подзадачи или возвращая обратно на основной уровень.

Проверка, выбрана ли задача

Чтобы узнать, выбрана ли задача в данный момент, используйте метод 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";
};

Чтобы переключить задачу между выбранным и невыбранным состоянием, используйте метод toggleTaskSelection:

gantt.toggleTaskSelection("t_1"); //"t_1" — идентификатор задачи
gantt.render();

Получение всех выбранных задач

Чтобы получить все выбранные в данный момент задачи, используйте метод getSelectedTasks:

gantt.getSelectedTasks();

Чтобы получить последнюю выбранную задачу, используйте метод getLastSelectedTask:

gantt.getLastSelectedTask();

Ограничение выбора задач одним уровнем

Если вы хотите ограничить выбор задачами только на одном уровне, используйте опцию multiselect_one_level:

gantt.config.multiselect_one_level = true; 
gantt.init('gantt_here');

Множественный выбор задач и drag-n-drop

С включённым расширением multiselect.js при удерживании Ctrl или Shift можно выбрать несколько задач и перетаскивать их горизонтально вместе.

Чтобы отключить эту возможность, установите опцию drag_multiple в false:

gantt.config.drag_multiple = true;

Открытие редактора в один клик

В режиме одиночного выбора клик по задаче сразу открывает встроенный редактор.

В режиме множественного выбора клик по невыбранной задаче выделяет её, а редактор откроется только после второго клика.
Чтобы редактор открывался при первом клике даже в режиме множественного выбора, включите настройку inline_editors_multiselect_open.

gantt.plugins({
  multiselect: true
});
 
...
 
gantt.config.inline_editors_multiselect_open = true;

События API

Когда активен множественный выбор задач, выделение одной или нескольких задач вызывает как общие события onTaskSelected / onTaskUnselected, так и события, специфичные для расширения multiselect.

Множественный выбор задач вызывает следующий поток событий:

onBeforeMultiSelect — срабатывает перед выбором задачи или диапазона задач; событие можно заблокировать
onBeforeTaskMultiSelect — срабатывает перед изменением состояния выбора отдельной задачи (выделение или снятие выделения); событие можно заблокировать
onTaskMultiSelect — срабатывает после изменения состояния выбора задачи
onTaskUnselected — вызывается для каждой задачи, с которой снято выделение в диапазоне
onTaskSelected — вызывается для каждой задачи, которая была выбрана в диапазоне
onMultiSelect — срабатывает после завершения выбора задачи или диапазона задач

К началу