들어가며

이번 강좌에서는 Footer의 값을 GroupFooter에서 사용하여 표시하는 방법에 대해 배워보도록 하겠습니다.

이론

해당 강좌를 따라하기에 앞서 C19 Group Footer를 특정 조건에 맞게 계산하기 - I를 선행 학습하시기 바랍니다.

위의 이미지를 리얼그리드로 구현한다고 할때 보통 2가지 방법으로 구현한다고 생각해 볼 수 있습니다.

  1. 컬럼 그룹핑을 사용하여 구현하는 방법(서버에서 모든 값을 계산하여 가져옴)
  2. 행병합 그룹핑으로 구현하는 방법(클라이언트에서 값을 계산)

이 강좌에서는 행병합 그룹핑을 사용하여 구현하도록 하겠습니다.

실습

  1. 각 연도에 footer와 groupFooter.callback을 설정 합니다. footer의 경우는 각 연도의 학생수 합이며, groupFooter의 경우는 비율 = 해당 그룹의 학생 수 합/전체 인원 * 100 입니다.

     var columns = [
         {
             name: "col1",
             fieldName: "field1",            
             header : {
                 text: "구분"
             },
             width : 80,
         },
         {
             name: "col2",
             fieldName: "field2",
             header : {
                 text: "전공"
             },
             width : 80,
         },
         {
             name: "col3",
             fieldName: "field3",
             header : {
                 text: "구분"
             },
             width : 80,
             styles: {
                 textAlignment: "center"
             },
             footer: {
                 groupText: "비율",
                 groupStyles: {
                     textAlignment: "center"
                 },
             }
         },
         {
             name: "col4",
             fieldName: "field4",
             header : {
                 text: "2007"
             },
             width : 80,
             styles: {
                 textAlignment: "far"
             },
             footer: {
                 expression: "sum",
                 groupCallback: function (itemIndex, column, grid, groupModel) {
                     var groupSum = grid.getGroupSummary(groupModel, column.fieldName).sum;
                     var totalSum = grid.getSummary(column.fieldName, "sum");
                        
                     var retVal = parseFloat(groupSum / totalSum * 100).toFixed(2);
    
                     return retVal;
                 } 
             }            
         },                        
         {
             name: "col5",
             fieldName: "field5",
             header : {
                 text: "2008"
             },
             width : 80,
             styles: {
                 textAlignment: "far"
             },
             footer: {
                 expression: "sum",
                 groupCallback: function (itemIndex, column, grid, groupModel) {
                     var groupSum = grid.getGroupSummary(groupModel, column.fieldName).sum;
                     var totalSum = grid.getSummary(column.fieldName, "sum");
                        
                     var retVal = parseFloat(groupSum / totalSum * 100).toFixed(2);
    
                     return retVal;
                 } 
             }    
         },
         {
             name: "col6",
             fieldName: "field6",
             header : {
                 text: "2009"
             },
             width : 80,
             styles: {
                 textAlignment: "far"
             },
             footer: {
                 expression: "sum",
                 groupCallback: function (itemIndex, column, grid, groupModel) {
                     var groupSum = grid.getGroupSummary(groupModel, column.fieldName).sum;
                     var totalSum = grid.getSummary(column.fieldName, "sum");
                        
                     var retVal = parseFloat(groupSum / totalSum * 100).toFixed(2);
    
                     return retVal;
                 } 
             }    
         },
     ];
  2. 화면에는 필드 및 컬럼 설정이 완료되어 표시되고 있습니다.

  3. 버튼을 클릭하면 “구분”, “전공”으로 행 그룹핑 합니다.

     $("#btnSetGroupBy").click(function () {
         gridView.groupBy(["field1", "field2"]);
     });
  4. 버튼을 클릭하면 행 그룹핑이 MergeMode로 변경 됩니다. 또한 화면상 불필요한 그룹 헤더를 보이지 않게 처리 합니다.

     $("#btnSetRowGroup").click(function () {    
         gridView.setRowGroup({
             mergeMode: true,
             expandedAdornments: "footer"
         });<
     });

실행화면

  1. 화면에는 필드 및 컬럼 설정이 완료되어 표시되고 있습니다.

