JS實現根據元件值動態插入列

1.1 問題描述

想要實現在填報預覽的時候，根據元件所選值，動態擴展儲存格。

1.2 實現思路

儲存格的擴展計算在頁面載入結束後就固定了，所以使用公式等方式是無法實現動態擴展的。需要使用插入列API，配合JS指派方可實現需求。

API說明可以參考：API匯總

注：不支援行動端。

2.1 準備資料

1）建立資料集ds1，從FRDemoTW取數，sql語句為：SELECT * FROM S產品 limit 2

2）建立資料集ds2，從FRDemoTW取數，sql語句為：SELECT * FROM S產品

2.2 範本設計

1）製作如圖所示範本：A1為下拉複選框元件，E3和F3分別為插入和刪除列按鈕。

2）選中A1儲存格的下拉複選框元件，設定回傳值類型為「陣列」，實際值為「產品ID」，顯示值為「產品名稱」

2.3 設定元件編輯結束事件

選中A1儲存格的下拉複選框元件，新增一個編輯結束事件。

avaScript 程式碼如下：

注：使用 FR.remoteEvaluate API存在一定安全風險，使用者可根據實際情況使用，詳情可查看：全局API

var ids = this.getValue();
//獲取當前元件值
var id = $("td[id^=A]:last").attr("id");
//獲取A列最後一列的儲存格編號
var row = parseInt($("td[id^=A]:last").attr("row"));
//獲取A列最後一列的儲存格列號

setTimeout(function() {
_g().appendReportRC(ids.length, id);
//在末尾插入列
setTimeout((function() {
return function() {
for (i = 0; i < ids.length; i++) {
var mc = FR.remoteEvaluate("value('ds2','產品名稱','產品ID','" + ids[i] + "')");
var sl = FR.remoteEvaluate("value('ds2','單位數量','產品ID','" + ids[i] + "')");
var dj = FR.remoteEvaluate("value('ds2','單價','產品ID','" + ids[i] + "')");
//根據產品ID，獲取其他欄位值
_g().setCellValue(0, 0, row + i + 1, ids[i]);
_g().setCellValue(0, 1, row + i + 1, mc);
_g().setCellValue(0, 2, row + i + 1, sl);
_g().setCellValue(0, 3, row + i + 1, dj);
//給對應儲存格指派
}
}
})(), 100);
//由於插入列是非同步請求，所以需要利用閉包來確定執行順序
}, 100)

_g().setCellValue(0, 0, 0, "");
//清空A1儲存格

注：如果頁面載入較慢，則需要根據實際情況調整第一個 100 的延時時間( 1000 代表 1s )。

2.4 效果預覽

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

注：選擇值後要點選報表中有內容的儲存格，才會查詢出資料。

點選下載範本：JS實現根據元件值動態插入列.cpt