dhtmlxGantt 甘特图-创建指定列

dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求，是最完善的甘特图图表库。它允许你创建动态甘特图，并以一个方便的图形化方式可视化项目进度。有了dhtmlxGantt，你可以显示活动之间的依赖关系，显示具有完成百分比阴影的当前任务状态以及组织活动到树结构。

点击下载dhtmlxGantt试用版

指定列

网格的列配置有columns参数。

在这里插入图片描述

// default columns definition
gantt.config.columns = [
    {
    
    name:"text",       label:"Task name",  width:"*", tree:true },
    {
    
    name:"start_date", label:"Start time", align:"center" },
    {
    
    name:"duration",   label:"Duration",   align:"center" },
    {
    
    name:"add",        label:"",           width:44 }
];

总览

默认情况下，网格包含4列：

任务名称
开始日期
持续时间
“ +”列。带有的特殊列name="add"显示“ +”号，允许用户添加任务的子代。
注意，您无需指定columns参数即可在网格中显示默认列。
该列参数是一个数组，每一个对象，其中呈现的单个列。因此，例如，要在网格中定义5列：“任务”，“开始日期”，“结束日期”，“持有人”，“进度”，请按以下方式指定columns参数：

gantt.config.columns =  [
    {
    
    name:"text",       label:"Task name",  tree:true, width:"*" },
    {
    
    name:"holder",     label:"Holder",     align:"center" },
    {
    
    name:"start_date", label:"Start time", align:"center" },
    {
    
    name:"end_date",   label:"End date",   align:"center" },
    {
    
    name:"progress",   label:"Progress",   align:"center" },
];
gantt.init("gantt_here");

其中’text’，‘holder’，‘start_date’，‘end_date’，'progress’是数据属性的名称。

隐藏某些任务的“添加”按钮

阻止用户将子任务添加到特定任务的一种非常简单的方法是通过CSS隐藏“添加”按钮。

1.首先，使用grid_row_class模板为每个任务行分配一个CSS类：

gantt.templates.grid_row_class = function( start, end, task ){
    
    
    if ( task.$level > 1 ){
    
    
        return "nested_task"
    }
    return "";
};

2.然后，为此类行隐藏“添加”按钮：

.nested_task .gantt_add{
    
    
    display: none !important;
}

宽度

要设置列的宽度，请在相关列的对象中使用属性宽度：

gantt.config.columns =  [
    {
    
    name:"text",       label:"Task name",  width:"*", tree:true },
    {
    
    name:"start_date", label:"Start time", width:150 },
    {
    
    name:"duration",   label:"Duration",   width:120 }
];
gantt.init("gantt_here");

使用“ *”值，使该列占据所有剩余空间。

请注意，Grid列的宽度取决于两个属性：列的宽度和grid_width。如果列宽的总和不等于网格的宽度，则甘特将更改参数之一。
通过gantt.init（）初始化甘特图时，列的宽度是优先级。
通过gantt.render（）渲染甘特图时，grid_width是优先级。
通过gantt.init（）初始化甘特图时，如果未指定列的宽度或将其设置为’*’，则grid_width是优先级。

最小/最大列宽

所述MIN_WIDTH / MAX_WIDTH属性可以被用来限制列的宽度在大小调整操作的情况下：

gantt.config.columns =  [
 {
    
    name:"text", label:"Task name", width:"*", min_width: 150, max_width:300, tree:true},
 {
    
    name:"start_date", label:"Start time", width:150 },
 {
    
    name:"duration",   label:"Duration",   width:120 }
];
gantt.init("gantt_here");

数据映射和模板

默认情况下，dhtmlxGantt使用与列名称相对应的数据属性填充网格。例如，如果为列设置名称：“ holder”，则dhtmlxGantt将在传入的JSON数据中查找此类数据属性，如果存在此类属性，则将其加载到该列。

使用模板获取列数据

如果要在列中同时显示多个数据属性，则可以为该列使用任何名称，但可以通过columns参数的template属性设置数据模板。例如，您可以为列指定名称：“ staff”，并定义一个模板函数，该函数将返回holder和progress数据属性以加载到该列中。

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+")"} }
];
gantt.init("gantt_here");

文字对齐

要设置列中文本的水平对齐方式，请在相关列的对象中使用align属性：

gantt.config.columns =  [
    {
    
    name:"text",       label:"Task name",  tree:true, align:"center"},
    {
    
    name:"start_date", label:"Start time", align: "center" },
    {
    
    name:"duration",   label:"Duration",   align: "center" }
];
 
gantt.init("gantt_here");

WBS代码

