SMART datagrid v1.4 > Examples

Back  Forward

Column Dynamic Styles  Example

컬럼 스타일 예제에서 컬럼 스타일을 지정하는 기본적인 방법을 알아보고, 셀 렌더러 예제에서 한 두 가지 렌더러를 다루어 보았는데, 그 것들만으로는 데이터를 효과적으로 표현하기에 부족할 수 있고, 컬럼 기준의 스타일 외에 행 별 스타일 지정 즉, 값에 따른 스타일 지정이 필요하다. 

하지만, 그리드에 로드되거나 추가되는 행의 개수는 이론적으로는 제한이 없으므로, 행과 컬럼으로 조합되는 상당히 많아질 수 있는 셀 단위로 스타일을 지정하는 것은 성능상으로도 불가능한 일이 된다. 또한, 그리드는 초기 로드된 데이터로 고정되는 것이 아니라 사용자 입력 등으로 값이 항상 변할 수 있으므로, 변화하는 값들에 동적으로 대응할 수 있어야 한다. 

SMART datagrid에는 값이나 행의 상태에 따른 스타일 값을 지정하는 몇 가지 방법이 있는데, 이 번 예제에서는 가장 간편한 방법을 알아 보기로 한다. 

Grid - 1
rows

동적 스타일을 지정하는 가장 간단한 방법은 컬럼의 dynamicStyles 속성을 설정하는 것이다. 하나의 dynamic style은 스타일을 적용할 지 여부를 결정하는 판단식(expression)과 스타일 속성들로 구성된다. 

Code -1
    {
        "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를 리턴하는 속성들을 모두 반영한다. 다른 값들에 대해 같은 속성값을 지정하는 경우라면 순서가 중요해진다. 

Code -2
    {
    	"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을 사용해야 한다. 

Code -3
    {
    	"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를 리턴하는 것이 있으면 그 판정식에 해당하는 스타일들을 지정하고 더 이상 진행하지 않는다. 


소스보기 JSP 

See Also
GridStyles
GridColumn.styles
ColumnStyles
Examples
Row Dynamic Styles
Column Styles