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

點擊下載dhtmlxGantt試用版

在本教程中，我們將向您展示如何指定左側網格的列，并為您簡要概述dhtmlxGantt中的模板化和格式設置功能，您可以觀看視頻教程或閱讀文章內容：

甘特圖中的網格列指定為“列”配置內的對象數組。

典型的配置如下所示：

gantt.config.columns = [
    {name: "text", tree: true, width: '*', resize: true},
    {name: "start_date", align: "center", resize: true},
    {name: "duration", align: "center"},
    {name: "add", width: 44}
];

實際上，即使您未在應用中指定此設置，這也是默認情況下將具有的配置。

列具有很多可選屬性。要知道的重要一點是，只有'name'屬性是強制性的。其主要目的是定義單元格的內容。默認情況下，單元格將從任務的match屬性中獲取值：

document.addEventListener("DOMContentLoaded", function(event) {

    gantt.config.columns = [
        {name: "text", tree: true, width: '*', resize: true},
        {name: "start_date", align: "center", resize: true},
        {name: "duration", align: "center"},
        {name: "add", width: 44}
    ];

  gantt.init("gantt_here");
  
  
  gantt.parse({
    data: [
        {
            id: 1, text: "Project #2", start_date: "01-04-2018", duration: 18, order: 10,
            progress: 0.4, open: true
        },
        {
            id: 2, text: "Task #1", start_date: "02-04-2018", duration: 8, order: 10,
            progress: 0.6, parent: 1
        },
        {
            id: 3, text: "Task #2", start_date: "11-04-2018", duration: 8, order: 20,
            progress: 0.6, parent: 1
        }
    ],
    links: [
        {id: 1, source: 1, target: 2, type: "1"},
        {id: 2, source: 2, target: 3, type: "0"}
    ]
  });
});

正如您在上面的示例中看到的那樣，名為“文本”的列顯示了任務對象的“文本”屬性中的值。開始日期和持續時間也是如此。

唯一的例外是名為“add”的列–這是一個預定義的值，顯示“+”號，允許用戶為該任務添加子項。

基于此，您可以指定自己的列。例如，要在網格中定義四個自定義列，例如“任務名稱”，“保持器”，“開始時間”和“進度”，我們應指定columns參數，其中“text”，“holder”，“start_date” '和'progress'是數據屬性的名稱。

gantt.config.columns =  [
   {name:"text",       label:"Task name",  tree:true, width: 150 },
   {name:"holder",     label:"Holder",     align:"center", width: 80 },
   {name:"start_date", label:"Start time", align:"center", width: 80 },
   {name:"progress",   label:"Progress",   align:"center", width: 80 },
];

但是，如果您想在將值顯示在單元格中之前格式化值，該怎么辦？在這種情況下，您將需要使用列的'template'屬性。如果我們在其中使用模板，則上面的示例如下所示：

gantt.config.columns =  [
    {name:"text",       label:"Task name",  tree:true, width:"*" },
    {name:"start_date", label:"Start time", align: "center" },
    {name:"staff",      label:"Holder(s)", template:function(obj){
                                return obj.holder+"("+obj.progress")"} }
];

每次重繪該列時，都會調用該模板，并將返回值放入單元格的內部HTML中。這是甘特圖中幾乎所有模板的重要特征。每次更新后，模板元素的內容將完全替換。這意味著，如果直接從代碼中修改此類DOM元素，則下次調用模板后，所有更改將丟失。

因此，如果您需要根據用戶操作來更改單元格的類型，最好的方法不是直接更改樣式，而是使用模板功能設置必要的樣式和標記。

gantt.config.columns =  [
    {name:"text",       label:"Task name",  tree:true, template(task){
            if(gantt.getState().selected_task == task.id){
                return "<b>" + task.text + "</b>";
            }else{
              return task.text; 
            };
        } },
    {name:"start_date", label:"Start time", align: "center" },
    {name:"staff",      label:"Holder(s)", template:function(obj){
            return obj.holder+"("+obj.progress+")"} }
    ];

其次，請務必注意，模板處理原始HTML值，并且不清除以任何方式從它們返回的數據。這是一個有意識的設計決策，使您可以自由自定義大多數甘特元素。但這有一個嚴重的后果–這樣的模板可以用作XSS攻擊的入口點。讓我們考慮下一個示例：

