本文給大家講解DHTMLX Gantt如何對燈箱的元素進行配置。

DHTMLX Gantt正版試用下載

Lightbox 是一個編輯表單，用于更改任務的詳細信息。

默認燈箱如下圖所示。

燈箱可能會有所不同，具體取決于它們用于任務的類型和特性。每種類型的任務的配置設置都存儲在燈箱對象中。他們是：

• gantt.config.lightbox.sections - 用于常規任務。
• gantt.config.lightbox.project_sections - 用于項目任務。
• gantt.config.lightbox.milestone_sections - 用于里程碑。

燈箱結構：燈箱的結構由燈箱對象的sections屬性指定：

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

section數組中的每個項目都是一個對象，用于指定燈箱中的單個部分（可用的部分屬性）。

部分控件：燈箱的每個部分都基于一些控制，燈箱中可以使用以下類型的控件：

• Textarea - 多行文本字段
• Time - 一對選擇器，用于通過指定任務的開始和結束日期來設置任務持續時間
• Duration - 一組選擇器，用于通過指定任務的開始日期和天數來設置任務持續時間
• Select - 一個簡單的選擇框
• Typeselect - 用于更改任務類型的選擇框
• 父級 - 用于更改任務父級的選擇框
• 模板- 一個包含一些 HTML 內容的容器
• 復選框- 用于打開/關閉選項或多個值的復選框
• 單選按鈕- 用于從給定選項集中僅選擇一個選項的單選按鈕
• 資源- 用于將多個資源分配給任務的復雜控件
• 約束- 用于設置任務約束的復雜控件

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

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

甘特圖控件交流群：764148812    歡迎進群交流討論

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