報表工具如何實現(xiàn)“點擊查看原圖”

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

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

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

1. 雇員信息表的創(chuàng)建

• 定義參數(shù)

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

• 數(shù)據(jù)集設(shè)置

• 報表格式設(shè)置

• 圖片所在單元格設(shè)置

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

• 超鏈接設(shè)置

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

2. 顯示圖片的報表

• 定義參數(shù)

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

• 數(shù)據(jù)集設(shè)置

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

• 報表圖片單元格設(shè)置

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

3. 設(shè)置布局

• 創(chuàng)建報表組，添加雇員信息表和顯示原圖的報表

• 添加參數(shù)定義

• 進行布局

潤乾報表新版本中報表組默認(rèn)是tab頁方式展現(xiàn)，當(dāng)在dashboard面板中設(shè)置布局后，多張報表就會按dashboard面板設(shè)置的布局展現(xiàn)。

1. 參數(shù)查詢報表

• 定義數(shù)據(jù)集

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

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

選中D2單元格，設(shè)置編輯風(fēng)格為下拉數(shù)據(jù)集：

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

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

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