您可以添加一列，以显示任务的大纲编号（其WBS代码）。为此，您需要在列模板中使用getWBSCode方法。

gantt.config.columns = [
    {
    
    name:"wbs", label:"WBS", width:40, template:gantt.getWBSCode }, 
    {
    
    name:"text", label:"Task name", tree:true, width:170 },
    {
    
    name:"start_date", align:"center", width: 90},
    {
    
    name:"duration", align:"center", width: 60},
    {
    
    name:"add", width:40}
];

获取任务的WBS代码

该getWBSCode方法返回的必要任务的WBS代码。例如，我们将以下任务加载到甘特图中：

gantt.parse({
    
    
 "tasks":[
    {
    
    "id":1, "text":"Project #1", "start_date":"28-03-2020", 
        "duration":"11", "parent":"0", "open":true},
    {
    
    "id":2, "text":"Task #1", "start_date":"01-04-2020", 
        "duration":"18", "parent":"1"},
    {
    
    "id":3, "text":"Task #2", "start_date":"02-04-2020", 
        "duration":"8", "parent":"1"}
 ],
 "links":[]
});

并且我们想要获取id = 3的任务的WBS代码。为此，我们将任务的对象作为参数传递给getWBSCode方法。它将返回带有任务的WBS代码的字符串：

var wbs_code = gantt.getWBSCode(gantt.getTask(3)); // -> returns “1.2”

通过WBS代码获取任务

您还可以通过将任务的WBS代码传递给getTaskByWBSCode方法来获取任务的对象：

var task = gantt.getTaskByWBSCode("1.2");
// => {id:"t1", text:"Task #1, unscheduled: true, duration: 1, …}

任务的时间限制

您可以添加单独的网格列，如果选择的类型需要，则可以设置任务的时间约束类型和约束日期。这些列分别具有“ constraint_type”和“ constraint_date”名称。

