• easyUI---datagrid合并单元格代码实现


    1、html部分:

    <div id="table1"></div>
    

     2、js部分:

    $('#table1').datagrid({
        data : data,
        loadFilter: pagerFilter,
        height: $(document).height()*0.87,
        striped: true,
        selectOnCheck: true,
        pagination: true,
        pageSize:10,
        pageList:[10,20,30,40,50],
        onLoadSuccess: function (data) {
           if (data.rows.length > 0) {
               $('#table1').datagrid("autoMergeCells", ['userid']);
           }
        },
        columns: [
       [{
         field: 'userid',
         title: '列名',
          '15%',
         align: 'center'
       },{
         field: 'username',
         title: '列名',
          '15%',
         align: 'center'
       }]
    });
    
    autoMergeCells方法扩展了datagrid的方法,实现如下:
    /**
    * EasyUI DataGrid根据字段动态合并单元格
    * 参数 jq 要合并table的id
    * 参数 fields 要合并的列,用逗号分隔(例如:"field1,field2,field3,...");
    */
    $.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;
                                }
                            }
                        }
                    });
                });
            });
        }
    });
  • 相关阅读:
    [Dynamic Language] Python 命名参数
    [Dynamic Language] Python OrderedDict 保证按插入的顺序迭代输出
    div水平垂直居中
    项目小结(v1.2v1.4)
    如何能尽快看完一个网页的结构
    在项目中使用谁存储过程orTSQL语句
    UDP协议(数据报协议)
    风恋尘香欢迎你!!!
    .NEt牛人帮帮我!!!谢谢啦~~~
    LWUIT 简易漂亮的相册
  • 原文地址:https://www.cnblogs.com/hunterCecil/p/5730485.html
Copyright © 2020-2023  润新知