项目管理工具DHTMLX Gantt灯箱元素配置教程：配置灯箱元素

本文给大家讲解DHTMLX Gantt如何对灯箱的元素进行配置。

Lightbox 是一个编辑表单，用于更改任务的详细信息。

默认灯箱如下图所示。

灯箱可能会有所不同，具体取决于它们用于任务的类型和特性。每种类型的任务的配置设置都存储在灯箱对象中。他们是：

• gantt.config.lightbox.sections - 用于常规任务。
• gantt.config.lightbox.project_sections - 用于项目任务。
• gantt.config.lightbox.milestone_sections - 用于里程碑。

灯箱结构：灯箱的结构由灯箱对象的sections属性指定：

//default lightbox definition   
gantt.config.lightbox.sections=[
    {name:"description", height:70, map_to:"text", type:"textarea", focus:true},
    {name:"time",        height:72, map_to:"auto", type:"duration"}
];

section数组中的每个项目都是一个对象，用于指定灯箱中的单个部分（可用的部分属性）。

部分控件：灯箱的每个部分都基于一些控制，灯箱中可以使用以下类型的控件：

• Textarea - 多行文本字段
• Time - 一对选择器，用于通过指定任务的开始和结束日期来设置任务持续时间
• Duration - 一组选择器，用于通过指定任务的开始日期和天数来设置任务持续时间
• Select - 一个简单的选择框
• Typeselect - 用于更改任务类型的选择框
• 父级 - 用于更改任务父级的选择框
• 模板- 一个包含一些 HTML 内容的容器
• 复选框- 用于打开/关闭选项或多个值的复选框
• 单选按钮- 用于从给定选项集中仅选择一个选项的单选按钮
• 资源- 用于将多个资源分配给任务的复杂控件
• 约束- 用于设置任务约束的复杂控件

var opts = [
    { key: 1, label: 'High' },
    { key: 2, label: 'Normal' },
    { key: 3, label: 'Low' }
];
 
gantt.config.lightbox.sections = [
    {name:"description", height:38, map_to:"text", type:"textarea", focus:true},
    {name:"priority",    height:22, map_to:"priority", type:"select", options:opts},
    {name:"time",        height:72, map_to:"auto", type:"duration"}
];

DHTMLX Gantt享有超十年声誉，支持跨浏览器和跨平台，性价比高，可满足项目管理控件应用的所有需求，是最完善的甘特图图表库。慧都2022年终狂欢火热进行中，知名软控件享超低折扣，满额豪礼赠，复购双重大礼！了解更多内容，欢迎在线咨询或者私信我获取正版试用版及报价。