jqxgrid-03.Aggregates

by codinine

HTML

<script src="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/jqx-all.js"></script>
<link rel="stylesheet" href="https://www.jqwidgets.com/jquery-widgets-demo/jqwidgets/styles/jqx.base.css">
<link rel="stylesheet" href="https://jqwidgets.com/public/jqwidgets/styles/jqx.energyblue.css">
<div id='jqxWidget' style="font-size: 13px; font-family: Verdana; float: left;">
  <div id="jqxgrid">
  </div>
  <div style="margin-top: 30px;">
  </div>
</div>

JavaScript

$(document).ready(function () {
var data = '[{ "name": "김길동", "age": "23", "address": "서울 강남구","phone": "010-1234-XXXX", "birthday": "1990-02-05","allowance": 5000}, { "name": "이몽룡", "age": "18", "address": "서울 도봉구","phone": "010-9999-XXXX", "birthday": "1995-06-10","allowance": 20000}, { "name": "김춘향", "age": "18", "address": "서울 중랑구","phone": "010-1593-XXXX", "birthday": "1995-08-23","allowance": 12000}, { "name": "김흥부", "age": "32", "address": "서울 동대문구","phone": "010-2854-XXXX", "birthday": "1984-07-11","allowance": 8000}, { "name": "박놀부", "age": "35", "address": "서울 강서구","phone": "010-4675-XXXX", "birthday": "1982-05-22","allowance": 35000}, { "name": "심청이", "age": "21", "address": "서울 동작구","phone": "010-8948-XXXX", "birthday": "1991-11-25","allowance": 15000}]';
  // prepare the data
  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'}
      ],
      localdata: data
    };
    var dataAdapter = new $.jqx.dataAdapter(source);
    $("#jqxgrid").jqxGrid({
            width: '100%',
            height: '300',
            source: dataAdapter,
            showstatusbar: true,
            statusbarheight: 50,
            showaggregates: true,
            columnsresize: true,
            theme: 'energyblue',
      columns: [
        {text: '이름',datafield: 'name',width: "10%",
          aggregates: ['count',
                            { '김씨':
                              function (aggregatedValue, currentValue) {
                                 if (currentValue.substring( 0, 1 ) == "김") {
                                      return aggregatedValue + 1;
                                  }
                                   return aggregatedValue;
                              }
                            }
             ...