드롭다운 리스트 박스입니다.
gantt.config.lightbox.sections = [
{name:"description", height:38, map_to:"text", type:"textarea", focus:true},
{name:"priority", height:22, map_to:"priority", type:"select", options: [ {key:1, label: "High"}, {key:2, label: "Normal"}, {key:3, label: "Low"} ]}, {name:"time", height:72, type:"duration", map_to:"auto"}
];
gantt.locale.labels.section_priority = "Priority";
Related sample: Select control
select 컨트롤을 lightbox에 포함하려면 다음과 같이 진행합니다:
1) lightbox 설정에 섹션을 추가합니다:
var opts = [
{key:1, label: "High"},
{key:2, label: "Normal"},
{key:3, label: "Low"}
];
gantt.config.lightbox.sections = [
{name:"description", height:38, map_to:"text", type:"textarea",focus:true},
{name:"priority", height:22, map_to:"priority",type:"select",options:opts}, {name:"time", height:72, type:"duration", map_to:"auto"}
];
2) 섹션에 라벨을 지정합니다:
gantt.locale.labels.section_priority = "Priority";
Related sample: Select control
아래는 select 컨트롤에서 자주 설정되는 주요 속성입니다 (전체 목록은 여기에서 확인하세요):
select 컨트롤의 값을 설정하려면 options 파라미터를 사용하세요:
gantt.config.lightbox.sections = [
{ name:"priority",height:22, map_to:"priority",type:"select",
options: [
{key:1, label: "High"},
{key:2, label: "Normal"},
{key:3, label: "Low"}
]}
];
options 배열의 각 항목은 다음 두 속성을 가져야 합니다:
서버 데이터로 컨트롤을 채우려면 options 파라미터에 serverList 메서드에서 반환된 값을 할당하세요:
gantt.config.lightbox.sections = [
{name:"description", ...},
{ name:"priority",map_to:"priority",type:"select",
options:gantt.serverList("priority")}, {name:"category", map_to:"category", type:"select",
options:gantt.serverList("category")}, {name:"time", ...}
];
gantt.init("gantt_here");
gantt.load("/data");
/data 엔드포인트의 응답 예시는 아래와 같습니다:
{
"tasks":[
{"id":1,"text":"Project #2","start_date":"01-04-2020","duration":18,"parent":0},
{"id":2,"text":"Task #1","start_date":"02-04-2020","duration":8,"parent":1},
{"id":3,"text":"Task #2","start_date":"11-04-2020","duration":8,"parent":1}
],
"links":[
{"id":1,"source":1,"target":2,"type":"1"},
{"id":2,"source":2,"target":3,"type":"0"}
],
"collections": { "priority":[
{"value":"1","label":"Low"},
{"value":"2","label":"Medium"},
{"value":"3","label":"High"}
],
"category":[
{"value":"1","label":"Simple"},
{"value":"2","label":"Complex"},
{"value":"3","label":"Unknown"}
]
}
}
아래는 dhtmlxConnector 초기화 예시입니다:
//data.php
<?php
include('connector-php/codebase/gantt_connector.php');
$res = new PDO("mysql:host=localhost;dbname=gantt", "root", "");
$list = new OptionsConnector($res);
$list->render_table("priorities","id","id(value),name(label)");
$gantt = new JSONGanttConnector($res);
$gantt->set_options("priority", $list);
$gantt->render_links("gantt_links","id","source_task(source),
target_task(target),type");
$gantt->render_table("gantt_tasks","id","start_date,duration,text,progress,
sortorder,parent");
?>
Back to top