[jQuery] jqxgrid Grouping

jqxgrid 그룹핑은 조회된 데이터들을 특정한 조건에 맞게 그룹화하여 보여주는 기능이다.

 

Example

html

<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left; width:100%">
  <div id="jqxgrid">
  </div>
</div>

javascript

$(document).ready(function () {
var data = '[{ "name": "홍길동", "age": "23", "address": "경기","phone": "010-1234-XXXX", "birthday": "1990-02-05","allowance": 5000, "gender":"남"}, { "name": "이몽룡", "age": "18", "address": "서울","phone": "010-9999-XXXX", "birthday": "1995-06-10","allowance": 20000, "gender":"남"}, { "name": "성춘향", "age": "18", "address": "경기","phone": "010-1593-XXXX", "birthday": "1995-08-23","allowance": 12000, "gender":"여"}, { "name": "김흥부", "age": "32", "address": "서울","phone": "010-2854-XXXX", "birthday": "1984-07-11","allowance": 8000, "gender":"남"}, { "name": "박놀부", "age": "35", "address": "경기","phone": "010-4675-XXXX", "birthday": "1982-05-22","allowance": 35000, "gender":"남"}, { "name": "심청이", "age": "21", "address": "서울","phone": "010-8948-XXXX", "birthday": "1991-11-25","allowance": 15000, "gender":"여"}]';

  var source = {
    datatype: "json",
    datafields: [
        {name: 'name',type: 'string'},
        {name: 'age',type: 'int'},
        {name: 'address',type: 'string'},
        {name: 'phone',type: 'string'},
        {name: 'birthday',type: 'date'},
        {name: 'allowance',type: 'number'},
        {name: 'gender',type: 'string'}
    ],
    localdata: data
  };
  var dataAdapter = new $.jqx.dataAdapter(source);
  
    var groupsrenderer = function (text, group, expanded, data) {
    var title = data.groupcolumn.text + ': ' + group;
    var allowance_sum;
        if (data.subItems.length > 0) {
            allowance_sum = this.getcolumnaggregateddata('allowance', ['sum'], true, data.subItems);
        } else {
           var rows = new Array();
            var getRows = function (group, rows) {
                if (group.subGroups.length > 0) {
                    for (var i = 0; i < group.subGroups.length; i++) {
                        getRows(group.subGroups[i], rows);
                    }
                } else {
                    for (var k = 0; k < group.subItems.length; k++) {
                        rows.push(group.subItems[k]);
                    }
                }
            }
            getRows(data, rows);
        
            allowance_sum = this.getcolumnaggregateddata('allowance', ['sum'], true, rows);
        }
        var count = data.subItems.length || data.subGroups.length;

    return '<div style="margin-top:5px;"><span style="font-weight: bold; width:150px; display: inline-block;">'+text+'</span>'+
    '용돈합계: <span style="width:30px; display: inline-block; text-align:right; margin-right:20px;">'+ allowance_sum.sum+'</span></div>';
  }
  
  
  $("#jqxgrid").jqxGrid({
          width: '100%',
          height: '300',
          source: dataAdapter,
          sortable: true,
          filterable: true,
          showstatusbar: true,
          columnsresize: true,
          groupable: true,
          groupsrenderer: groupsrenderer,
          theme: 'energyblue',
    columns: [
    		{text: '이름',datafield: 'name',width: "10%", align:"center"},
        {text: '나이',datafield: 'age',width: "10%", align:"center"},
        {text: '주소',datafield: 'address',width: "10%", align:"center"},
        {text: '전화번호',datafield: 'phone',width: "20%", align:"center"},
        {text: '생일',datafield: 'birthday',cellsformat: "yyyy-MM-dd",width: "20%", align:"center"},
        {text: '용돈',datafield: 'allowance',cellsformat : 'd',cellsalign: 'right',width: "20%", align:"center"},
        {text: '성별',datafield: 'gender',width: "10%", align:"center"}
    	]
  });
            
});

 

 

Groupsrenderer을 구현할 때 Parameter로 쓰이는 group, data의 구조를 정확하게 파악하지 못하면 해당 내용을 이해하기 어려울 수 있다. (파악 잘합시다)

 

 

 

 

출처 : https://pjmcoding.tistory.com/