看标题有点绕,好吧,那就先上结果图
这就是最终的结果图,那我们一步一步来
先实现绑定数据
HTLM
<table id="WJDCReport" class="easyui-datagrid" style="width:auto;" toolbar="#toolbar" data-options="nowrap: false"> <thead> <tr> <th data-options="field:'Title', width:100">问卷问题</th> <th data-options="field:'OptionValue', width:100">问卷选项</th> <th data-options="field:'Answer', width:100">文本内容</th> <th data-options="field:'NickName', width:100">微信昵称</th> <th data-options="field:'CommunityName', width:100">小区</th> <th data-options="field:'BuildName', width:100">楼宇</th> <th data-options="field:'UnitName', width:100">单元</th> <th data-options="field:'RoomNumber', width:100">房号</th> <th data-options="field:'CustomerName', width:100">业主姓名</th> <th data-options="field:'CustomerPhone', width:100">业主电话</th> </tr> </thead> </table>JS绑定本地数据,因为我是先请求过来的数据,自己处理了,所以使用本地绑定的方法
当然,也可以百度去研究动态绑定,这都不是重点
$("#WJDCReport").datagrid( 'loadData', tableData );先看这一步操作后的结果
重点来啦!!!!
绑定完数据后,就跟上图一样,我们要进行相同行的合并,得到最终的结果
那我就直接附上完整的代码
mergeCellsByField() 可以直接用,在绑定数据后,直接调用即可
function reportTableData(tableData) { // 绑定数据 $("#WJDCReport").datagrid( 'loadData', tableData ); // 合并 mergeCellsByField("WJDCReport", "Title,OptionValue"); } } /** * EasyUI DataGrid根据字段动态合并单元格 * 参数 tableID 要合并table的id 不要# * 参数 colList 要合并的列,用逗号分隔(例如:"name,department,office"); */ function mergeCellsByField(tableID, colList) { var ColArray = colList.split(","); var tTable = $("#" + tableID); var TableRowCnts = tTable.datagrid("getRows").length; var tmpA; var tmpB; var PerTxt = ""; var CurTxt = ""; var alertStr = ""; for (j = ColArray.length - 1; j >= 0; j--) { PerTxt = ""; tmpA = 1; tmpB = 0; for (i = 0; i <= TableRowCnts; i++) { if (i == TableRowCnts) { CurTxt = ""; } else { CurTxt = tTable.datagrid("getRows")[i][ColArray[j]]; } if (PerTxt == CurTxt) { tmpA += 1; } else { tmpB += tmpA; tTable.datagrid("mergeCells", { index: i - tmpA, field: ColArray[j], //合并字段 rowspan: tmpA, colspan: null }); tTable.datagrid("mergeCells", { //根据ColArray[j]进行合并 index: i - tmpA, field: "Ideparture", rowspan: tmpA, colspan: null }); tmpA = 1; } PerTxt = CurTxt; } } }最终结果就是本文开始的结果图,这个合并数据是在表格绑定之后调用的
因此,动态加载也可以这样子来合并表格