JS實現分頁預覽改變滑鼠所在列的列高

1.1 應用場景

在實際項目中，希望當滑鼠行動到儲存格上時能夠突出顯示該行，本文介紹的突出顯示該行的方式是增加行高，當滑鼠移開時恢復行高。實際效果如下圖所示：

1.2 實現思路

給當前行增加 「載入結束」 事件，使用 JavaScript 設定當滑鼠經過該元素時，當前行高度變成 40，當滑鼠從元素上移開時，行高恢復成原來的高度。

2.1 開啟報表

開啟設計器內建範本：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\DetailReport\Details.cpt

2.2 新增事件

設計器菜單欄「範本>範本 Web 屬性>資料分析設定」，新增一個「載入結束」事件，，如下圖所示：

JavaScript 程式碼如下：

$('tr').each(function(){
var _height = $(this).height();
$(this)
.mouseover(function(){$(this).height('40');})
.mouseout(function(){$(this).height(_height);});
});

2.3 效果預覽

儲存範本，點選分頁預覽 ，效果如下圖所示：

注：不支援行動端。

已完成的範本可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\分頁預覽JS實體\JS實現分頁預覽改變滑鼠所在行的行高.cpt

點選下載範本：JS實現分頁預覽改變滑鼠所在列的列高.cpt