半岛权威十大直营(官方)网站

本文给大家讲解DHTMLX Gantt如何将父级控件添加到灯箱配置，欢迎大家下载最新版试用体验。

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?1:(a<b?-1: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    欢迎进群交流讨论

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