RealGrid HELPC3 짝수, 홀수 행의 스타일을 다르게 표현하기
들어가며
이번 강좌에서는 그리드에 표현되는 짝/홀수 행의 색상을 다르게 표현하는 것을 배워보겠습니다.
이론
RealGrid의 스타일은 경우에 따라 매우 복잡하고 어렵다고 생각될 수도 있습니다. 하지만, 그 만큼 세부적인 요소까지 디자인 할 수 있다는 의미이며, 다음 세가지 내용을 잘 이해한다면 어렵지 않게 디자인 할 수 있습니다.
그리드 컴포넌트의 UI와 관련된 주요한 요구사항 중 하나가 실행 시간에 셀의 값 등에 따라 표시 방식을 바꿔야 하는 것입니다. 대개의 기본적인 처리 방식은 이벤트 핸들러를 이용하는 것인데, RealGrid에서는 DynamicStyle 이라는 방식을 적극 사용합니다.
이번 강좌에서는 Dynamic Style을 사용하여 짝수행과 홀수행의 스타일을 다르게 지정해 보겠습니다.
다이나믹 스타일(Dynamic Style) 사용법
다이나믹 스타일은 셀의 값이나 행의 상태 등의 값을 사용할 수 있는 판정식(criteria)에 따라 스타일 속성들을 지정할 수 있습니다. 각각의 데이터 컬럼에 하나 이상의 동적 스타일을 지정할 수 있고, 그리드에는 행단위의 동적 스타일 셋을 지정할 수 있습니다. 이 동적 스타일들은 셀을 그리는 시점에 셀 렌더러에게 전달됩니다.
그리드에 스타일 지정하는 방법
GridView.setStyles()를 사용하여 각 영역별로 스타일(다이나믹 스타일 포함)을 적용할 수 있습니다.
다이나믹 스타일 제거하는 방법
적용된 스타일을 제거하려면 아래와 같이 setStyles()함수를 이용해 body의 dynamicStyles속성에 빈 배열값을 입력하면 됩니다.
gridView.setStyles({
body:{
dynamicStyles:[]
}
});
짝수행과 홀수행을 구분하기 위한 판정식
- 짝수행:
criteria:"(row mod 2) = 0" - 홀수행:
criteria:"(row mod 2) = 1"
실습
실습에서는 짝/홀수 행에 각각 배경색을 변경해보고 홀수행에서는 글자색까지 변경해보도록 하겠습니다.
-
버튼을 클릭하면 setStyle()을 사용하여 body영역에 다이나믹 스타일을 적용합니다.
//다이나믹 스타일 적용 $("#btnSetDynamicStyles").click(function () { gridView.setStyles({ body:{ dynamicStyles:[{ criteria:"(row mod 2) = 0", styles:{ background:"#FFC9DAF8" } }, { criteria:"(row mod 2) = 1", styles:{ background:"#FF073763", foreground:"#FFFFFFFF" } }] } }); }); -
버튼을 클릭하면 body영역의 다이나믹 스타일을 제거합니다.
//body영역의 다이나믹 스타일 제거 $("#btnClearStyles").click(function () { gridView.setStyles({ body:{ dynamicStyles:[] } }); });
실행화면
-
버튼 클릭 후 짝수행과 홀수행의 스타일이 각각 변경된 것을 확인하세요.
-
버튼 클릭 후 그리드에 적용된 다이나믹 스타일이 제거된 것을 확인하세요.
전체 소스코드
SCRIPT
<link rel="stylesheet" href="/css/bootstrap.css">
<script type="text/javascript" src="/script/jquery-1.11.2.min.js"></script>
<script type="text/javascript" src="/script/bootstrap.min.js"></script>
<!--realgrid-->
<script type="text/javascript" src="/script/realgridjs-lic.js"></script>
<script type="text/javascript" src="/script/realgridjs_eval.1.0.14.min.js"></script>
<script type="text/javascript" src="/script/realgridjs-api.1.0.14.js"></script>
<script>
var gridView;
var dataProvider;
$(document).ready( function(){
RealGridJS.setTrace(false);
RealGridJS.setRootContext("/script");
dataProvider = new RealGridJS.LocalDataProvider();
gridView = new RealGridJS.GridView("realgrid");
gridView.setDataSource(dataProvider);
//다섯개의 필드를 가진 배열 객체를 생성합니다.
var fields = [
{
fieldName: "field1"
},
{
fieldName: "field2"
},
{
fieldName: "field3"
},
{
fieldName: "field4"
},
{
fieldName: "field5"
},
{
fieldName: "field6"
},
{
fieldName: "field7"
},
{
fieldName: "field8"
},
{
fieldName: "field9"
},
{
fieldName: "field10"
}
];
//DataProvider의 setFields함수로 필드를 입력합니다.
dataProvider.setFields(fields);
//필드와 연결된 컬럼 배열 객체를 생성합니다.
var columns = [
{
name: "col1",
fieldName: "field1",
header : {
text: "직업"
},
width : 60
},
{
name: "col2",
fieldName: "field2",
header : {
text: "성별"
},
width: 50
},
{
name: "col3",
fieldName: "field3",
header : {
text: "이름"
},
width: 80
},
{
name: "col4",
fieldName: "field4",
header : {
text: "국어"
},
width: 80
},
{
name: "col5",
fieldName: "field5",
header : {
text: "수학"
},
width: 80
},
{
name: "col6",
fieldName: "field6",
header : {
text: "민법"
},
width: 80
},
{
name: "col7",
fieldName: "field7",
header : {
text: "한국사"
},
width: 80
},
{
name: "col8",
fieldName: "field8",
header : {
text: "영어"
},
width: 80
},
{
name: "col9",
fieldName: "field9",
header : {
text: "과학"
},
width: 80
},
{
name: "col10",
fieldName: "field10",
header : {
text: "사회"
},
width: 80
}
];
//컬럼을 GridView에 입력 합니다.
gridView.setColumns(columns);
var data = [
["가수", "여자", "정수라", "80", "99", "90", "90", "100", "100", "90"],
["배우", "여자", "송윤아", "10", "33", "90", "70", "60", "100", "80"],
["배우", "여자", "전도연", "20", "22", "90", "70", "60", "100", "80"],
["가수", "여자", "이선희", "40", "33", "90", "70", "60", "100", "80"],
["배우", "여자", "하지원", "10", "11", "90", "70", "60", "100", "80"],
["가수", "여자", "소찬휘", "30", "55", "90", "70", "60", "100", "80"],
["가수", "여자", "박정현", "40", "22", "90", "70", "60", "100", "80"],
["배우", "여자", "전지현", "20", "44", "90", "70", "60", "100", "80"]
];
dataProvider.setRows(data);
//다이나믹 스타일 적용
$("#btnSetDynamicStyles").click(function () {
gridView.setStyles({
body:{
dynamicStyles:[{
criteria:"(row mod 2) = 0",
styles:{
background:"#FFC9DAF8"
}
}, {
criteria:"(row mod 2) = 1",
styles:{
background:"#FF073763",
foreground:"#FFFFFFFF"
}
}]
}
});
});
//body영역의 다이나믹 스타일 제거
$("#btnClearStyles").click(function () {
gridView.setStyles({
body:{
dynamicStyles:[]
}
});
});
});
</script>
HTML
<button type="button" class="btn btn-primary btn-xs" id="btnSetDynamicStyles">짝/홀수 행에 다이나믹 스타일 적용하기</button> <button type="button" class="btn btn-primary btn-xs" id="btnClearStyles">body영역의 다이나믹 스타일 제거</button> <div id="realgrid" style="width: 100%; height: 300px;"></div>
참조