天天看點

Fit項目分頁元件的編寫

項目中涉及清單顯示的地方都會用到分頁控件,為了能更好地與目前網站的樣式比對,這次要自己實作一個。

是以選擇了模闆中提供的分頁樣式,基于模闆改造以能夠動态生成:

Fit項目分頁元件的編寫

http://images2015.cnblogs.com/blog/844205/201706/844205-20170606225606043-2137817722.png" >

Fit項目分頁元件的編寫

http://images2015.cnblogs.com/blog/844205/201706/844205-20170606225609887-709741290.png" >

一 控件的行為規則

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) 分頁元件類、屬性、常量

Fit項目分頁元件的編寫

page_count為預設顯示的頁碼數量,這裡為了便于測試設定成了2;靜态屬性分别為目前頁、總頁數、資料總條數,但剛剛發現totalpage、totalcount實際上是備援的,兩者可以互相計算得出,這要盡早重構。

b) 局部變量

Fit項目分頁元件的編寫

根據目前的實作,需要這麼一坨局部變量。startpage、endpage限定了顯示頁碼的範圍。将跳轉連結放在了hrefstr,以後其它清單需要使用這個工具類時,可把hrefstr改造成屬性。最後的以attr和href結尾的變量用于設定4個跳轉按鈕的禁用屬性和超連結。

c) 核心方法

核心的方法如下,主要實作“一 控件的行為規則”中a) 所描述的規則。

Fit項目分頁元件的編寫

http://images2015.cnblogs.com/blog/844205/201706/844205-20170606225749887-1529658259.png" >

Fit項目分頁元件的編寫

<a>e) 傳回html的方法</a>

Fit項目分頁元件的編寫

f) 分頁元件的使用

Fit項目分頁元件的編寫

在前端頁面中,使用razor文法,html元素的輸出要用@html.raw()方法,另外因為相關的變量都是靜态的,每次使用完要記得調用reset重置狀态。

這樣自己的分頁元件就實作了,原本就知道這個小小的控件不好寫,經過很多次單元測試、內建測試,費了不少時間終于能夠使用了。

© 著作權歸作者所有