项目管理工具DHTMLX Gantt灯箱元素配置教程：将父级控件配置到灯箱

用于更改任务父级的选择框。该控件加载甘特图中显示的所有任务，但您可以设置过滤规则和可显示值的模板。其他一切都与Select Control相同。

gantt.config.lightbox.sections = [    {name:"description", height:38, map_to:"text", type:"textarea", focus:true},    {name:"parent", type:"parent", allow_root:"true", root_label:"No parent"},    {name:"time", height:72, type:"time", map_to:"auto"}];

1、初始化

要将父级控件添加到灯箱，请执行以下步骤：

1、在灯箱配置中添加一个部分：

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

2、给部分设置标签：

gantt.locale.labels["section_parent"] = "Parent task";

2、属性

以下属性最重要且通常为父级控件设置：

name – (字符串) 部分名称

高度- （数字）截面高度

map_to – ( string ) 将被映射到该部分的数据属性的名称

type – ( string )部分控件的类型

focus – ( boolean ) 如果设置为true，该部分将专注于打开灯箱

allow_root – ( boolean ) 如果设置为“true”，选项列表将包含一个附加选项，允许用户将根级别设置为任务的父级。与root_label属性配对使用

root_label – ( string ) 为根级父级设置标签。与allow_root属性配对使用

filter- ( function )为选择选项设置过滤功能。以任务id和任务对象为参数

sort – ( function )为选择选项设置排序函数

模板- (函数) 为选择选项设置模板

3、选项过滤

要过滤父级控件中显示的选项，请使用filter属性：

gantt.config.lightbox.sections = [    {name:"description", height:38, map_to:"text", type:"textarea", focus:true},    {name:"parent", type:"parent",  filter:function(id, task){        if(task.$level > 1){             return false;        }else{             return true;        }    }},    {name:"time", height:72, type:"time", map_to:"auto"}];

filter属性设置一个带有 2 个参数的过滤函数：

• id – ( string, number ) 任务的 id
• task – ( object ) 任务的对象

返回：

• true，对于应该显示的任务
• false，对于应该从选项列表中删除的任务

4、选项排序

要对父控件中显示的选项进行排序，请使用sort属性：

function sortByLength(a,b){    a = a.text.length();    b = b.text.length();    return a>b:(a<b1:0);};gantt.config.lightbox.sections = [    {name:"description", height:38, map_to:"text", type:"textarea", focus:true},    {name:"parent", type:"parent",  sort:sortByLength},    {name:"time", height:72, type:"time", map_to:"auto"}];

sort属性设置为每对相邻值调用的排序函数并返回 1、-1 或 0 ：

• 1 – 具有第一个值的对象必须在第二个之前
• -1 – 第二个对象在第一个对象之前
• 0 – 两个对象的顺序不变

5、选项模板

要在父级控件中设置选项模板，请使用模板属性：

gantt.config.lightbox.sections = [    {name:"description", height:38, map_to:"text", type:"textarea", focus:true},    {name:"parent", type:"parent",  template(start,end,ev){        var title = ev.id+"."+ev.text;        return title;    }},    {name:"time", height:72, type:"time", map_to:"auto"}];

模板属性设置了一个接受 3 个参数的函数：

• start – ( Date ) 事件计划开始的日期
• end – ( Date ) 事件计划完成的日期
• ev – ( object ) 事件的对象

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

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

年终狂欢季，全场产品，限时特惠，立即了解详情！

标签：