本文給大家講解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    歡迎進群交流討論

慧都年終狂歡季，全場產品，限時特惠，立即了解詳情！