dhtmlxGantt使用教程：如何创建指定列

该指南描述了如何指定 格的列。

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

dhtmlxGantt试用版

指定列

格的列配置有columns参数。

// default columns definitiongantt.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系统请点击【咨询在线客服】
标签：