SMART datagrid v1.4 > Examples

Back  Forward

Column Footer  Example

SMART datagrid에서는 어렵지 않게 컬럼별 합계를 구하고 표시할 수 있다. 이 번 예제에서는 숫자 필드에 연결된 컬럼의 Footer에 합계를 표시하는 기본적인 방법을 알아 본다. 

Grid - 1
rows
취소금액 합계 변경

현재 "varp(분산)"를 표시하도록 설정돼 있는 "취소금액" 컬럼의 푸터에는 값이 표시되지 않고 있는데, 그리드의 summaryModeSummaryMode.AGGREGATE로 되어 있기 때문이다. varp(분산)이나 stdev(표준편차)와 같은 통계적 값을 계산하고 표시하기 위해서는 그리드 summaryModeSummaryMode.STATISTICAL로 설정해 줘야 한다. 위의 SummarMode 선택박스에서 선택을 변경해 본다. 

Code -1
    selSumMode_change: function (ev) {
        grdMain.displayOptions().setSummaryMode(ev.target.value);
    }

컬럼 푸터에 표시할 합계는 동적으로 변경 가능하다. 취소금액 합계 변경 옆의 선택을 변경하면 취소금액 컬럼 푸터의 표시값이 변경된다. 

Code -2
    selCancelledSum_change: function (ev) {
        var column = grdMain.columnByName('CancelledAmount')
        var value = ev.target.value;            
        column.footer().setExpression(value);
    }

현재 그리드에서 계산된 컬럼의 합계가 필요한 경우가 있다. GridBase.getSummary 메쏘드를 이용하면 종류별 컬럼의 합계값을 가져올 수 있다. 

Code -3
    btnSummary_click: function (ev) {
        var value = document.getElementById('selSumExp').value;
        value = grdMain.getSummary('original_amount', value);
        alert(ev.target.value + ' =  ' + value);
    }

무엇보다 컬럼 푸터에 표시되는 합계 값은 데이터셀들의 현재 값들과 동기화된다. 즉, 데이터셀들의 값을 변경하면 즉시 합계에 반영되고, 푸터 표시값도 변경된다. 

소스보기 JSP 

See Also
ColumnFooter
SummaryMode
getSummary
Examples
Column Footer Callbacks