JS實現鼠标點擊行變色

1.1 預期效果

在預覽模板時，由於數據比較多，希望鼠标點擊某行時該行高亮顯示，效果如下圖所示，那麽如何實現呢？

1.2 實現思路

給模板增加加載結束事件，設置當鼠标點擊當前行時，當前行爲紅色。

2.1 示例一：鼠标點擊行變色

2.1.1 打開模板

打開模板：%FR_HOME%\webroot\WEB-INF\reportlets\demo\NewbieGuide\行式報表.cpt

2.1.2 添加事件

菜單欄點擊模板>模板 Web 屬性>分頁預覽設置，選擇爲該模板單獨設置，然後添加加載結束事件，如下圖所示：

 JavaScript 代碼如下：

contentPane.makeHighlight('red'); //使點擊的行變成紅色

2.1.3 效果預覽

保存報表，點擊分頁預覽，效果如下圖所示：

注：不支持移動端。

2.1.4 模板下載

已完成模板可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\分頁預覽JS實例\鼠标點擊行變色.cpt

點擊下載模板：鼠标點擊行變色.cpt

2.2 示例二：鼠标懸浮行變色

2.2.1 打開模板

打開模板：%FR_HOME%\webroot\WEB-INF\reportlets\demo\NewbieGuide\行式報表.cpt

2.2.2 添加事件

菜單欄點擊模板>模板 Web 屬性>分頁預覽設置，選擇爲該模板單獨設置，然後添加加載結束事件，如下圖所示：

 JavaScript 代碼如下：

contentPane.makeHighlight('red','mouseover');

2.2.3 效果預覽

保存報表，點擊分頁預覽，效果如下圖所示：

注：不支持移動端。

2.2.4 模板下載

已完成模板可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\分頁預覽JS實例\鼠标懸浮行變色.cpt

點擊下載模板：鼠标懸浮行變色.cpt

2.3 示例三：隔行變色模板鼠标點擊行變色

如果通過條件屬性設置了隔行/列設置背景色，還要實現鼠标點擊該行高亮顯示，需要修改 JavaScript 代碼。

2.3.1 打開模板

打開模板：%FR_HOME%\webroot\WEB-INF\reportlets\demo\NewbieGuide\條件屬性.cpt

2.3.2 添加事件

菜單欄點擊模板>模板 Web 屬性>分頁預覽設置，選擇爲該模板單獨設置，然後添加加載結束事件，如下圖所示：

JavaScript 代碼如下：

contentPane.makeHighlight('red', '' ,true);

2.3.3 效果預覽

保存報表，點擊分頁預覽，效果如下圖所示：

注：不支持移動端。

2.3.4 模板下載

已完成模板可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\分頁預覽JS實例\隔行變色模板鼠标點擊行變色.cpt

點擊下載模板：隔行變色模板鼠标點擊行變色.cpt