dhtmlxGantt是用於跨瀏覽器和跨平臺應用程式的功能齊全的Gantt圖表。可滿足專案管理應用程式的所有需求，是最完善的甘特圖圖表庫。它允許你建立動態甘特圖，並以一個方便的圖形化方式視覺化專案進度。有了dhtmlxGantt，你可以顯示活動之間的依賴關係，顯示具有完成百分比陰影的當前任務狀態以及組織活動到樹結構。

該庫提供了grouping.js副檔名，該副檔名使您可以按任務的任何屬性對任務進行分組。

dhtmlxGantt如何對任務進行分組使用教程

要開始使用擴充套件，請使用gantt.plugins方法啟用它。

<!DOCTYPE html>
<html>
<head>
   <script src="codebase/dhtmlxgantt.js"></script>   
   <link href="codebase/dhtmlxgantt.css" rel="stylesheet">   
</head>
<body>
    gantt.plugins({
        grouping: true
    });
    //your code will be here
</body>
</html>

分組任務

要按某種標準對任務進行分組，請使用groupBy方法：

var data =  {
    tasks:[{id:1, priority:1, start_date:"02-04-2020 00:00", ...}, ...] 
};
 
gantt.groupBy({
    relation_property: "priority",
    groups: [{key:1, label: "High"},{key:2, label: "Normal"},{key:3, label: "Low"}],
    group_id: "key",
    group_text: "label"
});

where：

lationship_property-（必需的）將用於對專案進行分組的任務物件的屬性。例如：

var data =  {
    tasks:[{id:1, priority:1, start_date:"02-04-2020 00:00", ...}, ...] 
};
gantt.groupBy({
    relation_property: "priority", 
    ...
});

該屬性還可以用於組織多級結構中的組：

gantt.groupBy({
    relation_property: "priority",
    groups: [
        {key:0, label: "High"},
        {key:4, label: "Normal"},
        {key:5, label: "Low"},
        //multi level groups
        {key:1, label: "Give High Attention", "priority":0},
        {key:2, label: "Resolve Immediately", "priority":0},
        {key:3, label: "Keep For Next Release", "priority":5}
    ],
    group_id: "key",
    group_text: "label"
});

groups-（必填）groups（摘要）項的陣列。

gantt.groupBy({
    groups: [
        {key:1, label: "High"}, 
        {key:2, label: "Normal"},
        {key:3, label: "Low"}
    ],
    group_id: "key",
    group_text: "label"
});

請注意：

1.每個“組”物件必須至少包含2個屬性（但可以包含任意數量的附加屬性）：id和文字描述（分別由“ group_id”，“ group_text”引數指定）。

2.將組專案作為啟用了“專案”型別和“只讀”屬性的專案新增到資料集中。可以透過'$ virtual'屬性檢測到它們，並將其作為常規資料項處理：

gantt.templates.task_class=function(start, end, task){
    if(task.$virtual)
    return "summary-bar";
};

3.原始資料集中的“專案”任務不會以分組模式顯示，但是可以透過API使用。

group_id-（可選）組的ID。預設值-'key'。
group_text-（可選）組的標籤。預設值-'label'。
定界符-（可選）定界符用於為具有多個資源的任務自動建立組。“，“ 預設情況下。

取消分組任務

要重置分組，請呼叫groupBy方法並傳遞false作為引數：

重置當前分組

gantt.groupBy(false);

使用集合指定組

通常，組被頁面上的多個元素使用，為避免重複，您可以將組顯示為命名集合。

gantt.serverList("priority", [
    {key:1, label: "High"},
    {key:2, label: "Normal"},
    {key:3, label: "Low"}
]);
gantt.groupBy({
    groups: gantt.serverList("priority"),
    relation_property: "priority",
    group_id: "key",
    group_text: "label"
});

dhtmlxGantt如何對任務進行分組使用教程

相關文章