借用瀏覽器功能寫JS語句

報表中很多個性化功能的實現，大多是使用 JavaScript 來實現的，那麼我們如何能零基礎寫 JavaScript 來實現功能呢？

我們可以透過瀏覽器中的「檢驗元素」，獲取到報表中每個元素對應的程式碼，進而能據此快速編輯出需要的 JavaScript 語句新增在範本中，實現想要的功能。

這裏以設計器自帶的「超級連結」功能為例，透過瀏覽器獲得新增超連結的 JavaScript 程式碼，修整後利用此程式碼實現點選自訂按鈕後彈出一個「對話框」頁面的功能。如下圖所示：

2.1 準備範本

我們先使用設計器自帶的超級連結功能，實現彈出「對話框」的功能。

1）建立一張普通報表，選中 A1 儲存格，為其新增「超級連結」，超連結到內建範本 GettingStarted.cpt 。如下圖所示：

2）儲存範本，點選「分頁預覽」。效果如下圖所示：

2.2 獲取程式碼

預覽報表時，在瀏覽器中按下 F12 或是右鍵選擇「檢驗元素」，就可以看到網頁中各個元素的程式碼。如下圖所示：

滑鼠選中超連結，右鍵選擇「檢查」，會跳轉到該超連結對應的程式碼，這樣就透過瀏覽器找到了實現超級連結功能的程式碼，複製程式碼。如下圖所示：

複製的程式碼如下：

<span class="linkspan" style="cursor:pointer;" onclick="FR.doHyperlink(event||window.event, [{&quot;data&quot;:&quot;var as=arguments; 
return FR.tc(function(){FR.doHyperlinkByGet4Reportlet({\&quot;para\&quot;:{\&quot;__pi__\&quot;:true},\&quot;feature\&quot;:\&quot;
width=600,height=400,\&quot;,\&quot;title\&quot;:\&quot;網路報表1\&quot;,\&quot;url\&quot;:\&quot;/webroot/decision/view/report?
viewlet=%2FGettingStarted.cpt\&quot;,\&quot;target\&quot;:\&quot;_dialog\&quot;})}, this, as)&quot;,&quot;name&quot;:&quot;
網路報表1&quot;}], 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 效果預覽

儲存範本，選擇「填報預覽」，點選按鈕，也可實現超級連結彈出對話框的效果。效果同第一章預覽效果圖。