天天看點

像 excel 一樣輕松當機 web 報表表頭 (鎖定表頭) - IBelieve002

像 excel 一樣輕松當機 web 報表表頭 (鎖定表頭)

當機表頭,固定表頭

對于一個網站來說,使用者體驗會涉及到很多方面,包括頁面布局是否合理、導航視圖是否清晰、加載速度是否夠快、乃至按鈕或字型的大小,等等諸多方面。

使用者體驗是使用者的主觀感受,通俗來說就是“你這玩意兒用起來方不友善”。

除了網站設計,好的使用者體驗同樣适用于用報表工具制作出的報表。比如資料監控,報表支援高亮顯示資料提供預警;為了提高報表的可讀性,明細報表資料支援隔行異色顯示等。

這裡,我們關注另一個很典型的使用者體驗問題,如果報表的一頁資料超出一個螢幕顯示的高度(超寬也一樣)時,如何能保證靠後的行或列資料始終能看到每列對應的标題?總不能讓看報表的同志頻繁的前後滾動滑鼠反複查找對照,要是這樣不罵你才怪。

針對這個問題,常使用 excel 的小夥伴兒應該都知道一項“當機”功能,當機之後,标題部分在視窗中鎖定,滾動滑鼠或拖動滾動條時,僅資料區滾動,進而友善檢視資料。

問題來了,潤乾報表能搞不?! 甭懷疑,肯定行。

比如“按照産品名稱統計各銷售人員的銷售情況表”,如下圖

像 excel 一樣輕松當機 web 報表表頭 (鎖定表頭) - IBelieve002

潤乾報表如何實作鎖定标題行(藍底部分),接下來看下實作過程(以設計器自帶 demo 資料庫為例)。

首先,設計如上圖所示的交叉報表

像 excel 一樣輕松當機 web 報表表頭 (鎖定表頭) - IBelieve002

其中

資料集 sql 為:

SELECT 産品.産品名稱, 訂單明細.單價 * 訂單明細.數量 * 訂單明細.折扣 as 銷售額, 雇員.姓氏 +雇員.名字 as 姓名 
FROM 訂單明細,訂單,産品,雇員 
WHERE 訂單.訂單ID = 訂單明細.訂單ID AND  訂單.雇員ID = 雇員.雇員ID  AND 訂單明細.産品ID = 産品.産品ID       

A3 表達式:=ds1.group(産品名稱; 産品名稱:1)

B1 表達式:=ds1.group(姓名; 姓名:1)

B3 表達式:=ds1.sum(銷售額)

注:第 1、2 行,行屬性設定為“表頭”

此時,将報表釋出到網頁端,可正常展現,但表頭沒有鎖定,如把滾動條拖動到

最底部時,螢幕内隻有資料區,如圖

像 excel 一樣輕松當機 web 報表表頭 (鎖定表頭) - IBelieve002

改造!隻需要在報表展現頁面标簽增加 needScroll屬性即可實作鎖定表頭功能,如下

<report:html name="report1"
   reportFileName="<%=report%>"
   funcBarLocation="no"
   generateParamForm="no"  
   params="<%=param.toString()%>"                               
   exceptionPage="/reportJsp/myError2.jsp"                  
   appletJarName="/raqsoftReportApplet.jar"               
   needScroll="yes"               
   scrollWidth="100%"              
   scrollHeight="100%"               
   needImportEasyui="no"/>      

注意:标紅的 needScroll,是否固定上表頭和左表頭,預設為 no。另外,scrollWidth

為固定表頭後,報表的顯示寬度;scrollHeight 則為顯示高度。

改造完,看效果(依然将滾動條拖至最底部)

像 excel 一樣輕松當機 web 報表表頭 (鎖定表頭) - IBelieve002

可以看到,滾動條拖至最底部,表頭依然與資料區不離不棄。

怎麼樣,簡不簡單?!不論例子中的鎖定行表頭,還是要鎖定清單頭,亦或是同時鎖定,僅需一個展示屬性即可實作,進而極大提升報表的使用者體驗。

作者:bubblegum

連結:http://c.raqsoft.com.cn/article/1534755993783?r=IBelieve

來源:乾學院

著作權歸作者所有。商業轉載請聯系作者獲得授權,非商業轉載請注明出處。