1. 程式人生 > >【開發筆記】使用easyUI DataGrid繫結本地資料,併合並列相同行的欄位

【開發筆記】使用easyUI DataGrid繫結本地資料,併合並列相同行的欄位

看標題有點繞,好吧,那就先上結果圖

這就是最終的結果圖,那我們一步一步來

先實現繫結資料

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;
		}
	}
}

最終結果就是本文開始的結果圖,這個合併資料是在表格繫結之後呼叫的

因此,動態載入也可以這樣子來合併表格