報表展現時如何實現固定表頭效果

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

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

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

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

針對這個問題，常使用 excel 的小夥伴兒應該都知道一項“凍結”功能，凍結之後，標題部分在視窗中鎖定，滾動滑鼠或拖動捲軸時，僅資料區滾動，從而方便檢視資料。

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

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

潤乾報表如何實現鎖定標題行（藍底部分），接下來看下實現過程（以設計器自帶 demo 資料庫為例）。

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

其中

資料集 sql 為：

SELECT 產品.產品名稱, 訂單明細.單價 * 訂單明細.數量 * 訂單明細.折扣 as 銷售額, 僱員.姓氏 +僱員.名字 as 姓名 
FROM 訂單明細,訂單,產品,僱員
WHERE 訂單.訂單ID = 訂單明細.訂單ID AND  訂單.僱員ID = 僱員.僱員ID 
AND 訂單明細.產品ID = 產品.產品IDSELECT 產品.產品名稱, 訂單明細.單價 * 訂單明細.數量 * 訂單明細.折扣 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 行，行屬性設定為“表頭”

此時，將報表釋出到網頁端，可正常展現，但表頭沒有鎖定，如把捲軸拖動到

最底部時，螢幕內只有資料區，如圖

改造! 只需要在報表展現頁面標籤增加 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 則為顯示高度。

改造完，看效果（依然將捲軸拖至最底部）

可以看到，捲軸拖至最底部，表頭依然與資料區不離不棄。

怎麼樣，簡不簡單？！不論例子中的鎖定行表頭，還是要鎖定列表頭，亦或是同時鎖定，僅需一個展示屬性即可實現，從而極大提升報表的使用者體驗。