FVS實現資料庫表欄位控制Tab標簽頁顯隱

1.1 預期效果

注：使用者使用該範本時需要先準備資料庫表 。

透過資料庫表中設定的欄位值，控制 FVS 中 Tab 組件標籤頁是否顯示 。

資料庫表有兩個欄位：TYPE（春、夏、秋、冬）和 SITUATION（顯示、隱藏）。如下圖所示：

Tab 組件共有 4 個標籤頁：春、夏、秋、冬，前端展現時根據資料庫表的 SITUATION 欄位內容只顯示春、夏。如下圖所示：

1.2 實現思路

在資料庫表中新增控制 Tab 組件標籤頁是否顯示的權限值，透過表格組件的初始化後事件實現。

2.1 準備資料庫表

首先在本地資料庫中建立一個表，表名為 SEASON，包含兩個欄位為 TYPE 和 SITUATION 。表樣式如下圖所示：

2.2 建立範本

1）點選設計器左上角菜單欄「檔案>建立視覺化看板」，建立一張空白視覺化看板。如下圖所示：

2）根據實際情況自訂視覺化看板名稱、畫布大小、範本樣式，最後點選「建立看板」。如下圖所示：

2.3 添加並設計Tab組件

1）點選範本畫布左上角「其他>Tab」，將 Tab 組件新增到畫布中。如下圖所示：

2）點選組件右上角「建立標籤頁」重新整理增三個標籤頁。如下圖所示：

3）向每個標籤頁中均拖入一個表格組件，並調整組件大小。以 標籤頁1 為例，如下圖所示：

4）選中右側 Tab 列表中的 Tab 組件，點選「組件」，名稱設定為「季節」。如下圖所示：

5）4 個標籤頁的名稱分別設定為「春、夏、秋、冬」，標題內容也分別設定「春、夏、秋、冬」。以標籤頁1 為例，如下圖所示：

6）4 個表格組件的名稱分別設定為「Sping、Summer、Autumn、Winter」，即英文的春、夏、秋、冬。以 表格1 為例，如下圖所示：

7）選中表格組件，點選「內容」，點選「編輯組件」按鈕可進入組件編輯介面。以 Sping 為例，如下圖所示：

8）進入表格組件編輯介面後，可輸入自訂的正文內容。以 Sping 為例，如下圖所示：

9）點選組件編輯介面左上角的「傳回視覺化看板」可傳回視覺化看板介面。

10）選中右側 Tab 列表的 Tab 組件，點選「內容」，佈局方式設定為「等分佈局」。如下圖所示：

2.4 新增初始化後事件

選中任意一個表格組件，新增一個初始化後事件。

1）以表格 Spring 為例，選中右側 Tab 列表中的表格 Spring ，點選「交互>新增事件>初始化後>JavaScript」輸入 JS 程式碼。如下圖所示：

JS 程式碼如下所示：

setTimeout(function(){
for(var i = 0; i < a.length; i++) { 
    for(var j=0;j<= a[i].length;j++){ 
duchamp.getWidgetByName('季節').getPage(a[j]).setVisible(false);
    }
}
  }, 50)

2）繼續點選「參數設定」，新增一個參數a ，參數類型選擇「自訂公式編輯」，值為公式：split(SQL("FRDemo","SELECT TYPE FROM SEASON WHERE SITUATION='隱藏'",1),",") 。公式說明如下表所示：

2.5 效果預覽

2.5.1 PC 端

範本完成後，點選右上角「預覽」。效果如 1.1 節預期效果所示。

2.5.2 行動端

預覽方式請參考 FVS行動端預覽 ，效果如下圖所示：

點選下載範本：FVS中實現資料庫表欄位控制標籤頁隱藏.fvs