JS實現滑鼠點選的列變色

1

版本。

2

預期效果。

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

3

實現思路。

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

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

1

範例一：滑鼠點選列變色離開時恢複。

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

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

3. JavaScript 代碼如下：

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

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

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

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

注：不支援行動端。

2

範例二：滑鼠懸浮列變色離開時恢複。

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

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

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

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

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

5. 點選下載範本：滑鼠懸浮列變色.cpt。

注：不支援行動端。

3

範例三：滑鼠點選列變色，再次點選恢複。

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

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

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

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

注：不支援行動端。

1. 透過條件屬性設定了隔列背景色，仍需實現滑鼠點選該列高亮顯示，此代碼仍適用。

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