들어가며

이번 강좌에서는 특정 조건에 맞는 데이터만 계산하여 Group Footer에 표시하는 방법을 배워보도록 하겠습니다.

이론

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

C17 Footer를 특정 조건에 맞게 계산하기에서 Footer.callback을 사용 방법을 알아보았었습니다. 이번 강좌에서는 Row Grouping시 표시되는 GroupFooter에 callback을 어떻게 사용하는지 알아보도록 하겠습니다.

실습

실습에서는 국어 컬럼에 대하여 일반적인 사용법인 expression을 사용하여 합계 표시해보도록 하겠습니다. 그리고 수학 컬럼에 대해서는 배우인 사람들의 합계만 표시해보도록 하겠습니다.

  1. 버튼을 클릭하면 성별로 RowGrouping 합니다.

     //성별로 RowGrouping  
     $("#btnSetRowGroup").click(function () {
         gridView.groupBy(["field2"]);
     });
  2. 버튼을 클릭하면 국어 컬럼의 그룹 합계를 표시합니다.

     //국어컬럼 sum 설정  
     $("#btnSetCol4").click(function () {
         gridView.setColumnProperty("col4", "footer", {groupExpression: "sum"});
     });
  3. 버튼을 클릭하면 수학 컬럼의 직업이 배우인 사람의 그룹 합계만 표시합니다.

     //수학컬럼 배우만 sum 설정   
     $("#btnSetCol5").click(function () {
         gridView.setColumnProperty("col5", "footer", {
             groupCallback: function(groupFooterItemindex, column) {
    
                 var aModel = gridView.getModel(groupFooterItemindex);
                 var pmdl = gridView.getParentModel(aModel);
                 var cmdl = gridView.getChildModels(pmdl);
                 var sum = 0;
    
                 for(var i = 0; i < cmdl.length; i++) {
                     if(cmdl[i].dataRow > -1) {
                         sum += gridView.getValue(cmdl[i].itemIndex, "field1") == "배우" ? gridView.getValue(cmdl[i].itemIndex, column.fieldName) : 0;
                     }
                 }
    
                 return sum;
             }
         });
     });
  • 컬럼 설정시 바로 지정하는 방법

      var columns = [
          ..생략..
          {
              name: "col4",
              fieldName: "field4",
              header : {
                  text: "국어"
              },
              width: 80,
              footer: {
                  groupExpression: "sum"
              }
          },
          {
              name: "col5",
              fieldName: "field5",
              header : {
                  text: "수학"
              },
              width: 80,
              footer: {
                  groupCallback: function(footerIndex, column) {
                      console.log(footerIndex);
    
                      var aModel = gridView.getModel(footerIndex);
                      var pmdl = gridView.getParentModel(aModel);
                      var cmdl = gridView.getChildModels(pmdl);
                      var sum = 0;
    
                      for(var i = 0; i < cmdl.length; i++) {
                          if(cmdl[i].dataRow > -1) {
                              sum += gridView.getValue(cmdl[i].itemIndex, "field1") == "배우" ? gridView.getValue(cmdl[i].itemIndex, column.fieldName) : 0;
                          }
                      }
    
                      return sum;
                  }
              }
          },
          ..생략..
      ];

실행화면

전체 소스코드

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

    //필드와 연결된 컬럼 배열 객체를 생성합니다.
    var columns = [
        {
            name: "col1",
            fieldName: "field1",
            header : {
                text: "직업"
            },
            width : 60
        },
        {
            name: "col2",
            fieldName: "field2",
            header : {
                text: "성별"
            },
            width: 50
        },
        {
            name: "col3",
            fieldName: "field3",
            header : {
                text: "이름"
            },
            width: 80
        },
        {
            name: "col4",
            fieldName: "field4",
            header : {
                text: "국어"
            },
            width: 80
        },
        {
            name: "col5",
            fieldName: "field5",
            header : {
                text: "수학"
            },
            width: 80
        },
        {
            name: "col6",
            fieldName: "field6",
            header : {
                text: "민법"
            },
            width: 80
        },
        {
            name: "col7",
            fieldName: "field7",
            header : {
                text: "한국사"
            },
            width: 80
        },
        {
            name: "col8",
            fieldName: "field8",
            header : {
                text: "영어"
            },
            width: 80
        },
        {
            name: "col9",
            fieldName: "field9",
            header : {
                text: "과학"
            },
            width: 80
        },
        {
            name: "col10",
            fieldName: "field10",
            header : {
                text: "사회"
            },
            width: 80
        }
    ];
    //컬럼을 GridView에 입력 합니다.
    gridView.setColumns(columns);

    var data = [
        ["배우", "여자", "전도연", "20", "22", "90", "70", "60", "100", "80"],
        ["가수", "여자", "이선희", "40", "33", "90", "70", "60", "100", "80"],
        ["배우", "여자", "하지원", "10", "11", "90", "70", "60", "100", "80"],
        ["가수", "여자", "박정현", "40", "22", "90", "70", "60", "100", "80"],
        ["배우", "여자", "전지현", "20", "44", "90", "70", "60", "100", "80"]
    ];
    dataProvider.setRows(data);

    //국어컬럼 sum 설정  
    $("#btnSetCol4").click(function () {
        gridView.setColumnProperty("col4", "footer", {expression: "sum"});
    });

    //수학컬럼 배우만 sum 설정    
    $("#btnSetCol5").click(function () {
        gridView.setColumnProperty("col5", "footer", {
            callback: function(column){
                var cnt = gridView.getItemCount();
                var sum = 0;

                for (var i = 0; i < cnt; i++) {
                    if(gridView.getDataRow(i) > -1){
                        sum += gridView.getValue(i, "field1") == "배우" ? gridView.getValue(i, column.fieldName) : 0;
                    }
                }

                return sum;
            }
        });
    });

});   
</script>
HTML
1. <button type="button" class="btn btn-primary btn-xs" id="btnSetCol4">국어컬럼 sum 설정</button> 

2. <button type="button" class="btn btn-primary btn-xs" id="btnSetCol5">수학컬럼 배우만 sum 설정</button> 

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

참조