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}