SMART datagrid v1.4 > Examples
그리드는 데이터를 표시하는 유저 인터페이스(UI) 컴포넌트로서, 정확하고 효과적으로 데이터를 그려내는 것이 가장 중요한 기능이라고 할 수 있다. SMART datagrid는 GridStyles 객체에 설정되는 스타일 속성들이 그리드를 구성하는 셀들을 렌더링하는 시점에 적용되도록 한다. 배경색과 글자색을 포함해서 GridStyles는 분별있게 데이터를 표현하는 데 충분한 속성들을 가지고 있다.
그리드셀에 GridStyles를 적용하는 방법은 여러가지가 있는데, 이 번 예제에서는 컬럼별로 스타일을 설정하는 가장 기본적인 방법을 살펴본다.
컬럼에 설정되는 스타일은 컬럼에 포함되는 데이터셀들의 기본 스타일이 된다. 각각의 컬럼은 생성시 내부적으로 GridStyles 객체를 하나 생성해서 유지하고, styles 속성으로 접근할 수 있도록 한다. 대개 기본 스타일은 컬럼 생성 시점에 미리 설정한다.
var columns = [{
"fieldName": "product_id",
"styles": {
"background": "#3000ff00"
},
...
},
..., {
"fieldName": "unit_price",
"width": "100",
"styles": {
"color": "#880000",
"prefix": "$",
"textAlignment": "far"
}
}];
grid.setColumns(columns);
위 코드에서는 background, color 색상 속성과, textAlignment로 텍스트의 위치를 지정하고 있다. 또, prefix은 실제 값 앞쪽에 표시할 문자열을 지정하는 속성이다.
GridStyles는 색상 속성들 외에 숫자형이나 날짜형의 값의 표시 형식을 지정할 수 있는 속성을 가지고 있다. GridStyles의 속성들에 대해서는 GridStyles 토픽과 background와 같은 속성들의 토픽을 자세히 참조한다.
var columns = [{
"styles": {
"background": "#555",
"color": "#fff",
"numberFormat": "#,##0.00",
"textAlignment": "far"
},
...
},
...,{
"styles": {
"datetimeFormat": "yyyy-MM-dd",
"textAlignment": "center"
}
}];
위 코드에서는 numberFormat과 datetimeFormat 속성을 사용한다. 각각 숫자형과 날짜형 필드의 값을 표시하는 형식을 지정할 수 있도록 한다.
컬럼에 미리 스타일 값들을 설정하는 것 외에, 필요한 시점에 스타일 속성들을 직접 변경할 수도 있다.
btnFontLarger_click: function (ev) {
var column = grdMain.focusedIndex().column;
var size = column.styles().fontSize();
column.styles().setFontSize(Math.min(20, size + 1));
},
btnFontSmaller_click: function (ev) {
var column = grdMain.focusedIndex().column;
var size = column.styles().fontSize();
column.styles().setFontSize(Math.max(5, size - 1));
}