Изменение порядка задач

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

Перетаскивание (drag-and-drop).
Сортировка (см. детали).

Эти методы взаимоисключающие. По умолчанию оба отключены.

Чтобы включить изменение порядка задач с помощью drag-and-drop, установите опцию @order_branch:

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

Related sample: Branch ordering

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

Перетаскивание по всей структуре Gantt

Опция @order_branch ограничивает перетаскивание задачами внутри одного уровня дерева.

Однако можно включить режим, в котором задачи можно перемещать в любое место Gantt, позволяя задаче заменять другую на любом уровне дерева. Для этого используйте опцию @order_branch_free:

// изменение порядка задач по всей структуре gantt
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;
});

Повышение производительности при больших наборах данных

При работе с большим количеством задач стандартный режим изменения порядка веток может замедлять работу. Для улучшения производительности можно использовать режим "marker".

gantt.config.order_branch = "marker";

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

Чтобы ограничить сброс задач в определённые позиции в этом режиме, используйте событие @onBeforeRowDragMove (работает только в режиме "marker").

Подсветка доступных позиций для сброса при перетаскивании

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

Вертикальное изменение порядка задач на временной шкале

См. примеры в разделе Решения: Как вертикально изменить порядок задач на временной шкале.

К началу