document.addEventListener("DOMContentLoaded", function(event) {
    gantt.config.columns =  [
    {name:"text",       label:"Task name",  tree:true, template(task){
            if(gantt.getState().selected_task == task.id){
                return "<b>" + task.text + "</b>";
            }else{
              return task.text; 
            };
        } },
    {name:"start_date", label:"Start time", align: "center" },
    {name:"staff",      label:"Holder(s)", template:function(obj){
            return obj.holder+"("+obj.progress+")"} }
    ];

 gantt.init("gantt_here");
  
  gantt.parse({
    data: [
        {
            id: 1, text: "<img onerror='javascript:alert(\"it can`t be good\")' src='' />", start_date: "01-04-2018", duration: 18, 
            progress: 0.4, holder:"Mike", open: true
        },
        {
            id: 2, text: "Task #1", start_date: "02-04-2018", duration: 8,
            progress: 0.6, holder:"John", parent: 1
        },
        {
            id: 3, text: "Task #2", start_date: "11-04-2018", duration: 8, 
            progress: 0.6, holder:"Mike", parent: 1
        }
    ],
    links: [
        {id: 1, source: 1, target: 2, type: "1"},
        {id: 2, source: 2, target: 3, type: "0"}
    ]
  });
});

與以前的日期相同，但是這次我們在任務文本中添加了某個HTML字符串。現在，看看運行示例時發生了什么。我們放入數據中的javascript代碼已在頁面上執行。如果實際應用程序的后端返回了此類數據，則該代碼將在每個將打開此項目的用戶的瀏覽器中運行。這些類型的攻擊通常用于向應用程序中注入惡意代碼，以竊取任何敏感數據或更改頁面的內容。后端開發人員有責任確保數據Feed返回的數據中沒有不安全的HTML。一旦確保數據源安全且可以信任，甘特模板就絕對安全。

此外，為了能夠設置Grid配置，還可以動態更改它。例如，如果要使用戶能夠在詳細的和緊湊的Grid視圖之間切換。

您只需為列config分配一個新值并重新繪制甘特色，就可以做到這一點。

document.addEventListener("DOMContentLoaded", function(event) {

    var largeGrid = [
    {name: "text",       label:"Name",  tree:true, width: 200 },
    {name: "start_date", label:"Start", align: "center", width: 70 },
        {name: "end_date",   label:"End", width: 70 },
        {name: "duration",   label:"Duration", width: 70 },
    {name: "staff",      label:"Holder(s)", template:function(obj){
            return obj.holder+"("+obj.progress+")"}, width: 70  },
        {name: "add", width: 44}
    ];
    var largeGridWidth = 550;
    

    var smallGrid = [
    {name: "text",       label:"Task name",  tree:true, width: 200  },
    {name: "start_date", label:"Start time", align: "center", width: 70  },
    {name: "staff",      label:"Holder(s)", template:function(obj){
            return obj.holder+"("+obj.progress+")"}, width: 70  }
    ];
    var smallGridWidth = 340;

    gantt.toggleGrid = function(){
        var newGrid;
        var newGridWidth;
        if(gantt.config.columns == largeGrid){
            newGrid = smallGrid;
            newGridWidth = smallGridWidth
        }else{
            newGrid = largeGrid;
            newGridWidth = largeGridWidth;
        }

        gantt.config.columns = newGrid;
        gantt.config.grid_width = newGridWidth;
        gantt.render();
    };

    gantt.config.columns = smallGrid;
    gantt.config.grid_width = smallGridWidth;
  gantt.init("gantt_here");

dhtmlxGantt可以集成到慧都APS生產計劃排程系統中，實現計劃修改、滾動排程、臨時插單等高級智能功能，幫助企業實現數字化或智能工廠的轉型。

相關產品推薦：

VARCHART XGantt：支持ActiveX、.Net等平臺的C#甘特圖控件

AnyGantt：構建復雜且內容豐富的甘特圖的理想工具

jQuery Gantt Package：基于HTML5 / jQuery的跨平臺jQuery Gantt包

phGantt Time Package：對任務和時間的分配管理的甘特圖