gantt.config.columns = [
    {
    
    
      name:"constraint_type", align:"center", width:100, 
        template:function(task){
    
    //template logic}, 
        resize: true, editor: constraintTypeEditor
    },
    {
    
    
      name:"constraint_date", align:"center", width:120, 
        template:function(task){
    
    //template logic}, 
        resize: true, editor: constraintDateEditor
    },
    {
    
     name: "add", width: 44 }
];

这些列链接到内联编辑器的对象，这些对象允许为任务选择必要的约束类型并在网格中直接编辑其日期。

var constraintTypeEditor = {
    
    
    type: "select", map_to: "constraint_type", options: [
        {
    
     key: "asap", label: gantt.locale.labels.asap },
        {
    
     key: "alap", label: gantt.locale.labels.alap },
        {
    
     key: "snet", label: gantt.locale.labels.snet },
        {
    
     key: "snlt", label: gantt.locale.labels.snlt },
        {
    
     key: "fnet", label: gantt.locale.labels.fnet },
        {
    
     key: "fnlt", label: gantt.locale.labels.fnlt },
        {
    
     key: "mso", label: gantt.locale.labels.mso },
        {
    
     key: "mfo", label: gantt.locale.labels.mfo }
    ]
};
 
var constraintDateEditor = {
    
    
    type:"date", 
    map_to:"constraint_date", 
    min:new Date(2019, 0, 1), 
    max:new Date(2020, 0, 1)
};

调整大小

以下功能仅在PRO版中可用

为了使用户可以通过拖动右列的边框来调整列的大小，请在相关列的对象中使用resize属性：

gantt.config.columns = [
  {
    
    name:"text", tree:true, width:"*",resize:true },//-> 'resize' active
  {
    
    name:"start_date", resize:true, min_width:100 },//-> 'resize' limited by 'min_width'
  {
    
    name:"duration", align:"center" },              //-> no resize
  {
    
    name:"add", width:"44" }
];

要通过拖动网格的边框使整个网格可调整大小，请使用gantt.config.layout选项，并在内部指定具有必要配置的grid和resizer对象。

gantt.config.layout = {
    
    
    css: "gantt_container",
    rows:[
      {
    
    
        cols: [
          {
    
    view: "grid", id: "grid", scrollX:"scrollHor", scrollY:"scrollVer"},
          {
    
    resizer: true, width: 1},
          {
    
    view: "timeline", id: "timeline", scrollX:"scrollHor", scrollY:"scrollVer"},
          {
    
    view: "scrollbar", scroll: "y", id:"scrollVer"}
        ]
       },
      {
    
    view: "scrollbar", scroll: "x", id:"scrollHor", height:20}
    ]
};
 
gantt.init("gantt_here");

要在调整列大小时保留网格的大小，请将keep_grid_width选项设置为

true：
gantt.config.columns = [
    {
    
     name:"text", tree:true, width:"*", resize:true },
    {
    
     name:"start_date", align:"center"},
    {
    
     name:"duration", align:"center", width:70 },
    {
    
     name:"add", width:44 }
];
 
gantt.config.keep_grid_width = true; 
gantt.init("gantt_here");

大事记

dhtmlxGantt提供了6个事件来处理调整大小行为：

onColumnResizeStart-在用户开始拖动列的边框以调整列大小之前触发
onColumnResize-当用户拖动列的边框以调整列大小时触发
onColumnResizeEnd-用户完成拖动列边框以调整列大小后触发
onGridResizeStart-在用户开始拖动网格边框以调整网格大小之前触发
onGridResize-在用户拖动网格边框以调整网格大小时触发
onGridResizeEnd-在用户完成拖动网格的边框以调整网格大小后触发

能见度

要操纵列的可见性，请在相关列的对象中使用hide属性。
通过更改“ hide”属性的值并刷新甘特图，可以动态切换可见性：
此功能仅在PRO版本中可用
在基本视图和详细视图之间切换

gantt.config.columns = [
    {
    
    name: "text", label: "Task name", width: "*", tree: true, resize: true },
    {
    
    name: "start_date", label: "Start time" },
    {
    
    name: "duration", label: "Duration", width: 60, hide:true  }, 
    {
    
    name: "planned_start", label: "Planned start", hide:true  }, 
    {
    
    name: "planned_end", label: "Planned end", width:80, hide:true  },
    {
    
    name: "add", label: "", width: 36 }
];
 
var show_details = false;
function toggleView(){
    
    
    show_details = !show_details;
    gantt.getGridColumn("duration").hide = !show_details;
    gantt.getGridColumn("planned_start").hide = !show_details;
    gantt.getGridColumn("planned_end").hide = !show_details;
 
    if(show_details){
    
    
        gantt.config.grid_width = 600;
    }else{
    
    
        gantt.config.grid_width = 300;
    }
        gantt.render();
};
gantt.init("gantt_here");

水平滚动条

您可以使用布局配置选项的scrollable属性使Grid可滚动。阅读有关将布局视图绑定到滚动条的信息。

网格中水平滚动条的存在使甘特能够在调整网格宽度的大小时自动调整列的宽度。阅读有关如何启用此功能的更多信息。

除了scrollable属性，您还需要向布局中添加一个水平滚动条元素，并将其连接到网格，如下所示：

gantt.config.layout = {
    
    
  css: "gantt_container",
  cols: [
   {
    
    
     width:400,
     min_width: 300,
 
     // adding horizontal scrollbar to the grid via the scrollX attribute
     rows:[
      {
    
    view: "grid", scrollX: "gridScroll", scrollable: true, scrollY: "scrollVer"}, 
      {
    
    view: "scrollbar", id: "gridScroll"}  
     ]
   },
   {
    
    resizer: true, width: 1},
   {
    
    
     rows:[
      {
    
    view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
      {
    
    view: "scrollbar", id: "scrollHor"}
     ]
   },
   {
    
    view: "scrollbar", id: "scrollVer"}
  ]
};

由于将为网格和时间线显示单独的滚动条，因此您可能希望同步它们的可见性，因此两个滚动条将同时可见或隐藏。

在这里插入图片描述

可以通过将两个滚动条分配给同一可见性组来完成：

gantt.config.layout = {
    
    
  css: "gantt_container",
  cols: [
    {
    
    
      width:400,
      min_width: 300,
      rows:[
        {
    
    view: "grid", scrollX: "gridScroll", scrollable: true, scrollY: "scrollVer"}, 
 
         // horizontal scrollbar for the grid
        {
    
    view: "scrollbar", id: "gridScroll", group:"horizontal"} 
      ]
    },
    {
    
    resizer: true, width: 1},
    {
    
    
      rows:[
        {
    
    view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
 
        // horizontal scrollbar for the timeline
        {
    
    view: "scrollbar", id: "scrollHor", group:"horizontal"}  
      ]
    },
    {
    
    view: "scrollbar", id: "scrollVer"}
  ]
};

如果至少一个分配给同一组的滚动条可见，则该组的所有滚动条均可见。

关产品推荐：

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

AnyGantt：构建复杂且内容丰富的甘特图的理想工具

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

phGantt Time Package：对任务和时间的分配管理的甘特图

APS帮助提升企业生产效率，真正实现生产计划可视化呈现与控制,快速有效响应不同场景的生产计划，提高准时交货能力，提高产能和资源利用率

想要购买dhtmlxGantt正版授权，或了解慧都APS系统请点击【咨询在线客服】