A16 로우 그룹핑(row grouping) - II groupBy()함수로 그룹핑

들어가며

[A15 강좌]에서는 로우 그룹핑(row grouping)의 개념과 컬럼 헤더를 드래깅하여 그룹핑하는 방법에 대해 배워보았습니다. 이번 강좌에서는 [A15 강좌]와 동일한 결과를 GridView.groupBy()함수를 이용해 구현하는 방법을 배워보겠습니다.

이론

GridView.groupBy()함수는 그룹핑할 필드들을 배열형식의 인자로 넘겨줍니다. 인자로 넘겨지는 필드가 여러개인 경우 필드의 순서에 따라 차례로 중첩하여 그룹핑됩니다.

groupBy()함수가 호출 될 때마다 기존의 그룹핑 정보는 모두 초기화 된다는 사실에 주의해야 합니다. 모든 그룹상태를 초기화 하기 위해서는 groupBy([]); 와 같이 빈 배열값을 인자로 넘겨주면 됩니다.

groupBy()함수를 호출하여 그룹핑하면 기본적으로, 인자로 넘겨진 필드로 순방향 정렬됩니다. 아래 실습에서 각각의 버튼을 클릭할때 해당 컬럼으로 순방향 정렬(sort by ascending)되는 모습을 확인하세요.

실습

실습을 위한 기본코드는 [A15 강좌]와 동일합니다.
버튼을 클릭할때 그룹상태를 초기화 하기 위해 아래 코드를 추가합니다.

    // Reset Groups
    $("#btnResetGroups").on("click", function(){
        gridView.groupBy([]);
    })

버튼을 클릭할때 직업컬럼, 국어컬럼, 직업, 국어컬럼으로 각각 그룹핑 하도록 아래 코드를 추가 합니다.

    // 직업컬럼 단일그룹
    $("#btnField1Group").on("click", function(){
        gridView.groupBy(["field1"]);
    })

    // 국어컬럼 단일그룹
    $("#btnField4Group").on("click", function(){
        gridView.groupBy(["field4"]);
    })

    // 직업컬럼, 국어컬럼으로 중첩그룹
    $("#btnMultiFieldsGroup").on("click", function(){
        gridView.groupBy(["field1", "field4"]);
    })

실행화면

그룹상태 초기화 버튼을 눌러 그룹상태를 초기화 합니다.
직업컬럼으로 그룹잡기 버튼을 클릭하여 직업컬럼으로 데이터를 그룹핑되고 순방향 정렬된 모습을 확인합니다.
국어컬럼으로 그룹잡기 버튼을 클릭하여 국어컬럼으로 데이터를 그룹핑되고 순방향 정렬된 모습을 확인합니다.
직업컬럼, 국어컬럼으로 그룹잡기 버튼을 클릭하면 직업컬럼과 국어컬럼으로 그룹핑되고 순방향 정렬된 모습을 확인하세요.

전체 소스코드

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.0.14.min.js"></script>
<script type="text/javascript" src="/script/realgridjs-api.1.0.14.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"
        },
        {
            fieldName: "field5"
        }
    ];
    //DataProvider의 setFields함수로 필드를 입력합니다.
    dataProvider.setFields(fields);

    //필드와 연결된 컬럼 배열 객체를 생성합니다.
    var columns = [
        {
            name: "col1",
            fieldName: "field1",
            header : {
                text: "직업"
            },
            width: 100
        },
        {
            name: "col2",
            fieldName: "field2",
            header : {
                text: "성별"
            },
            width: 100
        },
        {
            name: "col3",
            fieldName: "field3",
            header : {
                text: "이름"
            },
            width: 100
        },
        {
            name: "col4",
            fieldName: "field4",
            header : {
                text: "국어"
            },
            width: 100
        },
        {
            name: "col5",
            fieldName: "field5",
            header : {
                text: "수학"
            },
            width: 100
        }
    ];
    //컬럼을 GridView에 입력 합니다.
    gridView.setColumns(columns);

    var data = [
        ["배우", "여자", "송윤아", "10", "33"],
        ["배우", "여자", "전도연", "20", "22"],
        ["가수", "여자", "이선희", "40", "33"],
        ["배우", "여자", "하지원", "10", "11"],
        ["가수", "여자", "소찬휘", "30", "55"],
        ["가수", "여자", "박정현", "40", "22"],
        ["배우", "여자", "전지현", "20", "44"]
    ];
    dataProvider.setRows(data);

    // Reset Groups
    $("#btnResetGroups").on("click", function(){
        gridView.groupBy([]);
    })

    // 직업컬럼 단일그룹
    $("#btnField1Group").on("click", function(){
        gridView.groupBy(["field1"]);
    })

    // 국어컬럼 단일그룹
    $("#btnField4Group").on("click", function(){
        gridView.groupBy(["field4"]);
    })

    // 직업컬럼, 국어컬럼으로 중첩그룹
    $("#btnMultiFieldsGroup").on("click", function(){
        gridView.groupBy(["field1", "field4"]);
    })
});
</script>

HTML

<button type="button" class="btn btn-primary btn-xs" id="btnResetGroups">그룹상태 초기화</button>

<button type="button" class="btn btn-primary btn-xs" id="btnField1Group">직업컬럼으로 그룹잡기</button>

<button type="button" class="btn btn-primary btn-xs" id="btnField4Group">국어컬럼으로 그룹잡기</button>

<button type="button" class="btn btn-primary btn-xs" id="btnMultiFieldsGroup">직업컬럼, 국어컬럼으로 그룹잡기</button>

<div id="realgrid" style="width: 100%; height: 400px;"></div>

참조

RealGrid Help