easyui------自动合并行

Posted 玉天恒

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了easyui------自动合并行相关的知识,希望对你有一定的参考价值。

转载:

http://www.cnblogs.com/xiangzhong/p/5088259.html#undefined

1.引入插件

$.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;
                            }
                        }
                    }
                });
            });
        });
    }
});

2.html

<table id="simpleDgId" style="height: 300px" />

3.js

var sortFlag = false;
    $(\'#simpleDgId\').datagrid({
        url:"testController.do?datagrid",
        fitColumns:true,
        singleSelect:true,
        remoteSort: false,
        columns:[[
                  {field:"age",title:"年龄",width:25,align:\'center\',sortable:true},
                  {field:"userName",title:"名称",width:25,align:\'center\',sortable:true},
                  {field:"mobilePhone",title:"手机",width:25,align:\'center\',sortable:true}
        ]],
        onSortColumn:function(sort, order){
            sortFlag = true;
            if("userName"==sort){
                $(this).datagrid("autoMergeCells",[sort]);
            }else{
                $(this).datagrid("autoMergeCells");
            }
        },
        onLoadSuccess: function(data){
            if(!sortFlag) $(this).datagrid("autoMergeCells");
        }
    });

 

以上是关于easyui------自动合并行的主要内容,如果未能解决你的问题,请参考以下文章

EasyUI合并行

easyui datagrid行合并

easyui 自动动态合并单元格

easyUI datagrid 某些列占两行怎么做

easyui 单元格合并

Easyui datagrid 设置内容超过单元格宽度时自动换行显示