JS實現滑鼠點選儲存格變色

1

版本。

2

預期效果。

1. 滑鼠點選儲存格時儲存格變成紅色，效果如下圖所示。

3

實現思路。

1. 使用 JS 代碼新增載入結束事件，設定當滑鼠點選儲存格時，儲存格為紅色。

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

1

範例一：滑鼠點選時儲存格變色，離開時恢複。

1. 開啟範本：開啟範本：【%FR_HOME%\webroot\WEB-INF\reportlets\demotw\NewbieGuide\列式報表.cpt】。

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

3. JavaScript 代碼如下：

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

4. 效果預覽：儲存報表，點選【分頁預覽】，效果如第一章第2節所示。

注：不支援行動端。

2

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

1. 新增事件：與範例一操作步驟相同，僅需修改 JavaScript 代碼即可，JavaScript 代碼如下：

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

2. 效果預覽：儲存報表，點選【分頁預覽】，效果如下圖所示。

注：不支援行動端。

3

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

1. 新增事件：與範例一操作步驟相同，僅需修改 JavaScript 代碼即可，JavaScript 代碼如下。

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

2. 效果預覽：儲存報表，點選【分頁預覽】，效果如下圖所示。

注：不支援行動端。