像excel一樣輕鬆凍結web報表表頭 鎖定表頭

2021-08-25 05:45:58 字數 2000 閱讀 3585

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

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

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

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

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

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

比如「按照產品名稱統計各銷售人員的銷售情況表」,如下圖

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

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

其中資料集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行,行屬性設定為「表頭」

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

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

改造!只需要在報表展現頁面標籤增加needscroll屬性即可實現鎖定表頭功能,如下"

funcbarlocation="no"

generateparamform="no"

params=""

exceptionpage="/reportjsp/myerror2.jsp"

needscroll="yes"

scrollwidth="100%"

scrollheight="100%"

needimporteasyui="no"

/>

注意:標紅的 needscroll,是否固定上表頭和左表頭,預設為no。另外,scrollwidth

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

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

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

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

像Excel一樣使用Python(一)

在進行資料處理時,如果資料簡單,數量不多,excel是大家的首選。但是當資料眾多,型別複雜,需要靈活地顯示切片 進行索引 以及排序時,python會更加方便。借助python中的numpy和pandas庫,它能快速完成各種任務,包括資料的建立 檢查 清洗 預處理 提取 篩選 彙總 統計等。接下來幾篇...

像Excel一樣使用Python(二)

像excel一樣使用python,上一期介紹了生成 檢視 替換等功能,這一期介紹資料預處理,包括資料表合併 排序 分組等。excel裡智慧型複製貼上來合併 或者通過vlookup函式分步實現。python中,可以直接使用merge函式來合併兩個表,可選引數較多,這裡只介紹最常用的幾個引數 df1.m...

像用excel一樣用pandas

預計需要15min閱讀此教材 本教材僅講述如何檢視excel資料,篩選,排序,查詢替換資料,不涉及excel中複雜的圖形繪製及樣式修改。假設,已經存在乙個test.xlsx檔案,僅包含乙個sheet,檔案內容如下。col1 col2 foo1 bar1 foo2 bar2 讀取乙個excel並賦值給...