전체 소스코드

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.1.27.min.js"></script>
<script type="text/javascript" src="/script/realgridjs-api.1.1.27.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",
            dataType: "text"
        },
        {
            fieldName: "field2",
            dataType: "text"
        },
        {
            fieldName: "field3",
            dataType: "text"
        },
        {
            fieldName: "field4",
            dataType: "number"
        },
        {
            fieldName: "field5",
            dataType: "number"
        },
        {
            fieldName: "field6",
            dataType: "number"
        },
    ];

    dataProvider.setFields(fields);

    //필드와 연결된 컬럼 배열 객체를 생성합니다.
    var columns = [
        {
            name: "col1",
            fieldName: "field1",            
            header : {
                text: "구분"
            },
            width : 80,
        },
        {
            name: "col2",
            fieldName: "field2",
            header : {
                text: "전공"
            },
            width : 80,
        },
        {
            name: "col3",
            fieldName: "field3",
            header : {
                text: "구분"
            },
            width : 80,
            styles: {
                textAlignment: "center"
            },
            footer: {
                groupText: "비율",
                groupStyles: {
                    textAlignment: "center"
                },
            }

        },
        {
            name: "col4",
            fieldName: "field4",
            header : {
                text: "2007"
            },
            width : 80,
            styles: {
                textAlignment: "far"
            },
            footer: {
                expression: "sum",
                groupCallback: function (itemIndex, column, grid, groupModel) {
                    var groupSum = grid.getGroupSummary(groupModel, column.fieldName).sum;
                    var totalSum = grid.getSummary(column.fieldName, "sum");
                    
                    var retVal = parseFloat(groupSum / totalSum * 100).toFixed(2);

                    return retVal;
                } 
            }            
        },                        
        {
            name: "col5",
            fieldName: "field5",
            header : {
                text: "2008"
            },
            width : 80,
            styles: {
                textAlignment: "far"
            },
            footer: {
                expression: "sum",
                groupCallback: function (itemIndex, column, grid, groupModel) {
                    var groupSum = grid.getGroupSummary(groupModel, column.fieldName).sum;
                    var totalSum = grid.getSummary(column.fieldName, "sum");
                    
                    var retVal = parseFloat(groupSum / totalSum * 100).toFixed(2);

                    return retVal;
                } 
            }    
        },
        {
            name: "col6",
            fieldName: "field6",
            header : {
                text: "2009"
            },
            width : 80,
            styles: {
                textAlignment: "far"
            },
            footer: {
                expression: "sum",
                groupCallback: function (itemIndex, column, grid, groupModel) {
                    var groupSum = grid.getGroupSummary(groupModel, column.fieldName).sum;
                    var totalSum = grid.getSummary(column.fieldName, "sum");
                    
                    var retVal = parseFloat(groupSum / totalSum * 100).toFixed(2);

                    return retVal;
                } 
            }    
        },
    ];
    //컬럼을 GridView에 입력 합니다.
    gridView.setColumns(columns);

    //버튼을 클릭하면 "구분", "전공"으로 행 그룹핑 합니다.         
    $("#btnSetGroupBy").click(function () {
        gridView.groupBy(["field1", "field2"]);
    });

    //버튼을 클릭하면 행 그룹핑이 MergeMode로 변경 됩니다. 또한 화면상 불필요한 그룹 헤더를 보이지 않게 처리 합니다.     
    $("#btnSetRowGroup").click(function () {    
        gridView.setRowGroup({
            mergeMode: true,
            expandedAdornments: "footer"
        });
    });

    var data = [
        ["학생", "토목", "인원", 100, 200, 150],
        ["학생", "환경", "인원", 200, 200, 150],
        ["학생", "도시", "인원", 300, 100, 200],
        ["교수", "토목", "인원", 10, 20, 10],
        ["교수", "환경", "인원", 20, 20, 10],
        ["교수", "도시", "인원", 30, 10, 20]        
    ];
    dataProvider.setRows(data);

});   
</script>
HTML
1. 화면에는 필드 및 컬럼 설정이 완료되어 표시되고 있습니다.    

2. <button type="button" class="btn btn-primary btn-xs" id="btnSetGroupBy">버튼을 클릭하면 "구분", "전공"으로 행 그룹핑 합니다.      

3. <button type="button" class="btn btn-primary btn-xs" id="btnSetRowGroup">버튼을 클릭하면 행 그룹핑이 MergeMode로 변경 됩니다. 또한 화면상 불필요한 그룹 헤더를 보이지 않게 처리 합니다.         

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

참조