码迷,mamicode.com
首页 > 其他好文 > 详细

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

时间:2016-08-02 20:37:45      阅读:254      评论:0      收藏:0      [点我收藏+]

标签:

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: ‘列名‘,
     width: ‘15%‘,
     align: ‘center‘
   },{
     field: ‘username‘,
     title: ‘列名‘,
     width: ‘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;
                            }
                        }
                    }
                });
            });
        });
    }
});

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

标签:

原文地址:http://www.cnblogs.com/hunterCecil/p/5730485.html

(0)
(0)
   
举报
评论 一句话评论(0
登录后才能评论!
© 2014 mamicode.com 版权所有  联系我们:gaon5@hotmail.com
迷上了代码!