彩票走势图

项目管理软件dhtmlxGantt配置教程(一):指定列设置

翻译|使用教程|编辑:秦林|2022-10-12 10:59:47.003|阅读 601 次

概述:本套教程给大家带来dhtmlxGantt指定列设置的讲解。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

dhtmlxgantt入门教程

这篇文章给大家讲解dhtmlxGantt的指定列设置。

DhtmlxGantt正版试用下载

1、概述

默认情况下,网格包含4列:

  1. 任务名称
  2. 开始日期
  3. 期间
  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' 是数据属性的名称 。

2、显示任务的结束日期

当任务数据对象包含“%Y-%m-%d”或“%d-%m-%Y”格式的开始和结束日期(即没有小时-分钟部分)时,结果日期为默认格式可能具有不期望的值。

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

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

  • 为每个任务行分配一个 CSS 类 首先,使用grid_row_class 模板 :
gantt.templates.grid_row_class = function( start, end, task ){
        if ( task.$level > 1 ){
            return "nested_task"
        }
        return "";
    };
  • 然后,隐藏此类行的“添加”按钮:
.nested_task .gantt_add{
        display: none !important;
    }
4、宽度

要设置列的宽度,请使用的属性宽度:相关列对象中

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");

最小/最大列宽

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");

调整大小时的最小网格宽度

网格可以调整到的最小宽度是通过 gantt.config.min_grid_column_width 选项定义的:

gantt.config.min_grid_column_width = 1; // the grid can be resized to 1 px

请注意,调整大小期间网格的最小宽度还取决于“添加”列的最小宽度(默认为 44)。 为了能够将网格调整为小于 44 像素的值, 指定min_width选项: 请在“添加”列的对象中

{name: "add", label: "", min_width: 1 }
5、数据映射和模板

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

为列数据使用模板

如果您想在一个列中显示多个数据属性的混合,您可以为该列使用任何名称,但通过 的模板 属性 列 参数 设置数据模板。 例如,您可以为列指定 name:"staff" 并定义一个模板函数,该函数将返回 的持有者 和 进度数据属性。 要加载到列中。

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");
6、文本对齐

要设置列中文本的水平对齐方式,请使用的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");

dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表,可满足项目管理控件应用程序的所有需求,是最完善的甘特图图表库。了解更多DhtmlxGantt相关内容和资讯,欢迎在线咨询或者私信我获取正版试用版及报价。


甘特图控件交流群:764148812    欢迎进群交流讨论

更多正版甘特图软件下载、购买、授权咨询,请点这里!


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP