CheckboxGroup
Checkbox 그룹을 생성하기 위한 기본 컨트롤입니다.
사용법
{
type: "checkboxGroup",
options: {
rows?: object[],
cols?: object[],
css?: string,
height?: string | number | "content", // 기본값: "content"
width?: string | number | "content", // 기본값: "content"
padding?: string | number,
},
key?: string | string[],
wrap?: boolean, // 기본값: false
css?: string,
disabled?: boolean, // 기본값: false
hidden?: boolean, // 기본값: false
height?: string | number | "content", // 기본값: "content"
width?: string | number | "content", // 기본값: "content"
padding?: string | number,
// `wrap:true`인 경우 Fieldset의 레이블 속성을 확인하세요
label?: string,
labelWidth?: string | number,
labelPosition?: "left" | "top", // 기본값: "top"
// 서비스 속성 및 메서드
$on?: { [eventName: string]: function },
$handler?: function,
$setValue?: function,
$layout?: function
}
CheckboxGroup 내부의 Checkbox 구성 객체:
{
id: string,
text: string,
value?: string,
css?: string,
disabled?: boolean, // 기본값: false
hidden?: boolean, // 기본값: false
height?: string | number | "content", // 기본값: "content"
width?: string | number | "content", // 기본값: "content"
padding?: string | number
}
컨트롤 내부에서 checkbox 구성을 가진 객체는 value 속성이 지정된 경우 boolean 값과 string 값을 모두 사용할 수 있습니다. 자세한 내용은 아래 예제를 확인하세요.
설명
CheckboxGroup 속성
기본 속성
type- (필수) 컨트롤의 유형입니다."checkboxGroup"로 설정합니다key- (선택 사항) 지정되거나 수정된 속성의 이름 또는 Diagram 항목 객체 내 해당 속성의 경로입니다wrap- (선택 사항) 외부 래핑 표시 여부를 정의합니다. 기본값은 false입니다options- (필수) CheckboxGroup의 옵션이 담긴 객체입니다. 이 객체는 다음 속성을 포함할 수 있습니다:css- (선택 사항) 컨트롤에 스타일 클래스를 추가합니다disabled- (선택 사항) 컨트롤의 활성화(false) 또는 비활성화(true) 여부를 정의합니다. 기본값은 false입니다hidden- (boolean) CheckboxGroup의 숨김 여부를 정의합니다. 기본값은 false입니다height- (선택 사항) 컨트롤의 높이입니다. 기본값은"content"입니다width- (선택 사항) 컨트롤의 너비입니다. 기본값은"content"입니다padding- (선택 사항) 셀과 CheckboxGroup 컨트롤 테두리 사이의 여백을 설정합니다label- (선택 사항) 컨트롤의 레이블을 지정합니다labelWidth- (선택 사항) 컨트롤 레이블의 너비를 설정합니다labelPosition- (선택 사항) 레이블의 위치를 정의합니다:"left"|"top". 기본값은"top"입니다
서비스 속성 및 메서드
경고
기본 유형의 컨트롤에 대한 서비스 속성 및 메서드는 재정의하지 않는 것을 강력히 권장합니다. 재정의할 경우 해당 기능이 손상될 수 있습니다.
$on- (선택 사항) - 이벤트 리스너를 설정할 수 있습니다. 해당 객체는 다음 속성을 갖습니다:eventName- 다음 매개변수와 함께 호출되는 콜백 함수입니다:object- 다음 속성을 가진 객체입니다:control- CheckboxGroup Form 컨트롤입니다editor- Diagram Editor의 객체입니다id- Diagram 항목의 id입니다
arguments- (선택 사항) - 원본 이벤트 인수입니다
$handler- (선택 사항) - CheckboxGroup Form 컨트롤의change이벤트 및 DataCollection의change이벤트 발생 시 동작을 처리할 수 있는 콜백 함수입니다. 다음 매개변수와 함께 호출됩니다:object- 다음 속성을 가진 객체입니다:id- Diagram 항목의 id입니다key- 지정되거나 수정된 속성의 이름 또는 Diagram 항목 객체 내 해당 속성의 경로입니다editor- Diagram Editor의 객체입니다control- 컴포넌트의 기반이 되는 CheckboxGroup Form 컨트롤의 객체입니다value- CheckboxGroup Form 컨트롤의 새 값입니다
$setValue- (선택 사항) - 컨트롤 초기화 시 및 DataCollection에서 값이 변경될 때 CheckboxGroup Form 컨트롤의 값을 설정할 수 있는 콜백 함수입니다. 다음 매개변수와 함께 호출됩니다:object- 다음 속성을 가진 객체입니다:editor- Diagram Editor의 객체입니다control- 컴포넌트의 기반이 되는 CheckboxGroup Form 컨트롤의 객체입니다value- Diagram 항목의 값입니다
$layout- (선택 사항) - 컨트롤의 구조를 설정할 수 있는 콜백 함수입니다. CheckboxGroup Form 컨트롤의 구성을 반환합니다. 다음 매개변수와 함께 호출됩니다:object- 서비스 속성이 제외된 컨트롤의 구성입니다
Checkbox 속성
id- (선택 사항) 컨트롤의 id입니다. 설정하지 않으면 자동으로 생성됩니다text- (선택 사항) Checkbox의 텍스트 레이블입니다value- (선택 사항) Checkbox의 값입니다css- (선택 사항) 컨트롤에 스타일 클래스를 추가합니다disabled- (선택 사항) 컨트롤의 활성화(false) 또는 비활성화(true) 여부를 정의합니다. 기본값은 false입니다hidden- (선택 사항) Checkbox의 숨김 여부를 정의합니다. 기본값은 false입니다height- (선택 사항) 컨트롤의 높이입니다. 기본값은"content"입니다width- (선택 사항) 컨트롤의 너비입니다. 기본값은"content"입니다padding- (선택 사항) 셀과 Checkbox 컨트롤 테두리 사이의 여백을 설정합니다
예제
const editor = new dhx.DiagramEditor("editor_container", {
type: "default",
view: {
editbar: {
properties: {
$shape: [
{
type: "checkboxGroup",
label: "Select products",
key: "products",
options: {
rows: [
{ id: "diagram", text: "DHTMLX Diagram", value: "diagram" },
{ id: "suite", text: "DHTMLX Suite", value: "suite" },
{ id: "gantt", text: "DHTMLX Gantt" },
{ id: "spreadsheet", text: "DHTMLX Spreadsheet", disabled: true }
]
}
}
]
}
}
}
});
editor.parse([
{
"type": "rectangle",
"products": {
"diagram": "diagram",
"suite": "",
"gantt": true,
"spreadsheet": false
}
}
]);