彩票走势图

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：对任务和时间的分配管理的甘特图