1.1 問題描述

在填報錄入資料時，希望序號可以自動生成，且新增或刪除資料列時，序號不會斷開，效果如下圖所示：

1.2 實現思路

使用 seq() 函式進行排序。由於插入刪除列會觸發頁面的載入結束事件，所以可以在載入結束事件中，利用前端 JS API實現每次插入刪除列後重新計算序號的效果。

注：不支援行動端。

2.1 設計報表

1）建立資料庫查詢資料集 ds1，SQL 語句為：SELECT * FROM Sales

2）設計填報表格，將資料集欄位拖入對應儲存格，表格設計如下圖所示：

3）A3 儲存格插入公式SEQ() ，左父格設定為 B3 ，如下圖所示：

注：一定要將 A3 儲存格左父格設定為 B3 ，因為只有這樣新增資料時，序號才會跟着擴展。

4）G3 儲存格新增 「按鈕元件」，按鈕類型選擇「插入列」，指定儲存格為 B3，如下圖所示：

5）H3 儲存格增加 「按鈕元件」，按鈕類型選擇「刪除列」，指定儲存格為 B3，如下圖所示：

6) 選中 A3 儲存格，設定「儲存格屬性>其他>插入列策略」為「原值」，如下圖所示：

2.2 設定載入結束事件

1）菜單欄點選「範本>範本Web屬性>填報頁面設定」，選擇「為該範本單獨設定」，新增「載入結束事件」，如下圖所示：

JavaScript 程式碼如下：

var $tds = $('.x-table td[col=0][fm="SEQ()"]:visible'); 
//獲取第1欄中可見的序號儲存格（A欄) 
var n = 0;
$tds.each(function(i, e) {
	n = n + 1;
	$(e).text(n); 
//將當前編號重新設定 
})

該 JS 中的核心語句為：$('.x-table td[col=0][fm="SEQ()"]:visible')，說明如下：

col=0：獲取第一欄（A欄）

fm="SEQ()"：獲取寫了 SEQ() 公式的儲存格（ JS 中 SEQ() 的大小寫需和範本中的公式保持一致）

visible：獲取可見儲存格（排除掉隱藏列）

2.3 效果預覽

儲存報表，點選填報預覽，效果如下圖所示：

2.4 範本下載

點選下載範本：插入刪除列重新編號.cpt

2.5 注意事項

上述方案在插入刪除列後顯示的序號為顯示值，無法提交入庫，僅作為頁面展示效果。如果希望將序號同時提交入庫，需要給對應儲存格賦實際值才可以。具體方案為將載入結束事件中的JavaScript 程式碼更換成如下程式碼：

var $tds = $('.x-table td[col=0][idx=0]:visible:not([fmt="T"])');
//獲取第1欄中可見的序號儲存格（A欄) 
var n = 0;
$tds.each(function(i, e) {
	n = n + 1;
var row = $(e).attr("row");
//獲取列號
	_g().setCellValue(0, 0, row, n);
//將當前編號重新設定 
})

該JS中的核心語句為：$('.x-table td[col=0][idx=0]:visible:not([fmt="T"])')，說明如下：

col=0：獲取第一欄（A欄）

idx=0：排除掉序號儲存格下方的幹擾元素，固定寫法無需修改

not([fmt="T"])：排除掉序號儲存格上方的標題元素，固定寫法無需修改

visible：獲取可見儲存格（排除掉隱藏列）

注：採用此方案給序號儲存格賦實際值，在資料量較大的時候會造成頁面卡頓，需視實際情況考慮是否使用。

3.1 當範本下面出現其他內容時，對其他內容不進行排序

3.1.1 問題描述

填報範本下方還有一些內容和其餘的無關，但是點選插入列，ID下面會多出一些欄位，而且是有規律的，是ID的序號被延伸下來

3.1.2 解決方案

1）透過觀察範本可以得知，「我是多餘的」這個欄位在範本中因為父格關係也會隨着變化

2）因此修改載入結束後事件的 JavaScript 程式碼，JavaScript 程式碼如下：

注：如下程式碼僅對新增插入列生效，若需要實現刪除列後重新編號，請結合實際情況修改程式碼。

var $tds = $('.x-table td[col=0][fm="SEQ()"]:visible'); 
//獲取第1欄中可見的序號儲存格（A欄) 
var n = 0;
$tds.each(function(i, e) {
if(4>i>=2){
	n = n + 1;
	$(e).text(n); //將當前編號重新設定 
	}
})
window.deleteflag=0;window.appendflag=0;

3）儲存後，填報預覽效果如下：

3.2 範本上下都有其餘的內容，對其餘內容不排序

3.2.1 問題描述

填報範本上方以及下方還有一些內容和其餘的無關，但是點選插入列，其餘的內容會根據編號進行變更

3.2.2 解決方案

1）修改載入結束後事件的 JavaScript 程式碼，JavaScript 程式碼如下：

注：如下程式碼僅對新增插入列生效，若需要實現刪除列後重新編號，請結合實際情況修改程式碼。

if(window.deleteflag==1||window.appendflag==1){//如果是新增標記的，重新編號 
    var $tds=$('.x-table td[col=1]:visible:not(:empty)');//判斷不為空
   var n=0; 
   $tds.each(function(i,e){ 
   	  if(i>=2){//範本中從哪一可見列開始編號的，列號是從0開始的，所以用列號-1，比如這個範本是從第3列開始的，就是2           
          n=n+1; 
          $(e).text(n);//將當前編號重新設定 
         } 
   }); 
   window.deleteflag=0;//清除刪除列標記
   window.appendflag=0;//清除新增列標記 
 }

2）儲存後，填報預覽效果如下：