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

행 및 열 상태

SpreadJS는 행 및 열의 현재 상태에 따라 스타일을 구성할 수 있도록 지원하며 GC.Spread.Sheets.RowColumnStates 열거형을 사용하여 모든 상태를 설정할 수 있습니다.

ConditionalFormatting.RuleType 열거형 옵션에서 rowStateRule 또는 columnStateRule 을 사용한 후, 규칙을 추가하여 상태를 지정할 수 있습니다.

행 및 열 상태는 조건부 서식을 기반으로 하므로, ConditionalFormats 클래스의 addRowStateRule및 addColumnStateRule 메서드를 사용하여 행 및 열 상태를 추가할 수도 있습니다.


참고 : 행 및 열 상태는 조건부 서식 범위의 이동 또는 복사를 지원하지 않습니다.

상태 유형

다음 표는 GC.Spread.Sheets.RowColumnStates 에서 사용할 수 있는 모든 행 및 열 상태 열거형 옵션을 설명합니다.

열거형 옵션

설명

edit

셀을 편집할 때, 지정된 행 또는 열을 edit 상태로 실행합니다.

hover

셀 위에 마우스를 올릴 때, 지정된 행 또는 열을 hover 상태로 실행합니다.

active

셀이 포커스를 가질 때, 지정된 행 또는 열을 active 상태로 실행합니다.

selected

셀이 선택되었을 때, 지정된 행 또는 열을 selected 상태로 실행합니다.

updated

셀이 업데이트될 때, 보호된 시트에서 해당 행 또는 열을 잠급니다.

inserted

셀이 삽입될 때, 보호된 시트에서 해당 행을 잠급니다.

dirty

셀 상태가 dirty로 설정되면, 해당 행 또는 열을 dirty 상태로 실행합니다.

이 상태는 시트 데이터의 변경 사항을 쉽게 추적할 수 있도록 합니다.

invalid

셀이 invalid로 설정되면, 해당 행 또는 열을 invalid 상태로 실행합니다.

상태 우선순위

같은 방향(행 또는 열) 및 같은 범위에 대해 여러 상태가 설정된 경우, 지정된 행이나 열이 동시에 여러 상태에 해당되면 우선순위가 높은 상태의 스타일이 적용됩니다.

상태 적용 우선순위는 다음과 같습니다:

Edit > Hover > Active > Selected > Updated > Inserted > Dirty > Invalid.

다음 코드 샘플은 ConditionalFormats 클래스 메서드를 사용하거나 새 상태 규칙을 추가하여 행 및 열 상태를 설정하는 방법을 보여줍니다.

$(document).ready(function () {
    // 시트 수를 3으로 설정
    var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), { sheetCount: 3 });
    var sheet = spread.getSheet(0);

    // 새 상태 규칙 사용
    var cfs = sheet.conditionalFormats;            
    var ruleType = GC.Spread.Sheets.ConditionalFormatting.RuleType.rowStateRule;
    var hoverstate = GC.Spread.Sheets.RowColumnStates.hover;
    var style = new GC.Spread.Sheets.Style("yellow");
    var ranges = [new GC.Spread.Sheets.Range(-1, -1, -1, -1)];
    var rule = new GC.Spread.Sheets.ConditionalFormatting.StateRule(ruleType, hoverstate, style, ranges);
    cfs.addRule(rule);

    // 또는
    
    // ConditionalFormats 클래스 메서드 사용
    var cfs1 = sheet.conditionalFormats;
    var style1 = new GC.Spread.Sheets.Style("lightblue");
    var columnRange = [new GC.Spread.Sheets.Range(-1, -1, -1, -1)];
    cfs1.addColumnStateRule(GC.Spread.Sheets.RowColumnStates.selected, style1, columnRange); // 열 상태 추가

    var cfs2 = sheet.conditionalFormats;
    var style2 = new GC.Spread.Sheets.Style("pink");
    var rowRange2 = [new GC.Spread.Sheets.Range(-1, -1, -1, -1)];
    cfs2.addRowStateRule(GC.Spread.Sheets.RowColumnStates.dirty, style2, rowRange2); // 행 상태 추가
});

연속되지 않은 범위에 여러 스타일 적용

SpreadJS에서는 워크시트에서 행 또는 열 상태를 설정할 때 연속되지 않은 범위(non-contiguous ranges) 에도 여러 가지 스타일을 적용할 수 있습니다.

range-state-styling.gif

ConditionalFormats 클래스의 addRowStateRule또는 addColumnStateRule 메서드를 사용하면, 행/열 상태, 적용할 스타일, 셀 범위를 매개변수로 받아 설정할 수 있습니다.

이 상태 규칙 메서드는 단일 범위에는 하나의 스타일을 허용하지만, 여러 범위에는 스타일 배열을 사용하여 여러 스타일을 적용할 수 있습니다.

다음 코드 샘플은 셀 hover 시 연속되지 않은 범위에 여러 스타일을 적용하는 방법을 보여줍니다.

// 샘플 코드
var state = GC.Spread.Sheets.RowColumnStates.hover;
var style1 = new GC.Spread.Sheets.Style("green"), style2 = new GC.Spread.Sheets.Style("red");
var range1 = new GC.Spread.Sheets.Range(1, 1, 10, 5), range2 = new GC.Spread.Sheets.Range(1, 7, 10, 5);
sheet.conditionalFormats.addRowStateRule(
    state,
    [style1, style2],
    [range1, range2]
);

addRowStateRule 또는 addColumnStateRule 메서드를 사용할 때는 스타일과 범위를 1:1로 매핑해야 하며, 매핑되지 않은 스타일 또는 범위는 렌더링 시 무시됩니다.

  • 참고: 이 기능은 insert 상태 및 TableSheets 기능에서는 지원되지 않습니다.