项目管理软件dhtmlxGantt配置教程(一):指定列设置
从本篇文章开始,将给大家带来dhtmlxGantt的配置系列教程讲解,请锁定此专栏,以便第一时间获取更新消息。
1、概述
默认情况下,网格包含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相关内容,请访问慧都网获取。
项目管理软件dhtmlxGantt配置教程(一):指定列设置相关推荐
- Qt使用教程之指定运行设置(三)
2019独角兽企业重金招聘Python工程师标准>>> 在指定运行设置(二)一文中,我们介绍了指定调试器设置.为基于Linux的设备指定运行设置.为QNX设备指定运行设置等.本文我们 ...
- dhtml gantt所有配置_甘特图dhtmlxGantt使用教程:如何快速设置内联编辑器和编辑JavaScript Gantt数据...
dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表.可满足项目管理应用程序的所有需求,是最完善的甘特图图表库.它允许你创建动态甘特图,并以一个方便的图形化方式可视化项目进度 ...
- Fiddler软件基本配置教程
在上一章节,我们介绍了Fiddler的详细安装教程,本章教程,主要介绍一下,Fiddler的基本使用. 目录 一.安装HTTPS证书 (1)先将证书导出到桌面,然后双击安装
- linux如何启动网络配置文件,linux系统的网络配置教程 Ubuntu系统网络设置方法网络配置linux及Ubuntu通过修改配置文件进行网络配置...
Windows系统网络配置方法 一.设置网络 1)Windows打开cmdcmd 输入ipconfig /all 可以看到 修改为静态IP Ubuntu修改网络为静态IP 设置虚拟机: 查看IPif ...
- wx2540h配置教程_求WX2540h设置MAC接入认证方法!
PSK身份认证与密钥管理模式和MAC地址认证配置举例 1. 组网需求 · AC旁挂在Switch上,Switch同时作为DHCP server为AP和Client分配IP地址.通过配置客户端P ...
- 【制作微课的软件】Focusky教程 | 视频的外观设置
(Focusky动画演示大师简称为"FS软件")对于演示文稿中所插入的视频,通常我们都只是强调它的内容,而忽略了视频的外观.添加到演示中的视频的外形都是默认为矩行. 矩形外观有时候 ...
- 制造业项目管理软件如何帮助企业做好项目费用管理?
在项目导向型制造型企业中,项目的成本管理与费用控制是企业进行项目评价与利润管控.指导市场选择和项目筛选的重要手段.而传统的手工管理模式下,制造企业管理层很难快速了解到哪些项目出现了延误.哪些项目发生了 ...
- CentOS 6.0 图形(图解)安装教程、基本配置、网络配置、软件源配置、安装压缩、语言包 一.准备安装CentOS 6
CentOS 6.0 图形(图解)安装教程.基本配置.网络配置.软件源配置.安装压缩.语言包 一.准备安装CentOS 6 1.CentOS简介 CentOS 是甚么? CentOS 是一个基于Red ...
- 交换机配置软件crt安装_非常详细的锐捷二层交换机配置教程,适合新手小白
笔者上一篇文章写了关于锐捷三层交换机配置教程,但是这只是核心的配置,还不能搭建一个完整的企业网络.那么这一篇就来讲一下锐捷的二层交换机配置,比起三层交换机的配置,二层交换机配置就非常简单了.同样,今天 ...
最新文章
- MySQL数据库have_openss_MySQL 关于OpenSSL证书支持检查方式
- python编程怎么建立工程_教你如何用Python脚本快速创建项目
- 第四十四课:jQuery UI和jQuery easy UI
- 数据库四大特性与隔离级别
- P3389-[模板]高斯消元法
- vue跳转页面之后返回_vue页面跳转后返回原页面初始位置方法
- Flink 端到端一致性
- Java基础学习总结(147)——Java常用分布式锁技术方案
- 如何更新Word文档的附图或附表序号
- 将程序添加防火墙白名单
- android 删除wifi文件,如何删除无线配置文件
- docker容器跨宿主机通信
- BP神经网络算法基本原理,基于bp的神经网络算法
- 实时展示摄像头内容(go server + electron-vue client)
- HTML在线编辑器原理
- deepin 作为日常办公系统
- 在IDEA中更改项目名(project)
- linux 命令修改uid,修改Linux用户的UID、GID
- Day01 每日英语
- vue删除图片同时删除本地文件_删除图片数据时同时删除图片文件夹里面的相应图片文件的方法...