JS實現滑鼠點選的列變色

1.1 版本

1.2 預期效果

在預覽範本時，由於資料比較多，希望滑鼠點選某行時該行突出顯示，效果如下圖所示，那麼如何實現呢？

1.3 實現思路

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

儲存格背景相關 JS API可參考：修改儲存格背景API

2.1 範例一：滑鼠點選行變色離開時恢復

2.1.1 開啟範本

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

2.1.2 新增事件

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

 JavaScript 程式碼如下：

_g().addEffect('highlightRow', {
	color: 'red',
	trigger: 'mousedown',
});

2.1.3 效果預覽

1）PC端

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

2）行動端

APP 與 HTML5 端效果相同，如下圖所示：

2.1.4 範本下載

已完成範本可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doctw\JS\分頁預覽JS實體\滑鼠點選行變色.cpt

點選下載範本：滑鼠點選列變色.cpt

2.2 範例二：滑鼠懸浮行變色離開時恢復

2.2.1 開啟範本

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

2.2.2 新增事件

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

_g().addEffect('highlightRow', {
	color: 'red',
	trigger: 'mouseover',
});

2.2.3 效果預覽

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

注：不支援行動端。

2.2.4 範本下載

已完成範本可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doctw\JS\分頁預覽JS實體\滑鼠懸浮行變色.cpt

點選下載範本：滑鼠懸浮行變色.cpt

2.3 範例三：滑鼠點選行變色，再次點選恢復

2.3.1 開啟範本

開啟範本：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doctw\JS\分頁預覽JS實體\滑鼠點選行變色.cpt

2.3.2 新增事件

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

_g().addEffect('highlightRow',{
	color: 'red',
	trigger: 'mousedown',
	single:false
});

2.2.3 效果預覽

1）PC端

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

2）行動端

APP 與 HTML5 端效果相同，如下圖所示：

1、透過條件屬性設定了隔行背景色，仍需實現滑鼠點選該行突出顯示，此程式碼仍適用。

2、若行中儲存格設定背景填充為圖片，儲存格則不會變色。