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

4. 效果預覽：鼠标點擊改變欄的顔色，效果如下圖2所示。

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

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

注：不支援行動端。

2

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

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

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

2. 效果預覽：滑鼠懸浮改變欄的顔色，效果如下圖所示。

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

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

3

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

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

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

注：不支援行動端。

1. 此方法使用的 JS API當背景填充為圖片時，不會隨滑鼠的行動/點選而變色，本篇文檔中的範例使用的儲存格樣式為【相容主題】→【儲存格屬性】→【樣式】→【跟隨主題】→【Head】,此樣式背景填充為【圖片】，如下圖所示。

2. 希望表頭隨滑鼠的行動/點選而變色，將背景填充為【其他】選項即可。

3. 希望表頭不隨滑鼠的行動/點選而變色，將背景填充為【圖案】即可。