JS實現儲存格擴展後內容相同進行合併

1.1 問題描述

如下，省份和城市這兩列是橫向擴展出來的，當省份和城市相同時，如何合併儲存格呢

想要實現的效果如下

1.2 實現思路

使用 JS 判斷兩個儲存格的值是否相等，相等時合併儲存格。

2.1 建立範本

1）建立一張普通報表

2）建立資料庫查詢ds1，SQL 語句如下：

SELECT substr(訂購日期,1,4) as 年份,貨主省份,貨主城市,

count(1) as 數量

FROM S訂單

where 貨主省份 in ('上海','北京','天津','山東','山西')

group by substr(訂購日期,1,4),貨主省份,貨主城市 

3）報表主體設計如下，其中B1 , B2 儲存格設定「橫向擴展」，A3，B3 儲存格為「縱向擴展」。

2.2 新增事件

點選菜單欄「範本>範本Web屬性>分頁預覽設定」，選擇「為該範本單獨設定」，新增一個「載入結束」事件，如下圖所示：

Javascript 程式碼如下：

$(".x-table tr:first td").each(function() {
	// 遍歷第一行儲存格
	var id = $(this).attr("id"); // 提取儲存格的id屬性
	// 判斷當前儲存格的值是否與下一行對應的儲存格的值相等
	if ($(this).text() == $("td[id^=" + id.substr(0, 1) + "2-" + "]").text()) {
		$("td[id^=" + id.substr(0, 1) + "2-" + "]").remove(); // 刪除下一行對應的儲存格
		$(this).attr("rowspan", 2); // 當前儲存格合併兩行
	}
});
// 解決第二行後合併失效的問題
$(".x-table tr:eq(3) td").each(function() {
	// eq(3)是第四行，按陣列索引拿
	var id = $(this).attr("id"); // 提取儲存格的id屬性
	// 判斷當前儲存格的值是否與下一行對應的儲存格的值相等
	if ($(this).text() === $("td[id^=" + id.substr(0, 1) + "5-" + "]").text()) {
		// 如果是第五列，這裏得寫5，而不是按陣列索引拿
		$("td[id^=" + id.substr(0, 1) + "5-" + "]").remove(); // 刪除下一行對應的儲存格
		$(this).attr("rowspan", 2); // 當前儲存格合併兩行
	}
});

2.2 效果預覽

儲存，分頁預覽，如下圖所示：

注1：不支援行動端。

注2：此效果不支援匯出和列印。

點選下載範本：擴展後連續儲存格合併.cpt