[]
DEMOS DOC DESIGNER API
DOWNLOAD
(Showing Draft Content)

테이블 시트 규칙

테이블 시트는 데이터의 변화를 강조하고 시각화하며 입력되는 데이터의 유형을 제어할 수 있도록 다양한 데이터 규칙을 지원합니다.

조건부 서식 및 데이터 유효성 검사

테이블 시트는 테이블 시트 뷰에서 데이터 기반 조건부 서식 및 데이터 유효성 검사를 지원합니다.




conditionalFormat 및 validator 속성을 뷰 열 정보 정의 시 지정할 수 있습니다. 이 속성들은 아래 표에 나열된 다양한 유형의 규칙 옵션 배열을 허용합니다.

테이블 시트에서 지원되는 조건부 서식 및 데이터 유효성 검사 유형은 다음과 같습니다.

속성

유형

조건부 서식 (Conditional Format)

AverageRule

CellValueRule

DataBarRule

DateOccuringRule

DuplicateRule

FormulaRule

IconSetRule

SpecificTextRule

ThreeScaleRule

Top10Rule

TwoScaleRule

UniqueRule

데이터 유효성 검사 (Data Validator)

DateValidator

FormulaListValidator

FormulaValidator

ListValidator

NumberValidator

TextLengthValidator

TimeValidator

다음 코드 샘플은 테이블 시트에서 조건부 서식 및 데이터 유효성 검사를 적용하는 방법을 보여줍니다.

// 조건수 서식 적용을 위한 수식 정의
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" 아이콘이 어떻게 표시되는지 보여줍니다.

tablesheetrule-code

다음 이미지는 readonly 아이콘에서 removeStyleRule 메서드를 적용한 후 테이블 시트의 모습을 보여줍니다.

after-removerule

SpreadJS 디자이너 사용하기

SpreadJS 디자이너의 열 설정(Column Setting) 탭을 사용하여 열 머리글에 사전 정의된 규칙을 지정할 수 있습니다.

set-rule

다음 이미지는 테이블 시트의 열 머리글에 규칙이 표시되는 모습을 보여줍니다.

tablesheet-rule (1)

규칙을 적용한 후 SpreadJS 디자이너의 테이블 시트 디자인(Table Sheet Design) 탭을 사용하여 테이블 시트의 규칙을 스타일링할 수 있습니다.

style-rules

규칙을 스타일링하는 단계는 다음과 같습니다:

  1. 테이블 시트 디자인(Table Sheet Design) 탭에서 상태 규칙(State Rules) 옵션을 클릭하여 상태 규칙 관리(Manage State Rules) 대화 상자를 엽니다.


    manage-state-rules

  2. 열 머리글에 규칙을 적용할 적절한 옵션을 선택합니다.

  3. 선택된 열 머리글을 스타일링하려면, 새 규칙(New Rule) 버튼을 사용하여 새 규칙을 만들거나 기존 규칙을 편집하여 열 머리글에 할당할 수 있습니다.

  4. Style 열의 image.e76e7c.png 아이콘을 사용하여 셀 서식(Format Cells) 대화 상자를 열어 언급된 규칙을 편집할 수 있습니다.


    rule-format

  5. 선택한 열 머리글에서 아이콘을 제거하려면 규칙 제거(Remove Rule) 버튼을 사용합니다.

    remove-state-rules