컬럼 푸터
리얼그리드에서 컬럼별 합계를 구해서 표시하는 것은 간단한 일입니다. 컬럼 footer.expression에 통계값을 표시하는 expression을 지정하면 되는데, 그리드 summaryMode에 따라 expression에서 사용할 수 있는 값의 종류가 달라집니다.
그리드가 계산해서 제공하는 합계값이 정확하지 않거나 필요한 합산 식이 존재하지 않는 경우, valueCallback()을 사용해서 표시하게 할 수 있습니다.
또, GridBase.getSummary(field, summary) 함수를 호출해서 필드의 합계값을 가져올 수도 있습니다. field는 필드명이나 필드인덱스가 될 수 있습니다.
요약값으로 표시할 수 있는 타입은 avg, sum, count, min, max 등이 있으며 더 자세한 내용은 SummaryType에서 확인하세요.
컬럼 푸터
footer.visible: 그리드 하단에 footer를 표시합니다.
// 컬럼 설정시 합계 식 지정
gridView.setColumns([{
...
}, {
name: "SaveCost",
fieldName: "SaveCost",
width: "80",
numberFormat: "#,##0",
header: {
text: "납입금"
},
footer: {
text: "합계 =>"
},
styleName: "right-column"
},
{
name: "SaveMaturity",
fieldName: "SaveMaturity",
width: "80",
numberFormat: "#,##0",
header: {
text: "만기금액"
},
footer: {
text: "합계",
expression: "sum",
},
styleName: "right-column"
}, {
...
}];footer와 같이 summary mode를 **"statistical"**로 지정해야 분산, 표준편차 값이 표시 됩니다.
gridView.setOptions({ summaryMode: "statistical" });gridView.setOptions({ summaryMode: "aggregate" });컬럼의 합계를 계산하지 않습니다.
gridView.setOptions({ summaryMode: "none" });Help 사이트의 summary Mode참고 바랍니다.
컬럼 푸터 동적 계산
컬럼 푸터에 표시할 내용을 column.footer.valueCallback()에서 처리하여 원하는 값으로 표시 할 수 있습니다.
// 컬럼 설정시 합계 식 지정
gridView.setColumns([{
...
}, {
name: "SaveMaturity",
fieldName: "SaveMaturity",
width: "80",
numberFormat: "#,##0",
header: {
text: "만기금액"
},
footer: {
numberFormat: "#,##0",
styleName:"orange-column",
valueCallback: function (grid, column, footerIndex, columnFooter, value){
//아래 코드로 평균값을 간단하게 구할 수 있음
//var avg = grid.getSummary("SaveMaturity", "avg");
//별도로 계산한다면 아래와 같이 처리
var sum = 0;
var prod = grid.getDataSource();
var cnt = prod.getRowCount();
for (var i=0 ; i<cnt ; i++) {
sum += prod.getValue(i, 'SaveMaturity');
}
return sum / cnt;
}
},
styleName: "right-column"
}, {
...
}];컬럼 푸터 여러 행 표시
푸터 요약을 여러 행으로 표시할 수 있습니다.
items에 필요한 푸터 갯수만큼 를 만드시면 됩니다.
- options
gridView.setFooters({
visible:true,
items:[
{
//styleName: "orange-column", //개별 css 스타일 적용 필요시
height: 40
},
{
height: 40
}
]
});- columns
var columns = [{
...
}, {
"name": "QuantityPerUnit",
"fieldName": "QuantityPerUnit",
"width": "100",
"header": {
"text": "Quantity / Unit",
"styleName": "orange-column"
},
"footers": [{
"text": "합계 ==> ",
"styleName": "orange-column"
}, {
"text": "평균 ==> ",
"styleName": "orange-column"
}]
}, {
"name": "Quantity",
"fieldName": "Quantity",
"width": "100",
"header": {
"text": "Quantity",
"styleName": "orange-column"
},
"footers": [{
"expression": "sum",
"numberFormat": "#,##0.00",
"styleName": "orange-column"
}, {
"expression": "avg",
"numberFormat": "#,##0.00",
"styleName": "orange-column"
}]
}, {
...
}];