RealGrid HELPC17 Footer를 특정 조건에 맞게 계산하기.
들어가며
이번 강좌에서는 특정 조건에 맞는 데이터만 계산하여 Footer에 표시하는 방법을 배워보도록 하겠습니다.
이론
그리드의 Column Footer에는 Text나 Number Field의 sum, avg, min, max, count 등 특정 연산에 대한 것만 표시할 수 있습니다. (※ Expression 참조)
업무 화면을 개발하다 보면 Footer에 특정 조건에 맞는 데이터만 처리하여 표시해야 하는 경우도 생길 것 입니다. 이런 경우 footer.callback 기능을 통해 문제를 해결할 수 있습니다.
실습
실습에서는 국어 컬럼에 대하여 일반적인 사용법인 expression을 사용하여 합계 표시해보도록 하겠습니다. 그리고 수학 컬럼에 대해서는 배우인 사람들의 합계만 표시해보도록 하겠습니다.
-
버튼을 클릭하면 국어 컬럼의 합계를 표시합니다.
//국어컬럼 sum 설정 $("#btnSetCol4").click(function () { gridView.setColumnProperty("col4", "footer", {expression: "sum"}); }); -
버튼을 클릭하면 수학 컬럼의 직업이 배우인 사람의 합계만 표시합니다.
//수학컬럼 배우만 sum 설정 $("#btnSetCol5").click(function () { gridView.setColumnProperty("col5", "footer", { callback: function(column){ var cnt = gridView.getItemCount(); var sum = 0; for (var i = 0; i < cnt; i++) { if(gridView.getDataRow(i) > -1){ sum += gridView.getValue(i, "field1") == "배우" ? gridView.getValue(i, column.fieldName) : 0; } } return sum; } }); });
-
컬럼 설정시 바로 지정하는 방법
var columns = [ ..생략.. { name: "col4", fieldName: "field4", header : { text: "국어" }, width: 80, footer: { expression: "sum" } }, { name: "col5", fieldName: "field5", header : { text: "수학" }, width: 80, footer: { callback: function(column){ var cnt = gridView.getItemCount(); var sum = 0; for (var i = 0; i < cnt; i++) { if(gridView.getDataRow(i) > -1){ sum += gridView.getValue(i, "field1") == "배우" ? gridView.getValue(i, column.fieldName) : 0; } } return sum; } } }, ..생략.. ];
실행화면
전체 소스코드
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.1.24.min.js"></script>
<script type="text/javascript" src="/script/realgridjs-api.1.1.24.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"
},
{
fieldName: "field7",
dataType: "number"
},
{
fieldName: "field8",
dataType: "number"
},
{
fieldName: "field9",
dataType: "number"
},
{
fieldName: "field10",
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
},
{
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 = [
["배우", "여자", "전도연", "20", "22", "90", "70", "60", "100", "80"],
["가수", "여자", "이선희", "40", "33", "90", "70", "60", "100", "80"],
["배우", "여자", "하지원", "10", "11", "90", "70", "60", "100", "80"],
["가수", "여자", "박정현", "40", "22", "90", "70", "60", "100", "80"],
["배우", "여자", "전지현", "20", "44", "90", "70", "60", "100", "80"]
];
dataProvider.setRows(data);
//국어컬럼 sum 설정
$("#btnSetCol4").click(function () {
gridView.setColumnProperty("col4", "footer", {expression: "sum"});
});
//수학컬럼 배우만 sum 설정
$("#btnSetCol5").click(function () {
gridView.setColumnProperty("col5", "footer", {
callback: function(column){
var cnt = gridView.getItemCount();
var sum = 0;
for (var i = 0; i < cnt; i++) {
sum += gridView.getValue(i, "field1") == "배우" ? gridView.getValue(i, column.fieldName) : 0;
}
return sum;
}
});
});
});
</script>
HTML
1. <button type="button" class="btn btn-primary btn-xs" id="btnSetCol4">국어컬럼 sum 설정</button> 2. <button type="button" class="btn btn-primary btn-xs" id="btnSetCol5">수학컬럼 배우만 sum 설정</button> <div id="realgrid" style="width: 100%; height: 200px;"></div>
참조