翻譯|使用教程|編輯:莫成敏|2020-06-22 14:55:58.947|閱讀 1742 次
概述:在本教程中,我們將向您展示如何指定左側網格的列,并為您簡要概述dhtmlxGantt中的模板化和格式設置功能。
# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關鏈接:
dhtmlxGantt是用于跨瀏覽器和跨平臺應用程序的功能齊全的Gantt圖表。可滿足項目管理應用程序的所有需求,是最完善的甘特圖圖表庫。它允許你創建動態甘特圖,并以一個方便的圖形化方式可視化項目進度。有了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:對任務和時間的分配管理的甘特圖

本站文章除注明轉載外,均為本站原創或翻譯。歡迎任何形式的轉載,但請務必注明出處、不得修改原文相關鏈接,如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自: