Radio

라디오 버튼 모음

노트

라이트박스에서 이 컨트롤을 사용하려면 editors 확장을 활성화하세요.

scheduler.plugins({
    editors: true /*!*/
});

const priorities = [
    { key: 1, label: 'High' },
    { key: 2, label: 'Medium' },
    { key: 3, label: 'Low' }
];
            
scheduler.locale.labels.section_priority = 'Priority';

scheduler.config.lightbox.sections = [
    { name:"text", height:50, map_to:"text", type:"textarea", focus:true },
    { name:"priority", height:58, options:priorities, 
                map_to:"priority", type:"radio", vertical:true},
    { name:"time", height:72, type:"time", map_to:"auto"}
];

라이트박스의 라디오 버튼 예제

초기화

라이트박스에 Radio 컨트롤을 추가하려면 아래 절차를 따르세요:

1. 페이지에서 'editors' 확장을 활성화합니다:

scheduler.plugins({
    editors: true
});

2. 라이트박스 구성에 섹션을 추가합니다:

scheduler.config.lightbox.sections = [
    { name:"description", ... },
    { name:"radiobutton", height:58, options:priorities, 
    map_to:"priority", type:"radio", vertical:true},
    { name:"time", ...}
];

3. 섹션의 레이블을 설정합니다:

scheduler.locale.labels.section_priority = 'Priority';

라이트박스의 라디오 버튼 예제

속성

다음 속성은 주로 중요하고 'radio' 컨트롤에 일반적으로 설정됩니다(전체 목록은 여기를 참조하십시오):

name	(string) 섹션의 이름
height	(number) 섹션의 높이
map_to	(string) 섹션에 매핑될 데이터 속성의 이름
type	(textarea,time,select,template,multiselect,radio,checkbox,combo) 섹션 컨트롤의 유형
options	(array of objects) 컨트롤의 선택 옵션을 정의합니다 (for 'select', 'multiselect', 'radio', 'combo' 컨트롤). 배열의 각 객체는 하나의 옵션을 지정하며 다음 속성을 가집니다: key - (string) 옵션의 ID. 이 속성은 이벤트의 데이터 속성과 비교되어 이벤트에 옵션을 할당합니다 label - (string) 옵션의 레이블
vertical	(boolean) 라디오 버튼을 수직으로 배치할지 여부를 지정합니다(true인 경우 수직, for the 'multiselect' and 'radio' controls인 경우 수평)

데이터를 가지고 컨트롤 채우기

일반적으로 라디오 버튼의 값을 설정하려면 options 매개변수를 사용해야 합니다:

scheduler.config.lightbox.sections = [
    {      name:"alert", type:"select", 
        ...
        options:[
            { key: 1, label: 'High' },
            { key: 2, label: 'Medium' },
            { key: 3, label: 'Low' }
    ]},
    ...
];

options 매개변수의 항목은 2개의 필수 속성을 가져야 합니다:

• key - (string) 옵션의 ID
• label - (string) 옵션의 레이블

서버에서 라디오 버튼 값을 가져오기

서버에서 가져온 데이터를 사용하여 라디오 버튼의 값을 설정하려면 serverList 메서드를 사용하세요:

scheduler.config.lightbox.sections = [
    {name:"description", ...},
    {name:"priority", map_to:"priority", type:"radio", 
          options:scheduler.serverList("priority")},
    {name:"time", ...}
];

scheduler.load("/api/types");

load 메서드의 데이터 응답은 JSON 형식으로 다음과 같은 서버 목록 이름과 함께 컬렉션을 포함해야 합니다 다음 형식의 데이터 형식:

{ 
   "data":[
      {
          "id":"1",
          "start_date":"2027-03-02 15:00:00",
          "end_date":"2027-03-04 16:00:00",
          "text":"Interview",
          "priority":1
      },
      {
          "id":"2",
          "start_date":"2027-03-02 17:00:00",
          "end_date":"2027-03-04 18:00:00",
          "text":"Performance review",
          "type":2
      }
   ], 
   "collections": {/*!*/
      "type":[/*!*/      
         {"value":1,"label":"Low"},/*!*/
         {"value":2,"label":"Medium"},/*!*/
         {"value":3,"label":"High"}/*!*/
      ]/*!*/
   }/*!*/
}

예시 백엔드 핸들러(Node.js/Express):

app.get("/api/types", async (req, res) => {
  const data = await eventsService.list();
  const collections = {
    type: [
      { value: 1, label: "Low" },
      { value: 2, label: "Medium" },
      { value: 3, label: "High" }
    ]
  };
  res.json({ data, collections });
});

노트

참고로, 검색된 옵션 목록을 업데이트하려면 updateCollection 메서드를 사용할 수 있습니다.

라디오 컨트롤의 이벤트 처리

기본적으로 dhtmlxScheduler API는 Scheduler 라이트박스의 라디오 버튼에 대한 특정 이벤트 핸들러를 제공하지 않습니다.

하지만 아래와 같이 Lightbox 라디오 컨트롤에 클릭 핸들러를 할당할 수 있습니다:

1. 라이트박스가 열린 후 라디오 요소를 가져옵니다.

scheduler.attachEvent("onLightbox", function(){
    const node = scheduler.formSection("type").node;
    const radios = node.getElementsByTagName("input");
    ...
});

2. Lightbox의 발견된 라디오 버튼에 onclick 이벤트를 연결합니다.

scheduler.attachEvent("onLightbox", function(){
    ...
    for(let i = 0; i < radios.length; i++){
      radios[i].onclick = onRadioClick; 
    }
});

3. 마지막으로, 라디오 버튼 클릭 후 실행될 함수를 지정해야 합니다.

function onRadioClick(event){
    let e = event || window.event,
        node = this;
  
    dhtmlx.message(node.value);
}

관련 샘플 라디오 컨트롤의 이벤트 처리