【開發筆記】使用easyUI DataGrid繫結本地資料,併合並列相同行的欄位
阿新 • • 發佈:2018-12-17
看標題有點繞,好吧,那就先上結果圖
這就是最終的結果圖,那我們一步一步來
先實現繫結資料
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; } } }
最終結果就是本文開始的結果圖,這個合併資料是在表格繫結之後呼叫的
因此,動態載入也可以這樣子來合併表格