[SpreadJS] 조건부 서식

지난번에 올린 데이터 바인딩 글 내용을 토대로 데이터를 바인딩해서 프로젝트를 진행 중이다.
바인딩한 데이터가 몇 천 건은 되는데 특정 값을 넘기면 표시하는 기능을 구현해야 했다.
해서 이번에는 조건부 서식에 대한 내용을 정리하고자 한다.

---

조건부 서식

• conditionalFormat 을 사용하여 시트에 조건부 서식을 불러옴
• addRule, addSpecificTextRule, addCellValueRule 메서드를 이용하여 조건부 서식 지정
  • addRule(rule) : 조건부 규칙(rule)을 시트에 추가
  • addSpecificTextRule(comparisonOperator, text, style, ranges)
    • comparisonOperator : 조건부 규칙. TextComparisonOperators 형태(아래 조건부 규칙 참고).
    • text : 비교 기준. string 형태.
    • style : 조건에 해당하는 셀에 지정될 스타일. Style 형태.
    • ranges : 조건부 서식을 지정할 셀 범위. Range 형태.
  • addCellValueRule(comparisonOperator, value1, value2, style, ranges)
    • comparisonOperator : 조건부 규칙. ComparisonOperators 형태(아래 조건부 규칙 참고).
    • value1 : 첫 번째 비교 기준. Object 형태.
    • value2 : 두 번째 비교 기준. Object 형태.
    • style : 조건에 해당하는 셀에 지정될 스타일. Style 형태.
    • ranges : 조건부 서식을 지정할 셀 범위. Range 배열 형태.
• getRule, getRules 메서드를 이용해서 설정된 조건부 서식을 불러옴
  • getRule(index) : 지정된 위치(index)에 해당하는 조건부 규칙을 불러옴
  • getRules() : 시트에 지정된 모든 조건부 규칙을 불러옴
• removeRule, removeRuleByRange, clearRule 메서드를 이용하여 조건부 규칙 삭제
  • removeRule(rule) : 특정 조건부 규칙(rule) 삭제
  • removeRuleByRange(row, column, rowCount, columnCount) : 범위 내에 적용된 조건부 규칙 삭제
  • clearRule() : 시트에 지정된 모든 조건부 규칙 삭제

<<코드 예시>>

 

// 시트에 조건부 서식 불러오기
var cfs = sheet.conditionalFormats;
// 조건부 규칙에 해당하는 셀에 지정될 스타일
var style = new GC.Spread.Sheets.Style();
style.backColor = '#CCFFCC';
// 조건부 규칙 지정
var cvRule = cfs.addCellValueRule(GC.Spread.Sheets.ConditionalFormatting.ComparisonOperators.greaterThan, 100, 0, style, [new GC.Spread.Sheets.Range(3, 3, 3, 3)]);
...
// 조건부 규칙 불러오기
var cvRule = cfs.getRule(0);
...
// 조건부 규칙 삭제
cfs.removeRule(cvRule)

 

 

[참고 링크 : SpreadJS 조건부 서식 소개 데모] | [참고 링크 : SpreadJS addSpecificTextRule() API]
[참고 링크 : SpreadJS addCellValueRule() API] | [참고 링크 : SpreadJS removeRuleByRange() API]

소개 | 기능별 학습 | SpreadJS 데모

GC.Spread.Sheets.ConditionalFormatting.ConditionalFormats | JavaScript Spreadsheet | SpreadJS

GC.Spread.Sheets.ConditionalFormatting.ConditionalFormats | JavaScript Spreadsheet | SpreadJS

GC.Spread.Sheets.ConditionalFormatting.ConditionalFormats | JavaScript Spreadsheet | SpreadJS

---

조건부 규칙

• 기본 제공되는 조건부 규칙
  • NormalConditionRule: 셀 값 규칙, 특정 텍스트 규칙, 수식 규칙, 날짜 발생 규칙, 상위 10 규칙, 고유 규칙, 중복 규칙, 평균 규칙
  • ScaleRule: 두 개 혹은 세 개의 눈금 규칙.
  • DataBarRule: 데이터 막대 규칙.
  • IconSetRule: 아이콘 집합 규칙.
• 이외에 제공되는 조건부 규칙. 아래의 속성들을 이용하여 지정할 조건부 규칙 생성 혹은 추가
  • AverageConditionType : 평균값에 대한 규칙.
  • ColorCompareType : 셀의 배경 색에 대한 규칙.
  • ComparisonOperators : 비교 연산에 대한 규칙.(ex. 동일한 값, 사이 값, 이상, 이하...)
  • ConditionType : 서식에 대한 규칙.
  • CustomValueType : 사용자 정의한 값에 대한 규칙.
  • DateCompareType : 날짜 비교에 대한 규칙
  • DateOccurringType : 특정 일자를 기준으로 날짜를 비교하는 규칙
  • GeneralComparisonOperators : 일반적인 연산에 대한 규칙.(ex. 동일한 값, 이상, 이하, 동일하지 않은 값)
  • LogicalOperators : 논리 연산 비교에 대한 규칙
  • QuarterType : 분기에 대한 규칙
  • TextCompareType : 문자 비교에 대한 규칙
  • TextComparisonOperators : 문자 비교 연산에 대한 규칙
  • Top10ConditionType : 상위 10 위에 대한 규칙
• 규칙에 따라 몇 가지 세부적인 설정을 지정해야 함.
• iconSetRule 속성에 의한 조건부 규칙의 경우, icons API를 이용해서 아이콘을 설정

 

[참고 링크 : SpreadJS 조건부 규칙 데모] | [참고 링크 : SpreadJS ConditionalFormatting API]

조건부 규칙 | 기능별 학습 | SpreadJS 데모

GC.Spread.Sheets.ConditionalFormatting | JavaScript Spreadsheet | SpreadJS

결론

시트에 조건부 서식을 지정하기 위해서는 conditionalFormat를 통해 조건부 서식을 불러온 후 조건부 규칙을 상황에 맞게 메서드를 이용하여 추가하면 된다.
지정된 규칙은 기능에 맞는 메서드를 이용하여 불러오기 뿐만 아니라 삭제도 가능하다.
조건부 규칙을 지정하기 위해 사용되는 속성은 여러 가지가 있으며, 속성 별로 조건부 규칙으로써 지정되는 방법이 각각 다르다.