自訂插入刪除欄按鈕

1.1 問題描述

預設插入刪除列按鈕類型只有插入列和刪除列 2 個選項。

那麼怎麼實現下圖所示插入和刪除欄的效果呢？

1.2 實現思路

插入刪除列按鈕是根據父子格關係來識別需要插入和刪除的資料的。所以按鈕類型仍然使用插入列和刪除列，透過設定父子格來實現插入刪除欄的需求。

注：插入刪除欄不支援欄位縱向擴展的場景。

2.1 設計填報範本

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

2）設計填報表格，B3~B8 儲存格新增正文元件，且儲存格都設定為橫向擴展，將資料集欄位拖入對應儲存格，如下圖所示：

2.2 設定插入欄按鈕

選中 B2 儲存格，給儲存格新增一個按鈕元件，按鈕類型下拉選擇插入列，按鈕名稱修改為插入欄，指定儲存格設定為B3，其餘預設設定即可，如下圖所示：

2.3 設定刪除欄按鈕

選中 B1 儲存格，給儲存格新增一個按鈕元件，按鈕類型下拉選擇刪除列，按鈕名稱修改為刪除欄，指定儲存格設定為B3，其餘預設設定即可，如下圖所示：

2.4 設定父子格

1）選中 B3 儲存格，設定其上父格為無，如下圖所示：

2）B1 和 B2 儲存格上父格都設定為 B3 儲存格，如下圖所示：

2.5 效果預覽

1）PC 端

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

2）行動端

同時支援 App 端和 H5 端預覽，效果如下圖所示：

點選下載範本：自訂插入刪除欄按鈕.cpt