Select

var alert_opts = [
    { key: 1, label: 'None' },
    { key: 2, label: 'On start date' },
    { key: 3, label: '1 day before' }
];
 
scheduler.locale.labels.section_select = 'Alert';
 
scheduler.config.lightbox.sections = [
    { name:"text", height:50, map_to:"text", type:"textarea", focus:true },
    { name:"select", height:40, map_to:"type", type:"select", options:alert_opts},
    { name:"time", height:72, type:"time", map_to:"auto"}
];

初始化

要在 lightbox 中包含 Select 控件，需要按照以下步骤操作：

在 lightbox 配置中添加该 section：

scheduler.config.lightbox.sections = 
    { name:"description", ... },
    { name:"alert", height:40,map_to:"type",type:"select", options:alert_opts},
    { name:"time", ...}
];

为该 section 定义标签：

scheduler.locale.labels.section_select = "Alert";

属性

以下是 'select' 控件常用的一些关键属性（完整列表请参见这里）：

name	(string) section 的名称
height	(number) section 的高度
map_to	(string) section 映射的数据属性名
type	(textarea,time,select,template,multiselect,radio,checkbox,combo) section 中使用的控件类型
options	(array of objects) 定义 'select'、'multiselect'、'radio' 和 'combo' 等控件的选项。每个对象表示一个选项，包括： key - (string) 选项的标识符，与事件的数据属性匹配 label - (string) 选项的显示文本
onchange	(function) 控件值变化时触发的事件处理函数 Related sample: Linking select controls in the lightbox

为控件填充数据

通常，可以通过 options 参数为 Select 控件设置选项值：

scheduler.config.lightbox.sections = 
    {   name:"alert", type:"select", 
        ...
        options:[
            { key: 1, label: 'None'},
            { key: 2, label: 'On start date'},
            { key: 3, label: '1 day before'}
    ]},
    ...
];

在 options 数组中的每一项都必须包含以下两个必需属性：

key - 选项的标识符
label - 选项的显示文本

动态更改选项

如需从服务器加载选项，可以将 options 属性赋值为 serverList 方法返回的值：

scheduler.config.lightbox.sections = [
    {name:"description", ...},
    {name:"type",map_to:"type",type:"select",options:scheduler.serverList("type")},
    {name:"time", ...}
];
 
scheduler.load("./data/types");

有关 serverList 方法的详细信息，请参见相关文档。

load 方法的数据响应应包含与 server list 名称匹配的集合，并以 JSON 格式返回，格式示例见此处：

{ 
   "data":[
      {
          "id":"1",
          "start_date":"2019-03-02 15:00:00",
          "end_date":"2019-03-04 16:00:00",
          "text":"Interview",
          "type":"1"
      },
      {
          "id":"2",
          "start_date":"2019-03-02 17:00:00",
          "end_date":"2019-03-04 18:00:00",
          "text":"Performance review",
          "type":"2"
      }
   ], 
   "collections": {      "type":[               {"value":"1","label":"Interview"},         {"value":"2","label":"Performance review"},         {"value":"3","label":"Request"}      ]   }}

parse 方法也可以在 scheduler 初始化后用于加载选项。

如需用新值更新控件的选项，可以使用 updateCollection 方法：

scheduler.updateCollection("type", [      
    {"key":"1","label":"Interview"},
    {"key":"2","label":"Performance review"},
    {"key":"3","label":"Request"}
]);

更多信息请参见 scheduler.serverList 相关文档。

返回顶部