1. 概述
報表中很多個性化功能的實現，大多是使用 JavaScript 來實現的，那麼我們如何能零基礎寫 JavaScript 來實現功能呢？
我們可以透過瀏覽器中的「檢驗元素」，獲取到報表中每個元素對應的程式碼，進而能據此快速編輯出需要的 JavaScript 語句新增在範本中，實現想要的功能。
這裏以設計器自帶的「超級連結」功能為例，透過瀏覽器獲得新增超連結的 JavaScript 程式碼，修整後利用此程式碼實現點選自訂按鈕後彈出一個「對話框」頁面的功能。如下圖所示：
2. 範例
2.1 準備範本
我們先使用設計器自帶的超級連結功能，實現彈出「對話框」的功能。
1）建立一張普通報表，選中 A1 儲存格，為其新增「超級連結」，超連結到內建範本 GettingStarted.cpt 。如下圖所示：
2）儲存範本，點選「分頁預覽」。效果如下圖所示：
2.2 獲取程式碼
預覽報表時，在瀏覽器中按下 F12 或是右鍵選擇「檢驗元素」，就可以看到網頁中各個元素的程式碼。如下圖所示：
滑鼠選中超連結，右鍵選擇「檢查」，會跳轉到該超連結對應的程式碼，這樣就透過瀏覽器找到了實現超級連結功能的程式碼，複製程式碼。如下圖所示：
複製的程式碼如下：
<span class="linkspan" style="cursor:pointer;" onclick="FR.doHyperlink(event||window.event, [{"data":"var as=arguments;
return FR.tc(function(){FR.doHyperlinkByGet4Reportlet({\"para\":{\"__pi__\":true},\"feature\":\"
width=600,height=400,\",\"title\":\"網路報表1\",\"url\":\"/webroot/decision/view/report?
viewlet=%2FGettingStarted.cpt\",\"target\":\"_dialog\"})}, this, as)","name":"
網路報表1"}], true)">測試超級連結功能</span>
2.3 整理程式碼
1）對上述程式碼進行整理，將 onclick 動作需要執行的部分複製出來。得到程式碼：
FR.doHyperlink(event||window.event, [{"data":"var as=arguments; return FR.tc(function()
{FR.doHyperlinkByGet4Reportlet({\"para\":{\"__pi__\":true},\"feature\":\"width=600,height=400,
\",\"title\":\"網路報表1\",\"url\":\"/webroot/decision/view/report?viewlet=%2FGettingStarted.cpt
\",\"target\":\"_dialog\"})}, this, as)","name":"網路報表1"}], true)
2）由於瀏覽器解析需要，會將“雙引號”轉義為“"”，我們需要更換回來。得到程式碼：
FR.doHyperlink(event||window.event, [{"data":"var as=arguments; return FR.tc(function(){FR.doHyperlinkByGet4Reportlet
({\"para\":{\"__pi__\":true},\"feature\":\"width=600,height=400,\",\"title\":\"網路報表1\",\"url\":\"/webroot/decision/view/report
?viewlet=%2FGettingStarted.cpt\",\"target\":\"_dialog\"})}, this, as)","name":"網路報表1"}], true)
3）此段程式碼新增為點選事件的內容後，部分瀏覽器預覽會報錯：event is not defined，如下圖，這時把 event||刪掉即可。
得到最終程式碼：
FR.doHyperlink(window.event, [{"data":"var as=arguments; return FR.tc(function(){FR.doHyperlinkByGet4Reportlet
({\"para\":{\"__pi__\":true},\"feature\":\"width=600,height=400,\",\"title\":\"網路報表1\",\"url\":\"/webroot/decision/view/report
?viewlet=%2FGettingStarted.cpt\",\"target\":\"_dialog\"})}, this, as)","name":"網路報表1"}], true)
2.4 自訂按鈕
彈出「對話框」的功能程式碼已獲取到，下面透過「自訂按鈕」來實現此功能。
1）建立範本，在範本中新增一個「按鈕元件」，按鈕類型為「普通」，按鈕名稱為「彈出對話框」。如下圖所示：
2）為「按鈕元件」新增一個「點選事件」，事件內容為 2.3節 處理好到的 JavaScript 程式碼。如下圖所示：
2.5 效果預覽
儲存範本，選擇「填報預覽」，點選按鈕，也可實現超級連結彈出對話框的效果。效果同第一章預覽效果圖。
