報表實現滾動的公告效果

Dashboard 以豐富的動態、可交互的可視化界面爲用戶提供了更好的數據使用體驗，讓決策者可以更高效的瞭解企業的重要信息和細節層次。在 DBD 的各類動態效果中，滾屏是較爲常見的一種，例以下圖中的數據列表由於佈局是固定的，所以就須要滾動顯示數據。

一般報表中見到的滾屏是由於「頁面大、窗口小」，也就是打開的窗口區域容納不了整個頁面的內容，須要靠鍵盤的方向鍵或鼠標滾輪來移動查看。而在 DBD 中，爲了更好的交互效果，須要滾動自動持續進行，只有當鼠標移到該區域時才暫停。這種方式雖然說已經比較常見了，但通常來講報表廠商卻並無直接提供，而是須要經過 jquery,JS 來實現。如今我就給你們介紹一下如何實現這種文字滾屏效果。

咱們將在潤乾報表設計器自帶的「設備故障分析.rpx」基礎上實現文字滾屏實例。

1. 數據集整理

對於從數據庫讀取的數據，能夠經過集算器，將數據整理成下面截圖中的效果。爲了方便作效果，這裏我直接將 ds2 這個內建數據中的全部字段的值整理到「設備」這個字段中，而且在裏面加上了些空格，以便頁面上縮進的效果好看些。

2. 合併單元格

將 G15 列刪除，B15—F15 選中，合併。

3. 單元格數據類型設置爲 html

4. 設置單元格表達式，如上圖所示。下面是具體的表達式。

=「」+replace(string@q(ds2.select( 設備)),「,」,「
」)+「」

其中：

onmouseover=this.stop() 表示當鼠標以上區域的時候滾動中止；

onmouseout=this.start() 表示當鼠標移開的時候繼續滾動。

5. 調整樣式

原 B15-F15 設置了各行異色，由於咱們的文字滾動項做爲統一的一串內容，因此按照以上設置，效果感受會有些突兀，以下圖所示。

去掉 B15-F15 背景色的設置，這樣滾動區域就總體渾然一體。

 

通過以上步驟咱們的數據列表就在 DBD 面板中滾動起來了，而且當鼠標指向數據的時候就會中止滾動，鼠標移開的時候就繼續滾動了，這樣的交互效果無疑會爲你的大屏展示錦上添花。

上面這個小例子簡單實現了文字滾動顯示的效果。下面我具體講解下看似神奇的標籤的各個屬性值，相信看事後必定會幫助您實現更好的文字滾動效果：

 

另外，您也能夠將 <marquee> 和 </marquee> 之間的內容替換成圖像或其它對象。

怎麼樣，是否是您已經在摩拳擦掌躍躍欲試了？別猶豫，讓咱們一塊兒來豐富 Dashboard 效果，讓頁面效果動起來吧！