[通用]巧用Tab組件實現App的佈局效果

1. 概述

1.1 版本

報表伺服器版本APP 版本HTML5 行動端展現插件版本
功能變動
11.0V11.0V11.0
-

1.2 應用場景

Tab 組件能避免多層次鑽取與傳回,可以在一個報表內部進行切換,如下圖所示:


2. 範例

2.1 建立範本

1)建立一張空白的決策報表,將左上角的「Tab塊」拖入空白畫布中。

2)點選右上角的編輯按鈕 ,點選「+」增加一個 Tab標籤頁 ,如下圖所示:


3)兩個標籤頁 Tab00 、Tab10 的標題分別設定為「行業榜單」、「行業網站榜單」,如下圖所示:


4)選中「行業榜單」標籤頁 ,將左上角的「Tab塊」拖入其中,如下圖所示:


5)點選右上角的編輯按鈕,增加兩個 Tab標籤頁 ,如下圖所示:


6)三個標籤頁 Tab01 、Tab11 、Tab21 的標題分別為「手機行業」、「汽車行業」、「化妝品行業」,如下圖所示:

7)同樣的方法選中「行業網站榜單」標籤頁 ,將左上角的「Tab塊」拖入其中,點選右上角的編輯按鈕,點選「+」增加一個 Tab標籤頁。

8)兩個標籤頁的標題分別為「行業排行榜」、「地區排行榜」,如下圖所示:

2.2 參數聯動

以「行業榜單>手機行業」為例說明組件間的參數聯動,其餘 Tab標籤頁 的設定方法相同。

1)點選資料集管理面板的「+」按鈕,選擇「內建資料集」,建立一個名為「手機」的內建資料集,點選「確定」,如下圖所示:

2)選中「行業榜單>手機行業」,拖入兩個報表塊,如下圖所示:

2.2.1 report0 

1)進入 report0 編輯頁面,A1 、A2 、A3 儲存格分別輸入正文:「月度榜單」、「季度榜單」、「年度榜單」,如下圖所示:

2)選中 A1 儲存格,點選右側屬性面板的「超級連結」,點選「+」按鈕,選擇「當前決策報表物件」。

3)表單物件選擇「report1」,點選「+」按鈕新增參數,參數名為「a」,參數值為字串「月度」,如下圖所示:

4)同樣的方法為儲存格 A1 再次新增「當前決策報表物件」超連結。

5)表單物件選擇「report0」,點選「+」按鈕新增參數,參數名為「line」,參數值為字串「1」,如下圖所示:

6)同樣的方法繼續為 A2 儲存格新增兩個「當前決策報表物件」超連結:

  • 表單物件為「report1」,參數名為「a」,參數值為字串「季度」。

  • 表單物件為「report0」,參數名為「line」,參數值為字串「2」。

7)同樣的方法繼續為 A3 儲存格新增兩個「當前決策報表物件」超連結:

  • 表單物件為「report1」,參數名為「a」,參數值為字串「年度」。

  • 表單物件為「report0」,參數名為「line」,參數值為字串「3」。

8)選中 A1 儲存格,點選右側屬性面板的「條件屬性」,點選「+」按鈕。

9)在彈出的設定框中再次點選「+」按鈕,設定字體顏色為「白色」,背景為「藍色」。

10)選擇「公式」,輸入:$line = 1,點選「+增加」按鈕新增公式,即當「line」等於 1 時,A1 儲存格會變為藍底白字,如下圖所示:

11)同樣的方法為 A2 、A3 儲存格設定條件屬性:

  • A2 儲存格的條件屬性為$line = 2時,字體顏色為「白色」,背景為「藍色」,即當「line」等於 2 時,A2 儲存格會變為藍底白字。

  • A3 儲存格的條件屬性為$line = 3 時,字體顏色為「白色」,背景為「藍色」,即當「line」等於 3 時,A3 儲存格會變為藍底白字。

2.2.2 report1

1)進入「report1」編輯頁面, A1 、B1 、C1 儲存格分別輸入正文:「排名」、「品牌」、「搜尋指數」,如下圖所示:

2)A2 儲存格插入序號公式:seq(),並將左父格設定為 B2 ,即根據 B2 排序,如下圖所示:

3)將內建資料集「手機」的「品牌」和「搜尋指數」分別拖入B2、C2儲存格,如下圖所示:

4)選中 A2 儲存格,點選右側的「條件屬性」,點選「+」按鈕,設定當前行背景為「灰色」。

5)選擇「公式」,輸入:row()%2=0,點選「+增加」新增公式,即實現 隔行換色 ,如下圖所示:

6)雙擊 B2 儲存格,選擇「過濾」,設定條件為:資料列「時間段」等於參數「a」,即 report1 中的資料根據參數「a」的值的變化而變化,點選「+增加」按鈕新增公式,點選「確定」,如下圖所示:

至此,「手機行業」Tab 標籤頁設定完成,其他 Tab 標籤頁的設定與上述步驟類似,本文不再贅述。

2.3 效果預覽

參見1.2節。

注:效果預覽時, body 的行動端屬性「手機重佈局」需取消勾選。

3. 已完成範本

已完成範本查看:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\demo\analytics\sales\行業榜單排名.frm 

點擊下載範本:行業榜單排名.frm

附件列表


主題: 行動端應用
已經是第一篇
已經是最後一篇
  • 有幫助
  • 沒幫助
  • 只是瀏覽
中文(繁體)

滑鼠選中內容,快速回饋問題

滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

不再提示

10s後關閉

獲取幫助
線上支援
獲取專業技術支援,快速幫助您解決問題
工作日9:00-12:00,13:30-17:30在线
頁面反饋
針對當前網頁的建議、問題反饋
售前咨詢
業務咨詢
電話:0933-790886或 0989-092892
郵箱:taiwan@fanruan.com
頁面反饋
*問題分類
不能為空
問題描述
0/1000
不能為空

反馈已提交

网络繁忙

反饋已提交

網絡繁忙