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('highlightCell', {
	color: 'red',
	trigger: 'mousedown',
});

2.1.3 效果預覽

1）PC 端

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

2）行動端

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

2.2 範例二：滑鼠懸浮時儲存格變色，離開時恢復

2.2.1 新增事件

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

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

2.2.2 效果預覽

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

注：不支援行動端。

2.3 範例三：滑鼠點選時儲存格變色，再次點選時恢復

2.3.1 新增事件

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

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

2.3.2 效果預覽

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

2）行動端

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