本文給大家講解DHTMLX Gantt如何將父級(jí)控件添加到燈箱配置，歡迎大家下載最新版試用體驗(yàn)。

DHTMLX Gantt正版試用下載

用于更改任務(wù)父級(jí)的選擇框。該控件加載甘特圖中顯示的所有任務(wù)，但您可以設(shè)置過濾規(guī)則和可顯示值的模板。其他一切都與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、初始化

要將父級(jí)控件添加到燈箱，請(qǐng)執(zhí)行以下步驟：

1、在燈箱配置中添加一個(gè)部分：

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、給部分設(shè)置標(biāo)簽：

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

2、屬性

以下屬性最重要且通常為父級(jí)控件設(shè)置：

name - (字符串) 部分名稱

高度- （數(shù)字）截面高度

map_to - ( string ) 將被映射到該部分的數(shù)據(jù)屬性的名稱

type - ( string )部分控件的類型

focus - ( boolean ) 如果設(shè)置為true，該部分將專注于打開燈箱

allow_root - ( boolean ) 如果設(shè)置為“true”，選項(xiàng)列表將包含一個(gè)附加選項(xiàng)，允許用戶將根級(jí)別設(shè)置為任務(wù)的父級(jí)。與root_label屬性配對(duì)使用

root_label - ( string ) 為根級(jí)父級(jí)設(shè)置標(biāo)簽。與allow_root屬性配對(duì)使用

filter- ( function )為選擇選項(xiàng)設(shè)置過濾功能。以任務(wù)id和任務(wù)對(duì)象為參數(shù)

sort - ( function )為選擇選項(xiàng)設(shè)置排序函數(shù)

模板- (函數(shù)) 為選擇選項(xiàng)設(shè)置模板

3、選項(xiàng)過濾

要過濾父級(jí)控件中顯示的選項(xiàng)，請(qǐng)使用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屬性設(shè)置一個(gè)帶有 2 個(gè)參數(shù)的過濾函數(shù)：

• id - ( string, number ) 任務(wù)的 id
• task - ( object ) 任務(wù)的對(duì)象

返回：

• true，對(duì)于應(yīng)該顯示的任務(wù)
• false，對(duì)于應(yīng)該從選項(xiàng)列表中刪除的任務(wù)

4、選項(xiàng)排序

要對(duì)父控件中顯示的選項(xiàng)進(jìn)行排序，請(qǐng)使用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屬性設(shè)置為每對(duì)相鄰值調(diào)用的排序函數(shù)并返回 1、-1 或 0 ：

• 1 - 具有第一個(gè)值的對(duì)象必須在第二個(gè)之前
• -1 - 第二個(gè)對(duì)象在第一個(gè)對(duì)象之前
• 0 - 兩個(gè)對(duì)象的順序不變

5、選項(xiàng)模板

要在父級(jí)控件中設(shè)置選項(xiàng)模板，請(qǐng)使用模板屬性：

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"}
];

模板屬性設(shè)置了一個(gè)接受 3 個(gè)參數(shù)的函數(shù)：

• start - ( Date ) 事件計(jì)劃開始的日期
• end - ( Date ) 事件計(jì)劃完成的日期
• ev - ( object ) 事件的對(duì)象

DHTMLX Gantt享有超十年聲譽(yù)，支持跨瀏覽器和跨平臺(tái)，性價(jià)比高，可滿足項(xiàng)目管理控件應(yīng)用的所有需求，是最完善的甘特圖圖表庫。慧都2022年終狂歡火熱進(jìn)行中，知名軟控件產(chǎn)品享超低折扣，滿額豪禮贈(zèng)，復(fù)購雙重大禮！了解更多內(nèi)容，歡迎在線咨詢或者私信我獲取正版試用版及報(bào)價(jià)。

甘特圖控件交流群：764148812    歡迎進(jìn)群交流討論

慧都年終狂歡季，全場(chǎng)產(chǎn)品，限時(shí)特惠，立即了解詳情！