easyui 报表合并单元格

　　前段时间工作中碰到有需求，要求数据按下图所示格式来显示，当时在园子里看到了一篇文章（时间久了，想不起是哪一篇），研究了后做出了如下的DEMO，在此当作学习笔记，简单记录一下。

　　首先是效果图，如下:

　　数据库临时建的DEMO表，如下：  

 

　　前台代码，如下：

<form id="form1">

    <div data-options="region:'north',title:'查询条件',collapsible:false,height:'auto'">
        <div class="cx-box">
            <ul class="cx-ul">
                <li>
                    <span>登录名称</span>
                    <input id="txtName" type="text" />
                </li>
                <li>
                    <span>操作员名</span>
                    <input id="txtDeptName" type="text" />
                </li>
                <li>
                    <span>角色</span>
                    <input id="txtRole" class="easyui-combobox" style="height:22px;width:132px" />
                </li>
                <li>
                    <span>学生</span>
                    <input id="txtStudent" style="height:22px;width:132px" />
                </li>

            </ul>
            <div class="cx-button">
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'" style="width: 60px;" οnclick="QueryData();">查询</a>
                <a href="#" class="easyui-linkbutton" data-options="iconCls:'icon-add'" style="width: 60px;" οnclick="AddData();">添加</a>
            </div>
            <div class="clear"></div>
        </div>
    </div>
    <div data-options="region:'center'">
        <div class="easyui-layout" data-options="fit:true,border:false">
            <div data-options="region:'center',title:'用户列表',border:false" id="datadiv">
                <table id="datagrid"></table>
            </div>
        </div>
    </div>


    <input type="hidden" id="hidOperatorId" />
    <input type="hidden" id="hidDeptCode" />
</form>
<script>
        $.extend($.fn.datagrid.methods, {
            autoMergeCells: function (jq, fields) {
                return jq.each(function () {
                    var target = $(this);
                    if (!fields) {
                        fields = target.datagrid("getColumnFields");
                    }
                    var rows = target.datagrid("getRows");
                    var i = 0,
                            j = 0,
                            temp = {};
                    for (i; i < rows.length; i++) {
                        var row = rows[i];
                        j = 0;
                        for (j; j < fields.length; j++) {
                            var field = fields[j];
                            var tf = temp[field];
                            if (!tf) {
                                tf = temp[field] = {};
                                tf[row[field]] = [i];
                            } else {
                                var tfv = tf[row[field]];
                                if (tfv) {
                                    tfv.push(i);
                                } else {
                                    tfv = tf[row[field]] = [i];
                                }
                            }
                        }
                    }
                    $.each(temp, function (field, colunm) {
                        $.each(colunm, function () {
                            var group = this;

                            if (group.length > 1) {
                                var before,
                                        after,
                                        megerIndex = group[0];
                                for (var i = 0; i < group.length; i++) {
                                    before = group[i];
                                    after = group[i + 1];
                                    if (after && (after - before) == 1) {
                                        continue;
                                    }
                                    var rowspan = before - megerIndex + 1;
                                    if (rowspan > 1) {
                                        target.datagrid('mergeCells', {
                                            index: megerIndex,
                                            field: field,
                                            rowspan: rowspan
                                        });
                                    }
                                    if (after && (after - before) != 1) {
                                        megerIndex = after;
                                    }
                                }
                            }
                        });
                    });
                });
            }
        });
        var sortFlag = false;       

        $(function () {
            //加载数据 
            $("#datagrid").datagrid({
                url: 'GetDtUser1',
                border: false,
                singleSelect: true,
                rownumbers: true,
                toolbar: "#toolbar",
                columns: [[
                    { field: 'id',hidden:true, title: '序号', width: 100 },
                    { field: 'sex', title: '性别', width: 100 },
                    {field: 'divr_user', title: '姓名', width: 100},
                    {field: 'price', title: '单价', width: 100},
                    {field: 'num', title: '数量', width: 100},
                    {
                        field: 'sum', title: '金额', width: 100,
                        formatter: function (value, row, index) {
                            if (!value && (row.price != "" && row.num != "")) {
                                return row.price * row.num;
                            }else if(!value && row.price != ""){
                                return row.price;
                            }else {
                                return value;
                            }
                        }
                    }
                ]],
                
                onLoadSuccess: function (data) {
                    if (data.total > 0) {

                        if (!sortFlag) $(this).datagrid("autoMergeCells", ['sex']);
                        var rows = $('#datagrid').datagrid('getRows');
                        var currArea = '';
                        var total = 0;//小计
                        var sumTotal = 0;//合计
                        var len = rows.length - 1;
                        var objectArray = [];
                        $.each(rows, function (i, item) {//循环所有行记录
                            var sum = 0;
                            //计算小计的sum
                            if (item.price != "" && item.num != "") {
                                sum = item.price * item.num;
                            } else {
                                sum = item.price;
                            }
                            if (!currArea) {//判断是还是是当前区域id，如果不是赋值当前记录的sex给变量
                                currArea = item.sex;
                            }
                            if (currArea == item.sex) {//如果是当前的区域id，计数小计
                                total += sum;
                            } else {//不是当前的，添加datagrid的一条行数据
                                sumTotal += total;
                                objectArray.push({
                                    index: i,
                                    row: {
                                        sex: '<span class="subtotal">小计</span>',
                                        sum: '<span class="subtotal">' + total.toFixed(2) + '</span>'
                                    }
                                });

                                currArea = item.sex;
                                total = sum;

                            }
                            if (i == len) {//最后一行
                                sumTotal += total;
                                objectArray.push({
                                    index: i,
                                    row: {
                                        sex: '<span class="subtotal">小计</span>',
                                        sum: '<span class="subtotal">' + total.toFixed(2) + '</span>'
                                    }
                                });
                            }
                        });
                        var num = 0;
                        $.each(objectArray, function (i, item) {//循环所有待添加的插入行记录，对应插入位置是原始行数据对应记录的最后一行
                            if (i < objectArray.length - 1) {//判断是否是最后一行
                                item.index = item.index + num;
                                $('#datagrid').datagrid('insertRow', {
                                    index: item.index,	// 索引从0开始
                                    row: item.row
                                });

                                $('#datagrid').datagrid('mergeCells', {
                                    index: item.index,
                                    field: 'sex',
                                    colspan: '4'
                                })

                                num++;


                            } else {
                                $('#datagrid').datagrid('appendRow',
                                    item.row
                                );

                                $('#datagrid').datagrid('appendRow',
                                    {
                                        sex: '<span class="subtotal">合计</span>',
                                        sum: '<span class="subtotal">' + sumTotal.toFixed(2) + '</span>'
                                    }
                                );

                                $('#datagrid').datagrid('mergeCells', {
                                    index: $('#datagrid').datagrid('getRows').length - 2,
                                    field: 'sex',
                                    colspan: '4'
                                })


                                $('#datagrid').datagrid('mergeCells', {
                                    index: $('#datagrid').datagrid('getRows').length - 1,
                                    field: 'sex',
                                    colspan: '4'
                                })
                            }
                        }

                        );
                    }
                }

            });

        });
       
</script>

　　

 

转载于:https://www.cnblogs.com/skye-mei/p/7998303.html