JS獲取擴展元件的所有值

1.1 問題描述

在做填報報表時，新增的填報元件是擴展顯示的，需要獲取擴展的填報元件的所有值。如下圖所示，獲取無線電鈕組元件擴展的所有值。

1.2 實現思路

利用元件API，根據元件名獲取元件物件陣列，遍歷獲取所有元件選擇的值。API說明可以參考：填報預覽專有、元件通用

2.1 準備擴展元件

2.1.1 無線電鈕組元件

1）建立範本，在 A1 儲存格新增「無線電鈕組元件」，元件名設定為 p1，如下圖所示：

注：元件名稱 p1 將和即將新增點的 JS 配合使用，若修改，請修改 JS 中相應的程式碼。

2）選定 A1 儲存格，設定 A1 儲存格縱向擴展，如下圖所示：

3）選定 A1儲存格「無線電鈕組元件」，給無線電鈕組元件新增資料字典，如下圖所示：

2.1.2 插入列按鈕

在 B1 儲存格中新增「按鈕元件」，設定按鈕類型為「插入列」，指定儲存格為 A1，如下圖所示：

2.2 獲取擴展元件值

1）在 A3 儲存格中新增「按鈕元件」，設定按鈕類型為「普通」，按鈕名稱為「獲取無線電鈕組所有值」，如下圖所示：

2）為 A3 儲存格「按鈕元件」，新增一個「點選」事件，如下圖所示：

JavaScript 程式碼如下：

var temp = "";
var arr = _g().getWidgetsByName("p1");
//獲取擴展無線電鈕組p1的元件物件陣列
if (arr[0] != undefined) {
	for (var i = 0; i < arr.length; i++) {
		temp = temp + arr[i].getValue() + ' ';
		//如果元件長度大於1，則遍歷獲取元件值並連接
	}
} else {
	temp = arr.getValue();
	//如果元件長度為1，則直接獲取元件值
}
alert(temp);

2.3 預覽效果

2.3.1 PC 端

儲存範本，選擇「填報預覽」，PC 端實現效果下圖所示：

2.3.2 行動端

App 及 HTML5 效果如下圖所示：

點選下載範本：JS獲取擴展元件的所有值.cpt