報表如何實現行列互換效果?

xiaohuihui發表於2019-12-17

通常我們設計的二維的交叉報表,橫向的維度和縱向的維度是固定的,而使用者希望更希望能根據自己的需要快速轉換橫向縱向維度來檢視報表。

gif

如上圖所示,我們透過點選一個按鈕或文字,就可將報表的行列維度互相轉換,這樣的動態轉換效果要怎麼設定實現呢?

這裡我介紹兩種方法實現方法:

1. 兩張報表超連結

2. 單張報表動態判斷

兩張報表超連結

實現思路:

二維的交叉報表行列維度有兩種情況,我們只需對應兩種情況做兩張報表,切換的按鈕用超連結實現,連線的目標就是另一張報表。

具體實現:

1. 新建一張報表,檔名為行列轉換 1.rpx, 資料來源使用潤乾設計器下自帶的 demo 資料來源,資料集使用 SQL 檢索方式,SQL 為:SELECT 訂單. 貨主地區,  訂單. 訂單金額, 僱員. 姓氏 + 僱員. 名字 as 僱員  FROM 訂單, 僱員 WHERE    訂單. 僱員 ID = 僱員. 僱員 ID 。

2png

2. 設定報表單元格表示式,潤乾設計器中單元格可以直接寫表示式,也支援拖拽欄位生成表示式。

B1 單元格我們透過拖拽欄位的方式生成表示式:在設計器右下角的資料集皮膚中可以看到我們剛才新建的資料集和欄位,選擇對應欄位,然後選擇分組,將欄位拖拽到 B1 單元格中,

B1 單元格就會出現 =ds1.group(貨主地區; 貨主地區);

8png

A2 單元格同 B1 的操作,不同的是選擇僱員欄位拖拽,生成的表示式為 =ds1.group(僱員; 僱員:1);

B2 單元格選擇訂單金額,選擇彙總,彙總方式為求和,拖拽欄位到 B2 單元格中,表示式為 =ds1.sum(訂單金額)。

9png

3. 修改單元格擴充套件方式,單元格的擴充套件方向預設為縱向,選中 B1,在右側屬性皮膚中設定擴充套件方式為橫向擴充套件。

5png

4.A1 單元格中直接寫上行列互換,設定超連結表示式:“./showReport.jsp?rpx=/30 互動報表 / 行列互換 2.rpx”,超連結視窗為:_self。

6png

5. 將當前報表另存一張,儲存檔名為“行列轉換 2.rpx”,將 B1 和 A2 單元格表示式對調,將 A1 的超連結表示式修改為:“./showReport.jsp?rpx=/30 互動報表 / 行列互換 1.rpx”。

經過以上設定,我們就完成了最不燒腦的二維報表行列互換報表的製作,使用 showReport.jsp 訪問行列轉換 1.rpx,點選行列轉換那幾個字就會變成行列轉換 2.rpx,使用者儘管點選切換,不用做條件判斷。

單張報表動態判斷

實現思路:

根據標誌 flag 當前值,來改變他的值,根據這個值確定橫向分組和縱向分組使用的欄位。

具體實現

1. 將行列轉換 1.rpx 另存一個報表,檔名為行列轉換.rpx。

2. 報表中增加一個普通引數,引數名稱為 change, 資料型別為整數,預設的引數值為 1;

兩個動態引數:引數名稱 group1, 資料型別為字串,值表示式為 if(change==1,“貨主地區”,“僱員”;

引數名稱 Group2, 資料型別為字串,值表示式為 if(change==1,“僱員”,“貨主地區”)。

7png

3. 修改單元格表示式

橫向分組和縱向分組的欄位透過動態引數的值,動態變化,將 B1 的表示式修改為 =ds1.group(${group1};${group1}:1),將 A2 的表示式修改為 =ds1.group(${group2};${group2}:1)。

8png

4. 修改行列互換的超連結表示式

超連結表示式為:“./showReport.jsp?rpx=/30 互動報表 / 行列互換.rpx&change=”+if(change==1,-1,1)

9png

經過以上設定,我們透過 showReport.jsp 訪問行列轉換.rpx, 在瀏覽器位址列中,輸入 url:

訪問。

10png

當點選表頭中的行列轉換文字,重新整理的報表還是當前的報表,但 change 的引數值已經變成了 -1,並且行列的分組欄位也發生了變化。

11png

透過上面介紹的兩種方法都能快速的實現報表行列互換的效果,如果不想做多張報表來實現,推薦使用第二種實現方法,如果不習慣條件判斷的設定,可以使用第一種方法,雖然涉及到兩張報表,只是另存第一張報表,簡單修改就行,修改的工作量可忽律不計,也沒有第二種方法的小彎彎繞,具體根據自己的情況選擇合適的方法吧。

來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69900830/viewspace-2669014/,如需轉載,請註明出處,否則將追究法律責任。

相關文章