RealGrid HELPA32 column.DynamicStyles
들어가며
이번 강좌에서는 A31 DynamicStyle 개요 에서 배워보았던 column.dynamicStyles에 대하여 조금 더 자세히 배워보도록 하겠습니다.
이론
이전 강좌에서 설명하였듯이 컬럼 다이나믹 스타일은 스타일을 적용한 해당 컬럼에만 적용이 됩니다.
컬럼셀 자기 자신의 값을 기준으로 하여 스타일을 적용할 수도 있고 다른 컬럼의 값을 참조하여 스타일을 적용할 수도 있습니다.
여기서 중요한 것은 다이나믹 스타일이 적용된 해당 컬럼의 스타일만 바꿀 수 있지 다른 컬럼의 스타일은 바꿀 수 없습니다.
아래와 같은 컬럼이 정의되어 있다고 할때 컬럼 다이나믹 스타일의 예제를 만들어 보면서 배워보도록 하겠습니다.
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
}];
실습
이전 강좌에서 말했듯이 다이나믹 스타일을 적용하는 방법은 두가지가 있습니다. criteria, function(){} 이 둘 중 편한 방법을 선택하여 사용하시면 됩니다. 적용할 수 있는 criteria들은 Expression 에서 Column Dynamic Styles 을 확인하세요.
-
직업 컬럼에 다이나믹 스타일을 적용(자기 컬럼의 값을 참조) - 배경색을 직업이 ‘가수’ 이면 녹색이고 편집불가, ‘배우’ 이거나 ‘회사원’이면 파랑색으로 표시
조건식이 두개인 경우 () 부분을 주의하세요. Expression 참조.var columns = [{ name: "col1", fieldName: "field1", header : { text: "직업" }, width : 60, dynamicStyles: [{ criteria: "value = '가수'", //자기 자신의 값이 '가수'이면.. styles: { background: "#ff00ff00", editable: false } }, { criteria: "(value = '배우') or (value = '회사원')", //자기 자신의 값이 '배우' 이거나 '회사원'이면.. styles: { background: "#ff0000ff" } }] }, { ... 생략 ... }]; - 성별 컬럼에 다이나믹 스타일을 적용(다른 컬럼의 값을 참조) - 직업 컬럼의 값이 ‘가수’ 이면 녹색이고 편집불가, ‘배우’ 이거나 ‘회사원’이면 파랑색으로 표시
var columns = [{ ... 생략 ... }, { name: "col2", fieldName: "field2", header : { text: "성별" }, width: 50, dynamicStyles: [{ criteria: "values['field1'] = '가수'", //field1 값이 '가수'이면.. styles: { background: "#ff00ff00", editable: false } }, { criteria: "(values['field1'] = '배우') or (values['field1'] = '회사원')", //field1 값이 '배우' 이거나 '회사원'이면.. styles: { background: "#ff0000ff" } }] }, { ... 생략 ... }]; - 이름 컬럼에 다이나믹 스타일을 적용 - function()을 사용하여 성적의 평균값이 90점 미만면 노란색, 90이상이면 녹색녹색이고 편집불가
var columns = [{ ... 생략 ... }, { name: "col3", fieldName: "field3", header : { text: "이름" }, width: 80, dynamicStyles: function(grid, index, value) { var sum = grid.getValue(index.itemIndex, "field4") + grid.getValue(index.itemIndex, "field5") + grid.getValue(index.itemIndex, "field6"); var avg = sum / 3; if (avg >= 90) { return { background:"#ff00ff00", editable: false }; } else { return { background:"#ffffff00" }; } } }, { ... 생략 ... }];
실행화면
-
직업 컬럼의 배경색을 직업이 ‘가수’ 이면 녹색, ‘배우’ 이거나 ‘회사원’이면 파랑색으로 표시
-
성별 컬럼의 배경색을 직업 컬럼의 값이 ‘가수’ 이면 녹색, ‘배우’ 이거나 ‘회사원’이면 파랑색으로 표시
-
이름 컬럼의 배경색을 성적의 평균값이 90점 미만면 노란색, 90이상이면 녹색으로 표시
전체 소스코드
SCRIPT
<script type="text/javascript" src="/script/realgridjs-lic.js"></script>
<script type="text/javascript" src="/script/realgridjs_eval.1.1.31.min.js"></script>
<script type="text/javascript" src="/script/realgridjs-api.1.1.31.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",
dataType: "number"
},
{
fieldName: "field5",
dataType: "number"
},
{
fieldName: "field6",
dataType: "number"
}
];
//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
}
];
//컬럼을 GridView에 입력 합니다.
gridView.setColumns(columns);
var data = [
["배우", "여자", "전도연", "100", "100", "90"],
["가수", "여자", "이선희", "100", "100", "90"],
["회사원", "남자", "홍길동", "60", "65", "95"],
["가수", "남자", "신해철", "100", "95", "90"],
["배우", "여자", "전지현", "95", "100", "90"],
["회사원", "여자", "하니", "80", "85", "80"],
["배우", "여자", "전지현", "95", "100", "90"]
];
dataProvider.setRows(data);
$("#btnStyles1").click(function () {
var columnDynamicStyles1 = [{
criteria: "value = '가수'", //자기 자신의 값이 '가수'이면..
styles: {
background: "#ff00ff00"
}
}, {
criteria: "(value = '배우') or (value = '회사원')", //자기 자신의 값이 '배우' 이거나 '회사원'이면..
styles: {
background: "#ff0000ff"
}
}];
gridView.setColumnProperty("col1", "dynamicStyles", columnDynamicStyles1);
});
$("#btnStyles2").click(function () {
var columnDynamicStyles2 = [{
criteria: "values['field1'] = '가수'", //field1 값이 '가수'이면..
styles: {
background: "#ff00ff00"
}
}, {
criteria: "(values['field1'] = '배우') or (values['field1'] = '회사원')", //field1 값이 '배우' 이거나 '회사원'이면..
styles: {
background: "#ff0000ff"
}
}];
gridView.setColumnProperty("col2", "dynamicStyles", columnDynamicStyles2);
});
$("#btnStyles3").click(function () {
var columnDynamicStyles3 = function(grid, index, value) {
var sum = grid.getValue(index.itemIndex, "field4") +
grid.getValue(index.itemIndex, "field5") +
grid.getValue(index.itemIndex, "field6");
var avg = sum / 3;
if (avg >= 90) {
return {
background:"#ff00ff00"
};
} else {
return {
background:"#ffffff00"
};
}
};
gridView.setColumnProperty("col3", "dynamicStyles", columnDynamicStyles3);
});
});
</script>
HTML
1. 직업 컬럼의 배경색을 직업이 '가수' 이면 녹색, '배우' 이거나 '회사원'이면 파랑색으로 표시
<button type="button" class="btn btn-primary btn-xs" id="btnStyles1" > 버튼을 클릭하면 스타일이 적용됨
2. 성별 컬럼의 배경색을 직업 컬럼의 값이 '가수' 이면 녹색, '배우' 이거나 '회사원'이면 파랑색으로 표시
<button type="button" class="btn btn-primary btn-xs" id="btnStyles2" > 버튼을 클릭하면 스타일이 적용됨
3. 이름 컬럼의 배경색을 성적의 평균값이 90점 미만면 노란색, 90이상이면 녹색으로 표시
<button type="button" class="btn btn-primary btn-xs" id="btnStyles3" > 버튼을 클릭하면 스타일이 적용됨
참조