点击获DhtmlxGantt官方正式版

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

DhtmlxGantt的资源控制，用于将多个资源及其数量分配给任务的复杂控件。

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

为部分设置标签：

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

特性

以下属性最重要且通常用于资源控制:

• name - (字符串) 部分名称
• map_to - ( string ) 将被映射到该部分的数据属性的名称
• type - ( string )部分控件的类型
• options - ( array ) 对象数组。定义控件的选择选项（用于选择、复选框、单选和资源 控件）。数组中的每个对象都指定一个选项并包括以下属性：
• key - ( string ) 选项 id。此属性与任务数据属性进行比较以将选项分配给任务
• label - ( string ) 选项标签
• unit - ( number ) 资源的计量单位
• focus - ( boolean ) 如果设置为true，该部分将专注于打开灯箱
• default_value - ( any ) 该部分控件的默认值。如果资源的价值不足，则应用。选项数组中的每个选项都可以指定自己的默认值。

用数据填充控件

通常，要设置资源控制的值，请使用options参数：

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参数中的项目具有 3 个强制属性：

• key - 选项 ID
• label - 选项标签
• unit - 资源的计量单位

使用来自服务器的数据填充控件

要从服务器填充控件，请将options选项设置为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");

更多关于DhtmlxGantt教程的内容可进入官网查看。

DhtmlxGantt| 下载试用

DhtmlxGantt是针对您的解决方案的交互式JavaScript / HTML5甘特图。