easyui datagrid数据源归类统计

  easyui datagrid依据某列的值进行归类后,进行小计数据行插入在此类别后面,并合并此列相同的单元格,最后插入总计,并可以给小计,总结的列添加不同显示,效果如下

easyui datagrid数据源归类统计

easyui datagrid数据源归类统计源代码如下

<table id="dg" style="width:400px;"></table>
<script>
    var merge = {}
    $('#dg').datagrid({
        title: 'datagrid数据源归类统计', rownumbers: true, url: 'sort.json', method: 'get',
        columns: [[{ field: 'type', title: '类别' }, { field: 'no', title: '序号' }, { field: 'num', title: '数值' }]],
        rowStyler: function (index, row) {
            if (row.no == '小计') return 'background-color:#6293BB;color:#fff;';
            if (row.type == '总计') return 'background-color:#f00;color:#fff;';
        },
        loadFilter: function (d) {
            d.rows.sort(function (a, b) { return b.type.localeCompare(a.type) });
            for (var i = 0; i < d.rows.length; i++) {
                var data = merge[d.rows[i].type] || {};
                if (data.index !== undefined) { data.sum += d.rows[i].num; data.count++; d.rows[i].no = data.count }
                else { data.index = i; data.count = 1; data.sum = d.rows[i].num;d.rows[i].no=1}
                merge[d.rows[i].type] = data;
            }
            return d;
        }, onLoadSuccess: function (d) {
            var count = 0, sum = 0, typeCount = 0;
            for (var attr in merge) {
                $(this).datagrid('insertRow', { index: count + merge[attr].count, row: { type: attr, no: '小计', num: merge[attr].sum } });
                $(this).datagrid('mergeCells', {
                    index: merge[attr].index + typeCount,
                    field: 'type',
                    rowspan: merge[attr].count
                })
                typeCount++;
                count += merge[attr].count + 1;
                sum += merge[attr].sum;
            }
            $(this).datagrid('appendRow', { type:  '总计', num: sum })
        }
    });
</script>

sort.json

{"total":28,"rows":[
    {"type": "类别一", "no": "1","num":10},
    {"type": "类别二", "no": "4","num":10 },
    {"type": "类别一", "no": "3","num":30 },
    {"type": "类别二", "no": "5","num":20 },
    {"type": "类别一", "no": "2","num":20},
    {"type": "类别三", "no": "6","num":20},
    {"type": "类别四", "no": "7","num":20},
    {"type": "类别四", "no": "8","num":20},
    {"type": "类别四", "no": "7","num":20}
]}

 


原创文章,转载请注明出处:easyui datagrid数据源归类统计

评论(0)Web开发网
阅读(90)喜欢(0)不喜欢(0)easyui开发技巧