報表工具如何實現“點擊查看原圖”

在各種涉及圖片的Web網站上，無論是搜圖類、社交類、保險服務類，以及ERP或檔案管理等內部系統，其中對于圖片通常會提供一種點擊圖片查看原圖的操作，也就是一開始呈現小圖，點擊后放大查看。這種操作我們能在報表中實現嗎？如果可以的話，該怎么做？是不是需要許多關于前端頁面的知識準備呢？

下面我就對于上面拋出來的疑問一一解答下：潤乾報表可以實現！通過Dashboard+超鏈接局部刷新就可以！不需知道很多前端的知識就能實現哦?。?！

接下來，我們就用潤乾設計器下自帶的demo數據源中的雇員表做一個雇員信息的查詢，在點擊雇員信息后在頁面中顯示出TA的照片，并在頁面的右側顯示原圖。

1. 雇員信息表的創建

• 定義參數

在“報表”菜單中選擇“參數”選項，增加arg1的參數，數據類型為字符串，值表達式為1（給定值表達式后，如果不輸入值，第一次查詢使用的就是該參數值），參數類型為普通參數。

• 數據集設置

• 報表格式設置

• 圖片所在單元格設置

選中E2單元格，選擇“報表”——“圖片”菜單，或者右鍵單擊該單元格選擇“圖片”，在彈出的對話框中設置表達式為=ds1.照片。

• 超鏈接設置

在E2單元格的屬性中設置超鏈接表達式，具體設置如下圖所示。

2. 顯示圖片的報表

• 定義參數

定義一個名為id的普通參數，類型為字符串，這里的參數名稱要和第一張報表里超鏈接傳遞過來的參數名一致哦！

• 數據集設置

這張報表我們只需要根據員工的ID查出對應的照片字段就可以，所以這里的sql也是通過id這個參數做的數據過濾。

• 報表圖片單元格設置

我們要將顯示的圖片變大的話，可以直接設置圖片所在單元格的尺寸調整方式為“圖片填滿單元格”就行了，不需要再設置圖片的高度，寬度等html屬性啦。

3. 設置布局

• 創建報表組，添加雇員信息表和顯示原圖的報表

• 添加參數定義

• 進行布局

潤乾報表新版本中報表組默認是tab頁方式展現，當在dashboard面板中設置布局后，多張報表就會按dashboard面板設置的布局展現。

1. 參數查詢報表

• 定義數據集

為了讓這個例子按上去更像實際的情況，我們提供一個下拉框，用戶可以在這里直接選擇雇員的ID。首先給這個參數報表定義數據集。

• 然后定義下拉選擇員工ID單元格的控件及變量名

選中D2單元格，設置編輯風格為下拉數據集：

好了，通過以上步驟，我們完成了一個通過下拉框查詢員工信息，并在卡片式的員工信息表中能夠點擊圖片，在當前頁面右側顯示員工照片原圖的實例，快來web端看一下效果吧！

當然，針對這樣的需求，其實我們也可以響應圖片上的onclick事件，彈出一個網頁窗口或者dialog窗口。不過，這種方法相對于本文所提到的方法呢就需要多了解一些頁面的知識了。在本文的例子中，我們只需要通過dashboard的局部刷新JS函數，就能讓原圖在一個頁面中無閃爍顯示出來。

dashboardlink用處多多，除了本文的例子，我們還可以通過它實現在國家地圖鉆取省份地圖數據、在一個頁面中列表與圖表聯動，以及特殊的查詢面板布局等，這些例子，拾光都在博客有寫過哦！多多關注我們吧！相信您的關注會讓我們更加進步，我們的進步會給您帶來更多的價值！