EasyUI DataGrid 相同连续列合并

1.可扩展Easyui js或着将一下代码放入你加载页面的js

$.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.使用方法：
　　在datagrid的onLoadSuccess事件里面进行调用，可以实现数据加载完成后，自动合并。也可以手动调用该方法。
　　onLoadSuccess: function(data) {
            //所有列进行合并操作
            //$(this).datagrid("autoMergeCells");
            //指定列进行合并操作
            $(this).datagrid("autoMergeCells", ['fileId1','filedId2']);
        }
　　fileId:是datagrid定义的列

3.效果图

转载于:https://www.cnblogs.com/first-ykw/p/7205086.html