Перестановка Задач

dhtmlxGantt предлагает два метода для перестановки задач в гриде:

Перетаскивание.
Сортировка (подробности смотрите здесь).

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

Чтобы включить перестановку задач методом перетаскивания, вы можете использовать опцию gantt.config.order_branch:

gantt.config.order_branch = true;
gantt.init("gantt_here");

Related sample: Branch ordering

Также доступно видео руководство, демонстрирующее, как сортировать и переставлять задачи в гриде.

Перетаскивание По Всей Структуре Ганта

Опция gantt.config.order_branch позволяет перетаскивать задачи в пределах одного уровня дерева.

Если вы хотите переставлять задачи между всеми уровнями дерева, вы можете включить режим, позволяющий задачам заменять другие, независимо от их уровня. Для этого используйте опцию gantt.config.order_branch_free:

// перестановка задач между всеми уровнями в ганте
gantt.config.order_branch = true;
gantt.config.order_branch_free = true;
 
gantt.init("gantt_here");

Ограничение Позиции Перетаскивания

Чтобы предотвратить перетаскивание задач в определенные позиции, вы можете использовать события onBeforeTaskMove или onBeforeRowDragEnd:

// Предотвращение перемещения задач в другую подветвь
gantt.attachEvent("onBeforeTaskMove", function(id, parent, tindex){
    var task = gantt.getTask(id);
    if(task.parent != parent)
        return false;
    return true;
});
 
// Или
gantt.attachEvent("onBeforeRowDragEnd", function(id, parent, tindex){
    var task = gantt.getTask(id);
    if(task.parent != parent)
        return false;
    return true;
});

Оптимизация Производительности для Больших Наборов Данных

Если ваш диаграмма Ганта включает множество задач, режим перестановки по умолчанию может повлиять на производительность. Чтобы улучшить скорость, вы можете переключиться в режим "маркер":

gantt.config.order_branch = "marker";

В этом режиме перемещается только имя задачи во время перетаскивания, а диаграмма Ганта обновляется только при отпускании задачи. События, такие как onBeforeTaskMove и onAfterTaskMove, не вызываются в этом процессе.

Чтобы ограничить перетаскивание задач в определенные позиции в этом режиме, вы можете использовать событие onBeforeRowDragMove.

Подсветка Допустимых Мест Приземления При Перетаскивании

Если вы хотите визуально указать допустимые места приземления при перетаскивании (например, чтобы показать, что корневой узел нельзя переместить под другой корневой узел), вы можете использовать события onRowDragStart и onRowDragEnd:

gantt.config.order_branch = true; // ограничивает порядок задач в пределах ветки
gantt.init("gantt_here");
gantt.parse(demo_tasks);
 
var drag_id = null;
gantt.attachEvent("onRowDragStart", function(id, target, e) {
    drag_id = id;
    return true;
});
gantt.attachEvent("onRowDragEnd", function(id, target) {
    drag_id = null;
    gantt.render();
});
 
gantt.templates.grid_row_class = function(start, end, task){
    if(drag_id && task.id != drag_id){
        if(task.$level != gantt.getTask(drag_id).$level)
            return "cant-drop";
        }
    return "";
};

Вертикальная Перестановка Задач в Таймлайне

Для получения дополнительной информации о вертикальной перестановке задач в таймлайне, обратитесь к примерам в разделе Как вертикально переставлять задачи в таймлайне.

К началу