• EasyUI-datagrid-自动合并单元格(转)


    1.目标

      1.1表格初始化完成后,已经自动合并好需要合并的行;

      1.2当点击字段排序后,重新进行合并; 

    2.实现

      2.1 引入插件

    复制代码
    /**
     * author ____′↘夏悸
     * create date 2012-11-5
     *
     **/
    $.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.2html代码

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

    2.3js代码

    复制代码
    var sortFlag = false;
        $('#simpleDgId').datagrid({
            url:"testController.do?datagrid",
            fitColumns:true,
            singleSelect:true,
            remoteSort: false,
            columns:[[
                      {field:"age",title:"年龄",25,align:'center',sortable:true},
                      {field:"userName",title:"名称",25,align:'center',sortable:true},
                      {field:"mobilePhone",title:"手机",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");
            }
        });
    复制代码

    2.4后台

         url:"testController.do?datagrid"

         后台数据就是普通的表格数据,这里就不赘述了  

      2.5效果

  • 相关阅读:
    java常量和变量的定义规则,变长参数的使用
    测试一下windowsLiveWriter
    对转换公式为LaTeX代码要注意什么
    后台登陆骨架
    为什么要把session存入数据库
    登录功能测试
    数据库快速配置
    一个小bug
    后台测试常需要的htm样式
    在分页的基础上添加删除和(查看,原理和删除一样)
  • 原文地址:https://www.cnblogs.com/yzycoder/p/4872185.html
Copyright © 2020-2023  润新知