Fit項目分頁組件的編寫

項目中涉及列表顯示的地方都會用到分頁控制項,為了能更好地與當前網站的樣式匹配,這次要自己實現一個。

所以選擇了模板中提供的分頁樣式,基於模板改造以能夠動態生成:

一 控制項的行為規則

a) 可設置顯示幾個頁碼(默認5個,只能是奇數)

如果當前頁顯示5個,則默認前後各有兩個,比如當前頁是5,顯示頁碼為「3 4 5 6 7

如果當前頁在最前面,比如為1,顯示頁碼為:12 3 4 5

同樣當前頁在最後面,比如為9,顯示頁碼為:5 6 7 8 9

如果總頁數少於5,比如只有3頁,則頁碼全部顯示:1 2 3

b) 關於跳轉首頁(<<)、尾頁(>>)、上一頁(<)、下一頁(>)

Advertisements

如果當前頁是第一頁,首頁和上一頁禁用

如果當前頁是最後一頁,尾頁和下一頁禁用

c) 當前頁的樣式要區別於其它頁碼


二 代碼編寫

a) 分頁組件類、屬性、常量

PAGE_COUNT為默認顯示的頁碼數量,這裡為了便於測試設置成了2;靜態屬性分別為當前頁、總頁數、數據總條數,但剛剛發現TotalPage、TotalCount實際上是冗餘的,兩者可以互相計算得出,這要儘早重構。

b) 局部變數

根據目前的實現,需要這麼一坨局部變數。startPage、endPage限定了顯示頁碼的範圍。將跳轉鏈接放在了hrefStr,以後其它列表需要使用這個工具類時,可把hrefStr改造成屬性。最後的以Attr和Href結尾的變數用於設置4個跳轉按鈕的禁用屬性和超鏈接。

Advertisements

c) 核心方法

核心的方法如下,主要實現「一 控制項的行為規則」中a) 所描述的規則。

d) 設置屬性與Href的方法,實現了「一 控制項的行為規則」中b) 所描述的規則,需要注意的坑是,<a>標籤需要禁用時,為其加上」disabled」=」true」是不管用的,這樣做只是在樣式上起作用。所以這兒採用的方法是通過設置href=」#」來阻止跳轉(但會回到頁面頂部),滑鼠以上去的紅圈樣式使用Inspinia模板的class=」disabled」樣式,這便是設置firstPageAttr等標籤為」disabled」的用途

e) 返回html的方法

f) 分頁組件的使用

在前端頁面中,使用razor語法,Html元素的輸出要用@Html.Raw()方法,另外因為相關的變數都是靜態的,每次使用完要記得調用Reset重置狀態。

這樣自己的分頁組件就實現了,原本就知道這個小小的控制項不好寫,經過很多次單元測試、集成測試,費了不少時間終於能夠使用了。

Advertisements

你可能會喜歡