SMART datagrid v1.4 > Examples
행 그룹핑은 관계형 데이터베이스의 Group By와 유사하게, 지정한 필드들의 값들이 동일한 행들을 묶어서 그 합 등을 표시하는 방법이다. DataLudi GridView에서는 묶어진 행들을 이웃한 그리드행들로 표시한다. 또, 그룹 헤더나 푸터를 묶음 전후로 표시할 수 있다.
사용자는 그룹핑하려는 필드에 연결된 컬럼의 헤더를 그룹핑 패널 영역으로 드래깅해서 행 그룹핑을 설정할 수 있다. 그룹핑 패널에는 현재 설정된 그룹 필드들의 목록이 표시되고, 필드 뷰의 오른쪽 닫기 버튼을 클릭해서 그룹핑에서 제외 시킬 수 있다.
또, 행 그룹핑은 컬럼이 아니라 DataField를 기준으로 실행되지만, 그룹핑 패널에는 필드에 연결된 컬럼의 헤더를 표시한다.
스크립트에서는 groupBy를 호출해서 행 그룹핑을 설정한다. 또, 행 그룹핑 상태가 변경되면 GridView.onGrouped 이벤트가 발생한다. 변경되기 직전에는 onGrouping 이벤트가 발생한다.
onGrouping 이벤트 내에서 명시적으로 false를 리턴하면 그룹핑 변경이 진행되지 않는다.
기존 그룹핑을 해제한다.
"국가" 와 "수출입" 필드로 그룹핑한다.
선택된 컬럼을 행그룹핑에서 제외시킨다.
// grouping이 변경되면 발생한다.
grdMain.onGrouped = function () {
console.log('Row grouping is changed.');
});
// group by를 해제한다.
grdMain.clearGroupBy();
// group by
grdMain.groupBy(['country', 'flow']);
RowGroup.createCallback 속성에 그룹 footer의 생성 여부를 지정하는 콜백 함수를 지정할 수 있다. 콜백에서 명시적으로 Boolean false를 리턴하면 footer가 생성되지 않는다.
1 level 그룹에만 footer를 표시한다.
각 그룹의 footer 셀에는 컬럼 groupFooter의 expression이나 callback 속성으로 지정된 합계 속성이 계산돼서 표시된다. 위 예제에서 "거래액" 컬럼은 expression을, "거래량" 컬럼은 callback을 이용했다. 특히, "거래량" 컬럼은 그룹행의 "수출입" 상태에 따라 음수 값을 표시하도록 했다.
행 그룹별로 표시되는 그룹 푸터에 표시되는 값이나 스타일은 컬럼의 groupFooter 속성으로 설정할 수 있다. 또, 그룹 패널에 표시되는 그룹 필드들의 스타일은 RowGroupPanel.itemStyles 등으로 설정할 수 있다.
grdMain.loadStyles({
groupPanel: {
background: "#fffad2",
item: {
background: "#eee8aa"
},
head: {
background: "#eeeea8"
}
}
});
Excel 파일로 내보내기.