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('highlightCol', {
	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 新增事件

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

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

2.2.2 效果預覽

滑鼠懸浮改變列的顏色，效果如下圖所示：

注：不支援行動端。

2.2.3 範本下載

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

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

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

2.3.1 新增事件

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

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

2.3.2 效果預覽

1）PC 端

2）行動端

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

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

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

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