JS實現決策報表中滾屏/跑馬燈效果

1.1 版本

1.2 預期效果

普通報表可以參考 JS實現自動滾屏/跑馬燈效果 實現跑馬燈效果，決策報表中報表塊同樣希望實現跑馬燈效果，如下圖所示：

1.3 實現思路

透過給報表塊新增「初始化後」 JS 事件實現隱藏捲軸的跑馬燈的效果。

跑馬燈的詳細API介紹可參見：跑馬燈API

1.4 注意事項

1）不支援行動端。

2）不支援報表塊定時重新整理場景。

3）安裝 自訂捲軸 插件後，當滑鼠移入捲動播放的所在位置後將優先展示插件效果。

2.1 資料準備

建立決策報表，建立資料集 ds1 ，SQL 語句為：SELECT * FROM 銷量，如下圖所示：

2.2 報表設計

1）將報表塊 report0 拖入到 body 組件中，如下圖設計報表塊的表格。

2）選中報表塊 report0 ，點選「編輯」，凍結第 1 行，如下圖所示：

2.3 新增事件

選中報表塊 report0 ，新增初始化事件，如下圖所示：

JavaScript 代碼如下：

setTimeout(function(){
     _g().getWidgetByName('report0').startMarquee()
}, 500);

注1：如果報表塊載入比較慢沒有實現效果，可以適當調整延時函式 setTimeout( ) 的延時時間。

注2：setTimeout( ) 函式的單位為毫秒，跑馬燈API單位為秒，需要注意區分。

2.4 效果預覽

儲存報表，點選「PC端預覽」，跑馬燈效果如下圖所示：

3.1 顯示隱藏報表塊並自動載入跑馬燈效果

新增一種報表塊跑馬燈應用場景和設定方法：報表前端展示時，報表塊處於隱藏不顯示的狀態，點選按鈕後，報表塊可以顯示並自動載入跑馬燈效果。如下圖所示：

3.1.1 報表設計

1）將報表塊 report0 和按鈕元件 button0_c 拖入到 body 組件中，如下圖設計報表塊的表格，報表塊不勾選元件「可見」，隱藏報表塊。

2）選中報表塊組件，點選編輯，凍結第 1 行，如下圖所示：

3.1.2 新增事件

1）選中報表塊組件，給報表塊新增一個初始化事件，實現跑馬燈效果，如下圖所示：

JavaScript  代碼如下：

setTimeout(function() {
       //隐藏報表塊report0的滾動條（此報表塊名爲report0，根據具體情況修改）
    $("div[widgetname=REPORT0]").find(".frozen-north").css({
        'overflow-x':'hidden',
        'overflow-y':'hidden'
    });
    $("div[widgetname=REPORT0]").find(".frozen-center").css({
        'overflow-x':'hidden',
        'overflow-y':'hidden'
    });
    _g().getWidgetByName('report0').startMarquee()
},1000);

2）選中按鈕組件，給按鈕新增一個點選事件，點選之後可以顯示被隱藏的報表塊，如下圖所示：

JavaScript 代碼如下：

this.options.form.getWidgetByName('REPORT0').setVisible(true)

3.1.3 效果預覽

儲存報表，點選「PC端預覽」，效果如下圖所示：

3.2 點選按鈕取消跑馬燈效果

3.2.1 報表設計

在 3.1 範例的基礎上新增按鈕元件 button0_a ，元件名稱為「關閉跑馬燈」，如下圖所示：

3.2.2 新增 JS 代碼

選中新增的按鈕組件，給按鈕新增一個點選事件，點選之後可以關閉報表塊的跑馬燈效果，如下圖所示：

JavaScript 代碼如下：

_g().getWidgetByName('report0').stopMarquee();

3.2.3 效果預覽

3.3 多報表塊捲動

3.3.1 報表設計

在第二節範例的基礎上，希望實現多報表塊捲動，只需要在 body 內增加對應的報表塊數量，並分別對報表塊新增事件即可，如下圖所示：

僅需要將 2.3 節的 JavaScript 代碼中報表塊名詞更換為對應的報表塊名稱即可。

3.3.2 效果預覽

儲存報表，點選「PC端預覽」，效果如下圖所示：

已完成的範本請參見：

03-報表塊實現跑馬燈效果.frm

報表塊跑馬燈擴展應用.frm