SMART datagrid v1.4 > Examples
컬럼 스타일 예제에서 컬럼 스타일을 지정하는 기본적인 방법을 알아보고, 셀 렌더러 예제에서 한 두 가지 렌더러를 다루어 보았는데, 그 것들만으로는 데이터를 효과적으로 표현하기에 부족할 수 있고, 컬럼 기준의 스타일 외에 행 별 스타일 지정 즉, 값에 따른 스타일 지정이 필요하다.
하지만, 그리드에 로드되거나 추가되는 행의 개수는 이론적으로는 제한이 없으므로, 행과 컬럼으로 조합되는 상당히 많아질 수 있는 셀 단위로 스타일을 지정하는 것은 성능상으로도 불가능한 일이 된다. 또한, 그리드는 초기 로드된 데이터로 고정되는 것이 아니라 사용자 입력 등으로 값이 항상 변할 수 있으므로, 변화하는 값들에 동적으로 대응할 수 있어야 한다.
SMART datagrid에는 값이나 행의 상태에 따른 스타일 값을 지정하는 몇 가지 방법이 있는데, 이 번 예제에서는 가장 간편한 방법을 알아 보기로 한다.
동적 스타일을 지정하는 가장 간단한 방법은 컬럼의 dynamicStyles 속성을 설정하는 것이다. 하나의 dynamic style은 스타일을 적용할 지 여부를 결정하는 판단식(expression)과 스타일 속성들로 구성된다.
{
"name": "OrderDate",
"fieldName": "order_date",
"dynamicStyles": [{
"expression": "value >= date('2015-01-01')",
"styles": {
"background": "#100000ff",
"color": "#ff000088"
}
}],
...
}
주문일 컬럼은 날짜형 필드 order_date에 연결되어 있는데, 판정식에서 셀의 값이 특정한 날짜보다 나중이면 background, color를 다르게 표시하도록 하고 있다. 판정식에서 value는 지금 그려지는 셀의 값을, date는 우측의 ISO-8601 문자열을 Date 값으로 변환하는 연산자이다.
위의 코드에서 보이는 것처럼 dynamicStyles은 배열 속성이므로 하나 이상의 동적 스타일을 지정할 수 있는데, 셀 마다 모든 판정식을 계산해서 true를 리턴하는 속성들을 모두 반영한다. 다른 값들에 대해 같은 속성값을 지정하는 경우라면 순서가 중요해진다.
{
"name": "UnitPrice",
"fieldName": "unit_price",
"dynamicStyles": [{
"expression": "value > 500",
"styles": {
"background": "#10000000"
}
}, {
"expression": "value > 700",
"styles": {
"background": "#20000000"
}
}, {
"expression": "value > 800",
"styles": {
"background": "#30000000"
}
}],
...
}
위 코드에서 모두 값에 따라 background 속성을 지정하고 있는데, 만일 "500, 700, 800"이 아니라 "800, 700, 500" 순서대로 지정한다면, 원하는 결과를 얻을 수 없을 것이다.
대개 이렇게 나열하는 방식은 판정식에 따라 다른 속성 값들을 설정할 때 유용하다. 위의 예처럼 한 가지 종류의 판단식에 같은 속성들을 지정해야 한다면 아래 코드처럼 DynamicStyleCase을 사용해야 한다.
{
"name": "Quantity",
"fieldName": "quantity",
"dynamicStyles": [{
"expressions": [
"value > 700",
"value > 500",
"value > 300"
],
"styles": [
{
"shapeName": "uparrow",
"shapeColor": "#ff0000"
}, {
"shapeColor": "#0000ff"
}, {
"shapeColor": "#008800"
}
]
}],
...
}
expressions가 배열로 설정되면 그리드는 DynamicStyle 대신 DynamicStyleCase 객체를 생성한다. DynamicStyleCase은 expressions로 지정된 판정식들 중 true를 리턴하는 것이 있으면 그 판정식에 해당하는 스타일들을 지정하고 더 이상 진행하지 않는다.