報表如何實現行列互換效果?
通常我們設計的二維的交叉報表,橫向的維度和縱向的維度是固定的,而使用者希望更希望能根據自己的需要快速轉換橫向縱向維度來檢視報表。
如上圖所示,我們透過點選一個按鈕或文字,就可將報表的行列維度互相轉換,這樣的動態轉換效果要怎麼設定實現呢?
這裡我介紹兩種方法實現方法:
1. 兩張報表超連結
2. 單張報表動態判斷
兩張報表超連結
實現思路:
二維的交叉報表行列維度有兩種情況,我們只需對應兩種情況做兩張報表,切換的按鈕用超連結實現,連線的目標就是另一張報表。
具體實現:
1. 新建一張報表,檔名為行列轉換 1.rpx, 資料來源使用潤乾設計器下自帶的 demo 資料來源,資料集使用 SQL 檢索方式,SQL 為:SELECT 訂單. 貨主地區, 訂單. 訂單金額, 僱員. 姓氏 + 僱員. 名字 as 僱員 FROM 訂單, 僱員 WHERE 訂單. 僱員 ID = 僱員. 僱員 ID 。
2. 設定報表單元格表示式,潤乾設計器中單元格可以直接寫表示式,也支援拖拽欄位生成表示式。
B1 單元格我們透過拖拽欄位的方式生成表示式:在設計器右下角的資料集皮膚中可以看到我們剛才新建的資料集和欄位,選擇對應欄位,然後選擇分組,將欄位拖拽到 B1 單元格中,
B1 單元格就會出現 =ds1.group(貨主地區; 貨主地區);
A2 單元格同 B1 的操作,不同的是選擇僱員欄位拖拽,生成的表示式為 =ds1.group(僱員; 僱員:1);
B2 單元格選擇訂單金額,選擇彙總,彙總方式為求和,拖拽欄位到 B2 單元格中,表示式為 =ds1.sum(訂單金額)。
3. 修改單元格擴充套件方式,單元格的擴充套件方向預設為縱向,選中 B1,在右側屬性皮膚中設定擴充套件方式為橫向擴充套件。
4.A1 單元格中直接寫上行列互換,設定超連結表示式:“./showReport.jsp?rpx=/30 互動報表 / 行列互換 2.rpx”,超連結視窗為:_self。
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,“僱員”,“貨主地區”)。
3. 修改單元格表示式
橫向分組和縱向分組的欄位透過動態引數的值,動態變化,將 B1 的表示式修改為 =ds1.group(${group1};${group1}:1),將 A2 的表示式修改為 =ds1.group(${group2};${group2}:1)。
4. 修改行列互換的超連結表示式
超連結表示式為:“./showReport.jsp?rpx=/30 互動報表 / 行列互換.rpx&change=”+if(change==1,-1,1)
經過以上設定,我們透過 showReport.jsp 訪問行列轉換.rpx, 在瀏覽器位址列中,輸入 url:
訪問。
當點選表頭中的行列轉換文字,重新整理的報表還是當前的報表,但 change 的引數值已經變成了 -1,並且行列的分組欄位也發生了變化。
透過上面介紹的兩種方法都能快速的實現報表行列互換的效果,如果不想做多張報表來實現,推薦使用第二種實現方法,如果不習慣條件判斷的設定,可以使用第一種方法,雖然涉及到兩張報表,只是另存第一張報表,簡單修改就行,修改的工作量可忽律不計,也沒有第二種方法的小彎彎繞,具體根據自己的情況選擇合適的方法吧。
來自 “ ITPUB部落格 ” ,連結:http://blog.itpub.net/69900830/viewspace-2669014/,如需轉載,請註明出處,否則將追究法律責任。
相關文章
- web 展現資料時如何實現行列互換Web
- 在報表中錄入資料時如何實現行列轉換
- 實現二維陣列的行列互換陣列
- 報表展現時如何實現固定表頭效果
- 大屏報表元件間的聯動互動效果實現方法元件
- Spark實現行列轉換pivot和unpivotSpark
- 「譯」如何實現互動式 WebGL 懸停效果Web
- 填報表實現隔行異色的效果
- 使用vue實現行列轉換的一種方法。Vue
- web 端展現報表資料時如何實現摺疊展開效果?Web
- 如何實現報表滾動到底部進行翻頁的效果
- 實現報表滾動到底部翻頁效果
- SQL 如何實現動態的行列轉置SQL
- 報表中怎樣實現滾動的公告效果
- 如何實現報表直接列印需求
- SAP ABAP 報表螢幕輸入欄位如何實現聯動效果試讀版
- 用CSS實現Tab頁切換效果CSS
- 那些特殊邊框效果在報表中要怎樣實現?
- CSS 如何實現羽化效果?CSS
- 如何實現報表的批次列印需求
- Restcloud ETl實踐之資料行列轉換RESTCloud
- 如何實現報表的點選表頭排序需求排序
- 【新手指南】App原型設計:如何快速實現這6種互動效果?APP原型
- 企業展廳互動能實現什麼效果
- Flutter吸附效果如何實現?Flutter
- mysql行列轉換詳解MySql
- vue路由切換滑動效果 vue頁面跳轉互動 vue實現動畫跳轉Vue路由動畫
- jquery如何用each遍歷實現一個排異切換的效果?jQuery
- vue2.0實現底部導航切換效果Vue
- 簡單實現一個全面屏切換效果
- Vue實現內部元件輪播切換效果Vue元件
- html兩種方法來實現tab切換效果HTML
- 利用HTML5,無JS實現各種互動效果HTMLJS
- 記錄一個行列轉換
- 使用ViewPager和TabLayout來實現滑動切換效果ViewpagerTabLayout
- CSS實現頁面切換時的滑動效果CSS
- 大屏報表中如何實現多圖表間的聯動?
- web 中怎麼實現斜線表頭效果?Web