JS實現滑鼠點選列與欄同時變色

1.1 版本

1.2 預期效果

滑鼠點選或者懸浮儲存格時儲存格所在的列和欄變色，如下圖所示：

1.3 實現思路

 注：此文檔方案均不支援凍結欄。

使用 JS 程式碼新增載入結束事件，設定當滑鼠點選當前列時，當前列為紅色。

儲存格背景相關 JS API可參考：滑鼠點選/懸浮時修改儲存格背景API

2.1 開啟範本

開啟內建範本：%FR_HOME%\webroot\WEB-INF\reportlets\demo\NewbieGuide\行式報表.cpt

2.2 新增事件

菜單欄選擇「範本>範本 Web 屬性>分頁預覽設定」，選擇「為該範本單獨設定」，然後新增「載入結束事件」，如下圖所示：

JavaScript 程式碼如下：

_g().addEffect('highlightCross', {
	color: 'red',
	trigger: 'mouseover',//點選則為mousedown
});

2.3 效果預覽

2.3.1 PC 端

儲存報表，點選「分頁預覽」，如 1.2 節所示。

2.3.2 行動端

App 與 HTML5 端效果相同，均為點選變色，再次點選後顏色消失，如下圖所示：

3.1 開啟範本

開啟內建範本：%FR_HOME%\webroot\WEB-INF\reportlets\demo\NewbieGuide\列式報表.cpt

3.2 新增事件

與範例一操作步驟相同，僅需將 JavaScript 程式碼修改如下：

_g().addEffect('highlightCross',{
	color: 'red',
	trigger: 'mousedown',//懸浮則為mouseover
	single:false
});

3.3 效果預覽

3.3.1 PC 端

儲存報表，點選「分頁預覽」，如下圖所示：

3.3.2 行動端

App 與 HTML5 端效果相同，均為點選變色，再次點選後顏色消失，如 2.3.2 節所示。

點選下載範本：滑鼠懸浮所在列欄變色.cpt

滑鼠點選所在列欄變色，再次點選恢復.cpt