點(diǎn)擊獲DhtmlxGantt官方正式版

此功能僅在 Gantt PRO 版本中可用。

DhtmlxGantt的資源控制，用于將多個資源及其數(shù)量分配給任務(wù)的復(fù)雜控件。

gantt.config.lightbox.sections = [
 {name: "description", height: 38, map_to: "text", type: "textarea", focus: true},
 {name:"owner",height:60, type:"resources", options:gantt.serverList("people"),   
    map_to:"owner_id", default_value:8},                                 
 {name: "time", type: "duration", map_to: "auto"}
];

分配多個資源

gantt.config.lightbox.sections = [
  { name:"description",height:38,map_to:"text",type:"textarea",focus:true },
  { name:"time",type:"duration",map_to:"auto" },
  { name:"rooms",type:"resources",map_to:"rooms", options:[  
      { key: 1, label: "room 1", unit: "hours" },    
      { key: 2, label: "room 2", unit: "hours" },   
      { key: 3, label: "room 3", unit: "hours" }   
    ]  
  }    
];
 
gantt.locale.labels.section_rooms = "Rooms";

初始化

要將資源控件添加到燈箱，請按照以下步驟操作：

在燈箱配置中添加一個部分：

var roomsMap =  [
    { key: 1, label: "room 1", unit: "hours" },
    { key: 2, label: "room 2", unit: "hours" },
    { key: 3, label: "room 3", unit: "hours" }
];
 
gantt.config.lightbox.sections = [
  { name:"description",height:38,map_to:"text",type:"textarea",focus:true },
  { name:"time",type:"duration",map_to:"auto" },
  { name:"rooms",type:"resources",map_to:"rooms", options:roomsMap}    
];

為部分設(shè)置標(biāo)簽：

gantt.locale.labels.section_resources = "Rooms";

特性

以下屬性最重要且通常用于資源控制:

• name - (字符串) 部分名稱
• map_to - ( string ) 將被映射到該部分的數(shù)據(jù)屬性的名稱
• type - ( string )部分控件的類型
• options - ( array ) 對象數(shù)組。定義控件的選擇選項（用于選擇、復(fù)選框、單選和資源 控件）。數(shù)組中的每個對象都指定一個選項并包括以下屬性：
• key - ( string ) 選項 id。此屬性與任務(wù)數(shù)據(jù)屬性進(jìn)行比較以將選項分配給任務(wù)
• label - ( string ) 選項標(biāo)簽
• unit - ( number ) 資源的計量單位
• focus - ( boolean ) 如果設(shè)置為true，該部分將專注于打開燈箱
• default_value - ( any ) 該部分控件的默認(rèn)值。如果資源的價值不足，則應(yīng)用。選項數(shù)組中的每個選項都可以指定自己的默認(rèn)值。

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

通常，要設(shè)置資源控制的值，請使用options參數(shù)：

gantt.config.lightbox.sections = [
  { name:"rooms",type:"resources",map_to:"rooms",
    options:[
      { key: 1, label: "room 1", unit: "hours" },   
      { key: 2, label: "room 2", unit: "hours" },   
      { key: 3, label: "room 3", unit: "hours" }  
    ]  
  }    
];

options參數(shù)中的項目具有 3 個強(qiáng)制屬性：

• key - 選項 ID
• label - 選項標(biāo)簽
• unit - 資源的計量單位

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

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

gantt.config.lightbox.sections = [
 {name: "description", height: 38, map_to: "text", type: "textarea", focus: true},
 {name: "resources", type: "resources", map_to: "owner_id", default_value:8,
    options: gantt.serverList("people")},
 {name: "time", type: "duration", map_to: "auto"}
];
 
gantt.init("gantt_here");
gantt.load("/data");

更多關(guān)于DhtmlxGantt教程的內(nèi)容可進(jìn)入官網(wǎng)查看。

DhtmlxGantt| 下載試用

DhtmlxGantt是針對您的解決方案的交互式JavaScript / HTML5甘特圖。