JS控制儲存格元件是否可用/可見

1.1 問題描述

希望根據一些條件來動態控制元件的可用和可見狀態。比如下圖所示範本，希望當中止列選擇"是"的時候，單價清空且不可編輯。

1.2 實現思路

使用條件屬性可以在頁面初始載入後實現元件的狀態控制 ，但是後續無法根據使用者的一些操作來再次改變元件狀態，此時需要使用元件的JSAPI來實現需求。

API說明可以參考：元件通用

2.1 資料準備

建立資料集 ds1，從 FRDemoTW 取數，SQL 語句為：SELECT * FROM S產品 limit 3

2.2 範本設計

1）如圖設計範本，A2 和 B2 儲存格新增下拉框元件，C2 儲存格新增正文元件，並將對應欄位拖曳到A2、B2儲存格。

2）為 A2 儲存格設定資料字典為 FRDemoTW 庫中 S產品表的產品名稱；為 B2 儲存格設定資料字典為自訂值“是”、“否”。如下圖所示：

2.3 設定條件屬性

頁面初始化時，就需要根據中止狀態來控制單價元件的狀態，所以需要用條件屬性來實現。

選中 C2 儲存格，新增條件屬性。條件為：B2="是"，元件選擇正文元件，取消勾選「可用」設定。

2.4 設定編輯結束事件

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

JavaScript 程式碼如下：

var value = this.getValue();
//獲取當前元件值
var ro = FR.cellStr2ColumnRow(this.options.location).row;
//獲取當前行號
var widget = _g().getWidgetByCell(FR.columnRow2CellStr({
	col: 2,
	row: ro
}));
//獲取當前行的單價元件
value == "是" ? _g().setCellValue(0, 2, ro, "") : true;
//如果中止為是則清除當前行的單價
value == "是" ? widget.setEnable(false) : widget.setEnable(true);
//如果中止為是則禁用當前行的單價元件

2.5 效果預覽

儲存範本，PC端填報預覽後效果如下圖所示：

點選下載範本：JS控制儲存格元件是否可用可見.cpt

如果是要控制儲存格元件是否可見，只需要把API從 setEnable() 換成 setVisible() 即可。