自訂JS事件中快速選擇指定DOM

Finereport 中元件的「事件」功能非常強大，使用者可透過自訂 JS 做出想要的效果。但是 JS 對於大多數非專業報表開發者較為陌生，需要額外的學習成本，尤其是 jQuery 選擇器。而報表設計中，自訂 JS 事件又非常需要獲取指定的 DOM 修改屬性，本文將幫助你快速選擇指定 DOM，完整自訂 JS 的設計。

請選擇 Chrome 瀏覽器使用，最好是最新版本或者符合當前報表系統瀏覽需求的版本。

2.1 準備範例範本

準備一個內建範本：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\GettingStarted

開啟範本，預覽範本。如下圖所示：

2.2 進入開發者工具視窗

Chrome 瀏覽器預覽範本，在 Chrome 瀏覽器中透過 F12 鍵或者 Ctrl+Shift+I 快捷鍵或「設定>更多工具>開發者工具」中開啟 「開發者工具」視窗，如下圖所示：

2.3 進入 DOM 選定狀態

在「開發者工具」視窗，點選 ELements，切換至 Elements 介面，然後點選「選擇元素」 圖示，進入 DOM 選擇狀態。

在此狀態下，滑鼠懸浮在頁面中的元素上時，會在滑鼠所在位置上方顯示改元素的一些資訊，比如上圖中，滑鼠懸浮在「 查詢按鈕」上，顯示了這個元素的類屬性和大小。

如下圖所示：

2.4 獲取 DOM 所對應的選擇器

1）在需要獲取的 DOM上按之後，Elements 中自動選中了該 DOM 。如下圖所示：

2）滑鼠移至 Elements 中被選中的 DOM。在其上面右鍵，選擇「Copy > Copy selector」，點選 Copy selector時，該 DOM 的選擇器已經複製到剪貼簿中，在設計器 JavaScript 腳本編輯器中進行貼上 就可以使用了。如下圖所示：

我選中的 「按鈕元件」DOM 選擇器是 #fr-btn-WIDGET3 > div

1）獲取到的一些選擇器很長，但是是非常準確的，對於無太多 JavaScript 知識的範本製作者來說，這個是很合適的。

2）由於是透過 Chrome 幫助獲取的。因此在主流的瀏覽器上預覽是沒有問題的，但是在 一些低版本 IE 上面可能會出現問題，請謹慎使用該方法。