[]
테이블 시트는 데이터의 변화를 강조하고 시각화하며 입력되는 데이터의 유형을 제어할 수 있도록 다양한 데이터 규칙을 지원합니다.
테이블 시트는 테이블 시트 뷰에서 데이터 기반 조건부 서식 및 데이터 유효성 검사를 지원합니다.
conditionalFormat
및 validator
속성을 뷰 열 정보 정의 시 지정할 수 있습니다. 이 속성들은 아래 표에 나열된 다양한 유형의 규칙 옵션 배열을 허용합니다.
테이블 시트에서 지원되는 조건부 서식 및 데이터 유효성 검사 유형은 다음과 같습니다.
속성 | 유형 |
---|---|
조건부 서식 (Conditional Format) |
|
데이터 유효성 검사 (Data Validator) |
|
다음 코드 샘플은 테이블 시트에서 조건부 서식 및 데이터 유효성 검사를 적용하는 방법을 보여줍니다.
// 조건수 서식 적용을 위한 수식 정의
var formulaRule = {
ruleType: "formulaRule",
formula: "@<10",
style: {
backColor: "green",
foreColor: "lime"
}
};
// 데이터 유효성 검사 생성
var positiveNumberValidator = {
type: "formula",
formula: '@>0',
inputTitle: 'Data validation:',
inputMessage: 'UnitPrice cannot be less than 0.',
highlightStyle: {
type: 'icon',
color: "red",
position: 'outsideRight',
}
};
// 테이블 시트에 view 바인딩
myTable.fetch().then(function () {
var view = myTable.addView("myView", [
{ value: "stockItem", width: 300, caption: "Stock Item" },
{ value: "unitPrice", width: 120, caption: "Unit Price", conditionalFormats: [formulaRule], validator: positiveNumberValidator }, // apply conditional formating and data validation here
{ value: "taxRate", width: 120, caption: "Tax Rate" },
{ value: "=([@unitPrice] * [@taxRate])/100 + [@unitPrice]", caption: "Total Price", width: 150 }
]);
sheet.setDataView(view);
});
Style Rules는 조건이 충족되었을 때 적용되는 스타일입니다.GC.Data.View
클래스의 addStyleRule
메서드를 사용하여 상태 규칙(state rule)과 수식 규칙(formula rule)을 추가할 수 있으며, 또는 addView
메서드의 viewOptions
매개변수를 정의하여 GC.Data.RowColumnStates
열거형을 사용해 데이터 매니저 테이블에 뷰를 추가할 수도 있습니다.
또한 스타일 규칙을 구현할 보기 영역(view area)으로 viewport
또는 colHeader
를 선택할 수 있습니다.
State Rule – 행 또는 열 상태가 트리거될 때 스타일을 적용합니다. 예를 들어, 마우스가 행 위에 있을 때 회색 배경색으로 강조하거나 아래 이미지와 같이 선택된 열을 강조할 수 있습니다:
Formula Rule – 특정 조건을 만족하는 값에 스타일을 적용합니다. 예를 들어, 제품의 낮은 가격을 강조하려는 경우 "@UnitPrice<10"과 같은 수식을 설정하고 다른 전경색을 지정할 수 있습니다.:
다음 코드 샘플은 테이블 시트에서 state rule과 formula rule을 모두 적용하는 방법을 보여줍니다.
// 수식 규칙 설정
var formulaRule = {
ruleType: "formulaRule",
formula: "@<=10",
style: {
borderLeft: { color: "orange", style: "medium" },
borderRight: { color: "orange", style: "medium" },
borderTop: { color: "orange", style: "medium" },
borderBottom: { color: "orange", style: "medium" }
}
};
// 테이블 시트를 뷰에 바인딩
var myView = productTable.addView("myView", [
{ value: "Id", caption: "ID" },
{ value: "ProductName", caption: "Name", width: 400 },
{ value: "ReorderLevel", caption: "ReorderLevel", width: 120 },
{ value: "UnitPrice", caption: "Unit Price", width: 100, readonly: true, conditionalFormats: [formulaRule] },
{ value: "UnitsInStock", caption: "Units In Stock", width: 100 },
{ value: "UnitsOnOrder", caption: "Units On Order", width: 100 }
]);
// addStyleRule 메서드를 통해 규칙 추가
myView.addStyleRule("lowPrice", { backColor: "green", foreColor: "white" }, {
formula: "[@UnitPrice] <= 10"
});
myView.addStyleRule("HoverStyle", { backColor: "gray", foreColor: "white" }, {
area: GC.Data.ViewArea.colHeader,
direction: GC.Data.StateRuleDirection.row,
state: GC.Data.RowColumnStates.hover
});
myView.addStyleRule("SelectedStyle", { backColor: "yellow", foreColor: "red" }, {
area: GC.Data.ViewArea.colHeader,
direction: GC.Data.StateRuleDirection.column,
state: GC.Data.RowColumnStates.selected
})
myView.fetch().then(function () {
sheet.setDataView(myView);
});
상태 유형
다음 표는 GC.Data.RowColumnStates에서 사용할 수 있는 모든 행 및 열 상태 열거형 옵션을 나열합니다.
열거형 값 | 설명 |
---|---|
active | 행 또는 열이 포커스를 받을 때, 해당 상태에 "active"가 포함됩니다. |
dirty | 셀 값이 변경되면, 셀 행 및 열 상태에 "dirty"가 포함됩니다. |
hover | 마우스가 행 또는 열 위에 있을 때, 해당 상태에 "hover"가 포함됩니다. |
inserted | 행이 삽입되면, 해당 상태에 "inserted"가 포함됩니다. 이 상태는 행에만 지원됩니다. |
pin | 행/열을 고정하면, 해당 상태에 "pin"이 포함됩니다. |
primaryKey | 열이 기본 키를 가지고 있는 경우, 해당 상태에 "primaryKey"가 포함됩니다. 이 상태는 열에만 지원됩니다. |
readonly | 열이 잠겨 있는 경우, 해당 상태에 "readonly"가 포함됩니다. 이 상태는 열에만 지원됩니다. |
required | 열의 값이 필수인 경우, 해당 상태에 "required"가 포함됩니다. 이 상태는 열에만 지원됩니다. |
selected | 셀이 선택 범위 내에 있을 경우, 셀 행 및 열 상태에 "selected"가 포함됩니다. |
updated | 행이 업데이트된 경우, 해당 상태에 "updated"가 포함됩니다. 이 상태는 행에만 지원됩니다. |
SpreadJS를 사용하여 기본 규칙을 업데이트하거나 제거할 수도 있습니다.
다음 코드 샘플은 readonly 상태 아이콘을 업데이트하는 방법을 보여줍니다.
// readonly 상태 아이콘 업데이트
view.addStyleRule("readonly", {
decoration: {
icons: [
{
src: 'readonly.png'
}
]
}
}, {
area: GC.Data.ViewArea.colHeader,
direction: GC.Data.StateRuleDirection.column,
state: GC.Data.RowColumnStates.readonly
});
다음 코드 샘플은 readonly 아이콘의 스타일 규칙을 제거하는 방법을 보여줍니다.
// readonly 상태 아이콘 삭제
view.removeStyleRule("readonly");
다음 이미지는 테이블 시트 열 머리글에 "Is Primary Key", "Read Only" 및 "IsRequired" 아이콘이 어떻게 표시되는지 보여줍니다.
다음 이미지는 readonly 아이콘에서 removeStyleRule 메서드를 적용한 후 테이블 시트의 모습을 보여줍니다.
SpreadJS 디자이너의 열 설정(Column Setting) 탭을 사용하여 열 머리글에 사전 정의된 규칙을 지정할 수 있습니다.
다음 이미지는 테이블 시트의 열 머리글에 규칙이 표시되는 모습을 보여줍니다.
규칙을 적용한 후 SpreadJS 디자이너의 테이블 시트 디자인(Table Sheet Design) 탭을 사용하여 테이블 시트의 규칙을 스타일링할 수 있습니다.
규칙을 스타일링하는 단계는 다음과 같습니다:
테이블 시트 디자인(Table Sheet Design) 탭에서 상태 규칙(State Rules) 옵션을 클릭하여 상태 규칙 관리(Manage State Rules) 대화 상자를 엽니다.
열 머리글에 규칙을 적용할 적절한 옵션을 선택합니다.
선택된 열 머리글을 스타일링하려면, 새 규칙(New Rule) 버튼을 사용하여 새 규칙을 만들거나 기존 규칙을 편집하여 열 머리글에 할당할 수 있습니다.
열의 아이콘을 사용하여 셀 서식(Format Cells) 대화 상자를 열어 언급된 규칙을 편집할 수 있습니다.
선택한 열 머리글에서 아이콘을 제거하려면 규칙 제거(Remove Rule) 버튼을 사용합니다.