Fit項目分頁組件的編寫

項目中涉及列表顯示的地方都會用到分頁控件，爲了能更好地與當前網站的樣式匹配，此次要本身實現一個。

因此選擇了模板中提供的分頁樣式，基於模板改造以可以動態生成：

 

 

 

一 控件的行爲規則

a) 可設置顯示幾個頁碼（默認5個，只能是奇數）

若是當前頁顯示5個，則默認先後各有兩個，好比當前頁是5，顯示頁碼爲「3 4 5 6 7

若是當前頁在最前面，好比爲1，顯示頁碼爲：1 2 3 4 5

一樣當前頁在最後面，好比爲9，顯示頁碼爲：5 6 7 8 9

若是總頁數少於5，好比只有3頁，則頁碼所有顯示：1 2 3

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

若是當前頁是第一頁，首頁和上一頁禁用

若是當前頁是最後一頁，尾頁和下一頁禁用

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

 

 

 

二 代碼編寫

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

 

PAGE_COUNT爲默認顯示的頁碼數量，這裏爲了便於測試設置成了2；靜態屬性分別爲當前頁、總頁數、數據總條數，但剛剛發現TotalPage、TotalCount其實是冗餘的，二者能夠互相計算得出，這要儘早重構。

 

b) 局部變量

 

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

 

c) 核心方法

核心的方法以下，主要實現「一 控件的行爲規則」中a) 所描述的規則。

 

 

d) 設置屬性與Href的方法，實現了「一 控件的行爲規則」中b) 所描述的規則，須要注意的坑是，<a> 標籤須要禁用時，爲其加上」disabled」=」true」是無論用的，這樣作只是在樣式上起做用。因此這兒採用的方法是經過設置href=」#」來阻止跳轉（但會回到頁面頂部），鼠標以上去的紅圈樣式使用Inspinia模板的class=」disabled」樣式，這即是設置firstPageAttr等標籤爲」disabled」的用途

 

       

e) 返回html的方法

 

 

f) 分頁組件的使用

 

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

 

這樣本身的分頁組件就實現了，本來就知道這個小小的控件很差寫，通過不少次單元測試、集成測試，費了很多時間終於可以使用了。