Перейти к основному содержимому

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

Начиная с версии 3.2, библиотека предоставляет расширение multiselect, которое позволяет выбрать несколько задач одновременно.

multiselection

Активация множественного выбора задач​

Чтобы активировать множественный выбор задач для задач, включите его с помощью метода 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>

Множественный выбор и увеличение/уменьшение отступа задач

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

Чтобы отключить расширение, используйте опцию multiselect:

Отключение множественного выбора задач

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" is the task's 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;

Множественный выбор и увеличение/уменьшение отступа задач

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

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

В режиме множественного выбора после клика по невыбранной задаче Gantt выберет её и откроет inline editor только после второго клика. Если вы хотите, чтобы Gantt открывал inline-editor после первого клика, включите конфигурацию 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] - срабатывает после завершения выбора задачи или диапазона задач
Need help?
Got a question about the documentation? Reach out to our technical support team for help and guidance. For custom component solutions, visit the Services page.
Need more help?Contact Support