dhtmlxGantt是用于跨瀏覽器和跨平臺(tái)應(yīng)用程序的功能齊全的Gantt圖表。可滿足項(xiàng)目管理應(yīng)用程序的所有需求，是最完善的甘特圖圖表庫。它允許你創(chuàng)建動(dòng)態(tài)甘特圖，并以一個(gè)方便的圖形化方式可視化項(xiàng)目進(jìn)度。有了dhtmlxGantt，你可以顯示活動(dòng)之間的依賴關(guān)系，顯示具有完成百分比陰影的當(dāng)前任務(wù)狀態(tài)以及組織活動(dòng)到樹結(jié)構(gòu)。

點(diǎn)擊下載dhtmlxGantt試用版

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

甘特圖中的網(wǎng)格列指定為“列”配置內(nèi)的對(duì)象數(shù)組。

典型的配置如下所示：

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}
];

實(shí)際上，即使您未在應(yīng)用中指定此設(shè)置，這也是默認(rèn)情況下將具有的配置。

列具有很多可選屬性。要知道的重要一點(diǎn)是，只有'name'屬性是強(qiáng)制性的。其主要目的是定義單元格的內(nèi)容。默認(rèn)情況下，單元格將從任務(wù)的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"}
    ]
  });
});

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

唯一的例外是名為“add”的列–這是一個(gè)預(yù)定義的值，顯示“+”號(hào)，允許用戶為該任務(wù)添加子項(xiàng)。

基于此，您可以指定自己的列。例如，要在網(wǎng)格中定義四個(gè)自定義列，例如“任務(wù)名稱”，“保持器”，“開始時(shí)間”和“進(jìn)度”，我們應(yīng)指定columns參數(shù)，其中“text”，“holder”，“start_date” '和'progress'是數(shù)據(jù)屬性的名稱。

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")"} }
];

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

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

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+")"} }
    ];

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

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"}
    ]
  });
});

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

此外，為了能夠設(shè)置Grid配置，還可以動(dòng)態(tài)更改它。例如，如果要使用戶能夠在詳細(xì)的和緊湊的Grid視圖之間切換。

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

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生產(chǎn)計(jì)劃排程系統(tǒng)中，實(shí)現(xiàn)計(jì)劃修改、滾動(dòng)排程、臨時(shí)插單等高級(jí)智能功能，幫助企業(yè)實(shí)現(xiàn)數(shù)字化或智能工廠的轉(zhuǎn)型。

相關(guān)產(chǎn)品推薦：

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

AnyGantt：構(gòu)建復(fù)雜且內(nèi)容豐富的甘特圖的理想工具

jQuery Gantt Package：基于HTML5 / jQuery的跨平臺(tái)jQuery Gantt包

phGantt Time Package：對(duì)任務(wù)和時(shí)間的分配管理的甘特圖