本文給大家講解DHTMLX Gantt如何對控件選擇性控制，歡迎大家下載最新版試用體驗(yàn)。

DHTMLX Gantt正版試用下載

下拉列表框如下所示：

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: [ 
        {key:1, label: "High"},                                               
        {key:2, label: "Normal"},                                             
        {key:3, label: "Low"}                                                 
     ]},                                                                      
    {name:"time", height:72, type:"duration", map_to:"auto"}
];
 
gantt.locale.labels.section_priority = "Priority";

1、初始化

要將選擇控件添加到燈箱，請執(zhí)行以下步驟：

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

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, type:"duration", map_to:"auto"}
];

2、給部分設(shè)置標(biāo)簽：

gantt.locale.labels.section_priority = "Priority";

2、屬性

以下屬性最重要且通常用的時(shí)間控屬性：

以下屬性最重要且通常為選擇控件設(shè)置：

name - (字符串) 部分名稱

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

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

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

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

options - ( array ) 對象數(shù)組。定義控件的選擇選項(xiàng)（用于選擇、復(fù)選框 和單選 控件）。數(shù)組中的每個(gè)對象都指定一個(gè)選項(xiàng)并具有以下屬性：

key - ( string ) 選項(xiàng) id。此屬性與任務(wù)數(shù)據(jù)屬性進(jìn)行比較以將選項(xiàng)分配給任務(wù)

label - ( string ) 選項(xiàng)標(biāo)簽

default_value - ( any ) 該部分控件的默認(rèn)值。僅在輸入值不足時(shí)應(yīng)用

onchange - ( function ) 為該部分的控件指定“onChange”事件處理函數(shù)

3、用數(shù)據(jù)填充控件

通常，要為選擇控件設(shè)置值，請使用options參數(shù)：

gantt.config.lightbox.sections = [
    { name:"priority",height:22, map_to:"priority",type:"select",
      options: [ 
        {key:1, label: "High"},                                               
        {key:2, label: "Normal"},                                             
        {key:3, label: "Low"}                                                
    ]}                                                                    
];

options參數(shù)中的項(xiàng)目有 2 個(gè)強(qiáng)制屬性：

• key - 選項(xiàng) ID
• label - 選項(xiàng)標(biāo)簽

4、使用來自服務(wù)器的數(shù)據(jù)填充

要從服務(wù)器填充控件，請將options選項(xiàng)設(shè)置為serverList方法返回的值：

gantt.config.lightbox.sections = [
    {name:"description", ...},
    { name:"priority",map_to:"priority",type:"select",
        options:gantt.serverList("priority")}, 
    {name:"category", map_to:"category", type:"select", 
        options:gantt.serverList("category")}, 
    {name:"time", ...}
];
gantt.init("gantt_here");
gantt.load("/data");

/data url的輸出如下：

{
  "tasks":[
    {"id":1,"text":"Project #2","start_date":"01-04-2020","duration":18,"parent":0},
    {"id":2,"text":"Task #1","start_date":"02-04-2020","duration":8,"parent":1},
    {"id":3,"text":"Task #2","start_date":"11-04-2020","duration":8,"parent":1}
  ],
  "links":[
    {"id":1,"source":1,"target":2,"type":"1"},
    {"id":2,"source":2,"target":3,"type":"0"}
  ],
  "collections": { 
    "priority":[
        {"value":"1","label":"Low"},
        {"value":"2","label":"Medium"},
        {"value":"3","label":"High"}
    ],
    "category":[
        {"value":"1","label":"Simple"},
        {"value":"2","label":"Complex"},
        {"value":"3","label":"Unknown"}
    ]
  }
}

通過 dhtmlxConnector 加載選項(xiàng)，以下是dhtmlxConnector初始化的示例：

//data.php
<?php
    include('connector-php/codebase/gantt_connector.php');
 
    $res = new PDO("mysql:host=localhost;dbname=gantt", "root", "");
 
    $list = new OptionsConnector($res);
    $list->render_table("priorities","id","id(value),name(label)");
 
    $gantt = new JSONGanttConnector($res);
    $gantt->set_options("priority", $list);
    $gantt->render_links("gantt_links","id","source_task(source),
                    target_task(target),type");    
    $gantt->render_table("gantt_tasks","id","start_date,duration,text,progress,
                    sortorder,parent");
?>

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ǎn)品，限時(shí)特惠，立即了解詳情！