SMART datagrid v1.4 > Examples

Back  Forward

Row Grouping  Example

행 그룹핑은 관계형 데이터베이스의 Group By와 유사하게, 지정한 필드들의 값들이 동일한 행들을 묶어서 그 합 등을 표시하는 방법이다. DataLudi GridView에서는 묶어진 행들을 이웃한 그리드행들로 표시한다. 또, 그룹 헤더나 푸터를 묶음 전후로 표시할 수 있다. 

사용자는 그룹핑하려는 필드에 연결된 컬럼의 헤더를 그룹핑 패널 영역으로 드래깅해서 행 그룹핑을 설정할 수 있다. 그룹핑 패널에는 현재 설정된 그룹 필드들의 목록이 표시되고, 필드 뷰의 오른쪽 닫기 버튼을 클릭해서 그룹핑에서 제외 시킬 수 있다. 

또, 행 그룹핑은 컬럼이 아니라 DataField를 기준으로 실행되지만, 그룹핑 패널에는 필드에 연결된 컬럼의 헤더를 표시한다. 

Grid - 1
rows
RowGroup.expandedAdornments:
RowGroup.collapsedAdornments:

스크립트에서는 groupBy를 호출해서 행 그룹핑을 설정한다. 또, 행 그룹핑 상태가 변경되면 GridView.onGrouped 이벤트가 발생한다. 변경되기 직전에는 onGrouping 이벤트가 발생한다. 

onGrouping 이벤트 내에서 명시적으로 false를 리턴하면 그룹핑 변경이 진행되지 않는다. 

기존 그룹핑을 해제한다. 

"국가""수출입" 필드로 그룹핑한다. 

선택된 컬럼을 행그룹핑에서 제외시킨다. 

Code -1
    // grouping이 변경되면 발생한다.
    grdMain.onGrouped = function () {
        console.log('Row grouping is changed.');
    });
    // group by를 해제한다.
    grdMain.clearGroupBy();
    // group by
    grdMain.groupBy(['country', 'flow']);
1. createCallback

RowGroup.createCallback 속성에 그룹 footer의 생성 여부를 지정하는 콜백 함수를 지정할 수 있다. 콜백에서 명시적으로 Boolean false를 리턴하면 footer가 생성되지 않는다. 

1 level 그룹에만 footer를 표시한다. 

2. footer value

각 그룹의 footer 셀에는 컬럼 groupFooterexpression이나 callback 속성으로 지정된 합계 속성이 계산돼서 표시된다. 위 예제에서 "거래액" 컬럼은 expression을, "거래량" 컬럼은 callback을 이용했다. 특히, "거래량" 컬럼은 그룹행의 "수출입" 상태에 따라 음수 값을 표시하도록 했다. 

3. styles

행 그룹별로 표시되는 그룹 푸터에 표시되는 값이나 스타일은 컬럼의 groupFooter 속성으로 설정할 수 있다. 또, 그룹 패널에 표시되는 그룹 필드들의 스타일은 RowGroupPanel.itemStyles 등으로 설정할 수 있다. 

  

 

Code -2
    grdMain.loadStyles({
        groupPanel: {
            background: "#fffad2",
            item: {
                background: "#eee8aa"
            },
            head: {
                background: "#eeeea8"
            }
        }
    });
4. export

Excel 파일로 내보내기. 

소스보기 JSP 

See Also
GridView.groupBy
GridView.clearGroupBy
GridColumn.groupFooter
GridBase.groupPanel
RowGroup.createFooterCallback
ColumnSummary.expression
ColumnSummary.callback
Examples
병합 행 그룹핑