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

초기화

Select 컨트롤을 라이트박스에 포함하려면 다음 단계를 따릅니다:

섹션을 lightbox 설정에 포함시키기:

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

섹션의 라벨 정의하기:

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

속성

'select' 컨트롤에서 자주 설정되는 주요 속성은 다음과 같습니다 (전체 목록은 여기에서 확인할 수 있습니다):

name	(string) 섹션의 이름
height	(number) 섹션의 높이
map_to	(string) 섹션이 매핑되는 데이터 속성 이름
type	(textarea,time,select,template,multiselect,radio,checkbox,combo) 섹션에 사용되는 컨트롤의 타입
options	(array of objects) 'select', 'multiselect', 'radio', 'combo'와 같은 컨트롤의 선택 옵션을 정의합니다. 각 객체는 하나의 옵션을 나타내며 다음을 포함합니다: key - (string) 옵션의 식별자, 이벤트의 데이터 속성과 매칭됨 label - (string) 옵션의 표시 라벨
onchange	(function) 컨트롤의 값이 변경될 때 호출되는 이벤트 핸들러 함수 Related sample: Linking select controls in the lightbox

컨트롤에 데이터 채우기

일반적으로 Select 컨트롤의 값은 options 파라미터를 사용하여 설정합니다:

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 메서드의 데이터 응답에는 서버 리스트 이름과 일치하는 컬렉션이 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 메서드도 스케줄러가 초기화된 후 옵션을 로드하는 데 사용할 수 있습니다.

컨트롤의 옵션을 새로운 값으로 업데이트하려면 updateCollection 메서드를 사용할 수 있습니다:

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

자세한 내용은 scheduler.serverList 문서를 참고하세요.

맨 위로