1.目標(biāo)

? 1.1表格初始化完成后，已經(jīng)自動(dòng)合并好需要合并的行；

? 1.2當(dāng)點(diǎn)擊字段排序后，重新進(jìn)行合并；?

2.實(shí)現(xiàn)

? 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:"年齡",width:25,align:'center',sortable:true}, {field:"userName",title:"名稱",width:25,align:'center',sortable:true}, {field:"mobilePhone",title:"手機(jī)",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"); } });

2.4后臺(tái)

? ? ?url:"testController.do?datagrid"

? ? ?后臺(tái)數(shù)據(jù)就是普通的表格數(shù)據(jù)，這里就不贅述了??

? 2.5效果

?

轉(zhuǎn)載于:https://www.cnblogs.com/yzycoder/p/4872185.html

總結(jié)

以上是生活随笔為你收集整理的EasyUI-datagrid-自动合并单元格(转)的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。