JS實現參數聯動層級限制彈出提示框

1.1 預期效果

參數聯動時，如果參數之間存在層級關係，往往需要按照層級關係來設定參數，當使用者的操作不滿足層級關係時，需要給出彈窗提示。

例如下面範例中實現的效果：使用者在查詢時，需要按照貨主地區>貨主城市這樣的順序來選擇參數，如果直接先選擇貨主城市，那麼會彈出提示框，說明操作不合法。

1.2 實現思路

給次級參數元件新增編輯前 JS 事件，如果該元件的上級參數元件中沒有內容，那麼彈出非法操作提示框。

2.1 資料準備

建立資料集 ds1，SQL 語句為：select * from 訂單 where 貨主地區='${貨主地區}' and 貨主城市='${貨主城市}'，如下圖所示：

建立資料集 ds2，SQL 語句為：select 貨主地區 from 訂單，如下圖所示：

建立資料集 ds3，SQL 語句為：select 貨主城市 from 訂單 where 貨主地區='${貨主地區}'，如下圖所示：

2.2 設計表格

1）設計表格樣式，將對應的欄位拖入表格中，如下圖所示：

2）將參數貨主地區和貨主城市全部新增到參數管理面板中，並選擇下拉框元件，如下圖所示：

3）參數貨主地區的下拉框綁定資料字典，類型設定為資料查詢，資料集為 ds2 ，實際值和顯示值都為貨主地區，如下圖所示：

4）參數貨主城市的下拉框綁定資料字典，類型設定為資料查詢，資料集為ds3，實際值和顯示值都為貨主城市，如下圖所示：

2.3 新增事件

選中參數貨主城市的下拉框元件，新增一個編輯前的 JS 事件，JS 程式碼如下：

var a=_g().getParameterContainer().getWidgetByName('貨主地區').getValue();
if(a.length<=0){
FR.Msg.alert("提示",'親，請先選擇貨主地區哦'+a);
};

2.4 效果預覽

2.4.1 PC 端

儲存報表，點選分頁預覽，先下拉選擇貨主城市時，會彈出提示框資訊“親，請先選擇貨主地區哦”，按照層級關係貨主地區>貨主城市選擇是正常的，如下圖所示：

2.4.2 行動端

App 和 HTML5 效果如下圖所示：

點選下載範本：JS實現參數聯動層級限制彈出提示框.cpt