dhtmlxGantt是用於跨瀏覽器和跨平臺應用程序的功能齊全的JavaScript / HTML5甘特圖,允許你創建動態甘特圖,並以一個方便的圖形化方式可視化項目進度。有了dhtmlxGantt,你可以顯示活動之間的依賴關係,顯示具有完成百分比陰影的當前任務狀態以及組織活動到樹結構。
在管理項目時,用戶可能需要更改任務順序或在多個甘特項目之間移動任務。今天,我們將熟悉在dhtmlxGantt中實現此功能的方式。
我們的HTML5 Gantt提供了兩種在網格中對任務進行重新排序的替代方法:
通過拖放
通過分類
默認情況下,兩種模式均禁用。
爲了通過拖放操作使任務重新排序,我們需要將order_branch選項設置爲'true':
// ordering tasks only inside a branch gantt.config.order_branch = true; gantt.init("gantt_here");
order_branch屬性激活“分支”模式,該模式可對同一嵌套級別內的任務的重新排序。
更改任務位置涉及觸發onBeforeTaskMove或onAfterTaskMove事件。第一個可以用來控制任務可以移到哪裏。爲了防止移動到另一個子分支,請使用onBeforeTaskMove事件:
gantt.config.order_branch = true; gantt.attachEvent("onBeforeTaskMove", function(id, parent, tindex){ var task = gantt.getTask(id); if(task.parent != parent) return false; return true; }); gantt.init("gantt_here");
如果甘特圖中包含很多任務,則分支重新排序的默認模式可能會降低性能。爲了加快速度,您可以使用“標記”模式:
gantt.config.order_branch = "marker";
在此模式下,僅將任務名稱重新排序(按住鼠標左鍵),並且僅當任務放在目標位置時(鬆開鍵)才重新渲染甘特圖:
與默認模式不同,更改任務位置不涉及觸發onBeforeTaskMove或onAfterTaskMove事件。爲防止任務掉到特定位置,我們可以改用onBeforeRowDragMove事件。請注意,它僅在“標記”模式下有效:
// ordering tasks only inside a branch gantt.config.order_branch = "marker"; gantt.attachEvent("onBeforeRowDragMove", function(id, parent, tindex){ var task = gantt.getTask(id); if(task.parent != parent) return false; return true; }); gantt.init("gantt_here");
希望我們的教程對您有所幫助!如果您想親自試用dhtmlxGantt,請下載30天免費評估版。鏈接:https://www.evget.com/product/4213/download