1. 概述
1.1 版本
| 報表伺服器版本 | 功能變更 |
|---|---|
| 11.0 | -- |
1.2 預期效果
在一些大型的展示屏上，目前靜態的圖文展示已滿足不了市場需求，有時候可能需要實現一些動態圖文展示效果，例如跑馬燈滾屏效果，那麼要如何透過帆軟報表來實現呢？預期效果如下：
1）豎屏捲動：
2）橫屏捲動：
3）不規則橫屏捲動：
注：在決策報表中，也可以直接使用官方提供的插件：捲動訊息元件
1.3 實現思路
可以透過儲存格的純 HTML 展示效果來實現。
若想實現首位相接的滾屏效果可參考：JS實現首尾相接的跑馬燈
2. 範例：豎屏捲動
2.1 準備資料
建立普通報表，建立一個內建資料集 Embedded1，只新增一個欄位，自訂一些正文資料，如下圖所示：
2.2 設計報表
將資料集中的資訊欄位拖至 D4 儲存格，並設定擴展方向為不擴展。設計表格樣式如下圖所示：
右擊 D 列將其隱藏。
2.3 儲存格插入公式
2.3.1 從上往下，水平靠左捲動
選中 B4 儲存格，按滑鼠右鍵選擇「儲存格元素>插入公式」，公式如下：
"<marquee id='affiche' align='left' behavior='scroll' bgcolor='#ffffff' direction='up' height='250'
width='400' hspace='0' vspace='2' loop='-1' scrollamount='10' scrolldelay='100' onMouseOut='this.start()'
onMouseOver='this.stop()'>" + REPLACE(D4, ",", "<br /><br />") + "</marquee>"注：公式是為了將 D4 儲存格的內容連結到 HTML 語句中。REPLACE(D4, ",", "<br/><br/>") 意思是將 D4 儲存格內容中的 "," 更換成"<br/><br/>"，<br /><br />在 HTML 中表示「換行」。
2.3.2 從下往上，水平置中捲動
只需要將上面的公式修改為：
"<marquee id='affiche' style='text-align:center;' behavior='scroll' behavior='scroll' bgcolor='#ffffff'
direction='up' height='250' width='400' hspace='0' vspace='2' loop='-1' scrollamount='10' scrolldelay='100'
onMouseOut='this.start()' onMouseOver='this.stop()'>" + REPLACE(D4, ",", "<br /><br />") + "</marquee>"
2.3.3 公式參數解譯
| 參數 | 說明 |
|---|---|
| align |
|
| style |
|
| behavior |
|
| bgcolor |
|
| direction |
|
| height |
|
| width |
|
| hspace |
|
| vspace |
|
| loop |
|
| scrollamount |
|
| scrolldelay |
|
| onMouseOut=this.start() | 表示當滑鼠移開的時候繼續捲動 |
| onMouseOver=this.stop() | 表示當滑鼠懸停的時候停止捲動 |
2.4 設定儲存格屬性
2.4.1 用 HTML 顯示儲存格內容
選中 B4 儲存格，將「儲存格屬性>其他」顯示內容設定為「用 HTML 顯示內容」，如下圖所示：
2.4.2 取消儲存格自動調整行高
選中 C4、D4 儲存格，右擊選擇其他，選擇「不自動調整」.
2.5 效果預覽
2.5.1 PC 端
儲存報表，點選「分頁預覽」，效果與 1.1 節豎屏捲動效果一致。
2.5.2 行動端
App 端和 HTML5 端均支援捲動效果，但不支援透過滑鼠行動使其暫停並繼續捲動的效果，如下圖所示：
3. 範例：橫屏捲動
3.1 準備資料
建立普通報表，建立一個內建資料集 Embedded1，只新增一個欄位，自訂一些正文資料，如下圖所示：
3.2 設計報表
將資料欄拖至 A1 儲存格，並設定擴展方向為「不擴展」，右擊 A 列將其隱藏，表格樣式如下圖所示：
3.3 儲存格插入公式
在 B2 儲存格插入公式：
"<marquee id='affiche' style='text-align:center;display:table-cell;vertical-align:middle;' behavior='scroll'
bgcolor='#ffffff' direction='left' height='100%' width='500%' hspace='0' vspace='2' loop='-1' scrollamount='10'
scrolldelay='100' onMouseOut='this.start()' onMouseOver='this.stop()'>" + REPLACE(A1, ",", " ") + "</marquee>"
注：公式參數解譯請參考 2.3.3 節。
3.4 設定儲存格屬性
選中 B2 儲存格，設定「儲存格屬性>其他」，選擇「基本」下「不自動調整」，顯示內容設定為「用 HTML 顯示內容」，如下圖所示：
3.5 效果預覽
3.5.1 PC 端
儲存報表，點選「分頁預覽」，可以看到正文從右往左，垂直置中捲動，效果與 1.1 節橫屏捲動效果一致。
3.5.2 行動端
App 端和 HTML5 端均支援捲動效果，但不支援透過滑鼠行動使其暫停並繼續捲動的效果，如下圖所示：
4. 範例：不規則橫屏捲動
4.1 準備資料
建立普通報表，建立一個內建資料集 Embedded1，只新增一個欄位，自訂一些正文資料，如下圖所示：
4.2 設計報表
將資料欄拖入 A3 儲存格，並設定其擴展方向為「縱向擴展」，表格樣式如下圖所示：
最後將 A 列隱藏。
4.3 儲存格插入公式
在 B3 儲存格插入公式：
"<marquee id='affiche' align='left' behavior='scroll' bgcolor='#ffffff' direction='left' height='250' width='400'
hspace='0' vspace='2' loop='-1' scrollamount='"+(rand()*(11-1)+1)+"' scrolldelay='100' onMouseOut='this.start()'
onMouseOver='this.stop()'>" + REPLACE(A3, ",", "<br />") + "</marquee>"
注：公式參數解譯請參考 2.3.3 節。
其中scrollamount='"+(rand()*(11-1)+1)+"' 表示生成一個位於 11 和 1 之間的隨機數，作為運動速度的值。
4.4 設定儲存格屬性
選中 B3 儲存格，設定「儲存格屬性>其他」，選擇「基本」下「不自動調整」，顯示內容設定為「用 HTML 顯示內容」，如下圖所示：
4.5 效果預覽
4.5.1 PC 端
儲存報表，點選「分頁預覽」，效果與 1.1 節不規則橫屏捲動效果一致。
4.5.2 行動端
App 端和 HTML5 端均支援捲動效果，但不支援透過滑鼠行動使其暫停並繼續捲動的效果，如下圖所示：
5. 範本下載
已完成範本可參見：
%FR_HOME%\webroot\WEB-INF\reportlets\demo\form\以html實現縱向跑馬燈特效.cpt
%FR_HOME%\webroot\WEB-INF\reportlets\demo\form\以html實現橫向跑馬燈特效.cpt
%FR_HOME%\webroot\WEB-INF\reportlets\demo\form\以html實現不規則橫向跑馬燈特效.cpt
點選下載範本：
