可惜坎尼在公司都忘記要把圖片先上傳
回到家要寫時 又發現手邊沒圖片 囧>
好 這次要講的是Gridview的分頁顯示
一般來講 用內建的顯示效果
只有 上一頁/下一頁 還有 1 2 3 4 5 這兩種
前者只能死板的在上下頁移動 並不能跳頁
後者則是一般開發者的喜愛 可是稍嫌太醜
所以另有需求的話 通常是利用自訂分頁方式來完成
不過這次不談自訂分頁 (留在下次再談)
這次要說的是 一般的數字型分頁 (numeric)
由於它一次只顯示10頁的選項 若是10頁之後則會以 ... 方式呈現
之前就被客戶抱怨說太醜 (囧 這不是坎尼的錯啊)
所以坎尼上網找了解決方法 (不過由於年代久遠 也忘了在哪看到的 抱歉)
以下是 DataGrid 的範例 (當時改的是DataGrid)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg9k3JzHCSKILTyYG-P5QktRIv1dB4QpGjJLdQYsTyyqs6H59XwQKzh7AfRH5zIBFqxYchUzAtxeWXr4zGn6Mu1j6M1ZoCel9uvI6KRcH6_h0JAah6lFZAG2eU0QWkpLcLvNzsAy3G9UMPC/s400/pager4.png)
後來另一位同事也要這種效果
坎尼想說 Gridview 和 DataGrid 本來就是兄弟
應該改一下原本的 code 就好了吧
這一改之下 才發現 這兩兄弟長的還真的有點不一樣
我們可以看到 上面DataGrid是先把PagerRow抓出來
再把裡頭的 Controls 一個一個抓出來
GridView這麼做只會跟你講:沒效果
於是坎尼去把PagerRow裡的所有Controls給抓出來看 (見下圖)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjh4ULootpzXyVAi2DXVuDdUOIbiI7V783ouYYyH7oaKXYbLnxpTev-kDeHHEvXnMQ_QHc9BPPDK_bfD9njT2svMuKkokIPuKa3D8t6EUxxBpv2HoyqEOMfAFRM4tu3iyf8H2IsnGYPXW6U/s400/pager1.png)
這一抓還真的不得了
這 GridView 原來裙子底下還穿了褲子 難道這是所謂的漸層式穿法?
GridView 的 PagerRow 裡還包了個 Table !!!
不像 DataGrid 的 PagerRow 直接就把東西塞進 TableCell 裡去
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhglY1c0dkqhTAytxbC4jyr7L-tU5K51IH103dtyJrJJlFGx7Z_SVyEXE3mZ_Y-EYjiwfkKH-RLAUyrVGW_kEeN_Rdp5tR4APUBCmDrkyHsDJxY5gz9rwOcUYO5GXrfbgClr3f6NFnvA9mh/s400/pager2.png)
知道這些就好辦了
首先 我們需要個 GridView 然後把 PageMode 改為 Numeric
接著到 RowDataBound 把下圖的程式碼鍵入
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjK-CnHUOsFi78uNhcco97iMg8ODtlXxghOsy454-GeaIzxTrcgHKu2pldsjo8e9yexrTExptCqSG9Si8jIYLzQC30-0gFviJFi0xbyEg9ma2vaB6bpybtFgA3gPcxo5AeGHwxrN830uJYz/s400/pager3.png)
將將將 大功告成 以下圖片是執行畫面
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEh0Nmd12TtFA4czGMWi4krZ-YOtSNTzeuZpGSorwwhF79ZXU2vZ5MEGs5Y8AXtenLfD5kM7bpV_vzM_tiW83B90X4N2rvq7wnLErPpavQsvKqTeR1y2WBBdHExLYhq1XJAd7tJqHl7Nf78r/s400/pager5.png)
![](https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEjGDkUSzp45BIzPTk5TGhVC2g1fJb_KPhVLUMnnnVkjxSKuumnfCtEcyG0pCZsNXfeJWDhCVGk_J7raFtmff46nPMVx9EfV68EEOn3SNhGk8rXWBIlzX0k-We7_bugr8LugUlxtz8h9AM7Y/s400/pager6.png)
GridView 之所以可以有自訂分頁功能 (DataGrid 不行)
就是在 PagerRow 裡多了個 Table
所以不管使用者如何亂搞
只要把使用者自訂的東西通通塞進去 Table 就對了
了解上面程式碼的人 還可以做出更多變化
比方講 在Pager裡動態地放入控制項、更改 Pager 的樣式....等等
當然 自訂分頁 會更有彈性 (下篇就來講坎尼自製的分頁 sample 好了)
對了 今天似乎是中元節 祝大家中元節快樂 ^^
2 則留言:
坎尼 你好~
我照著你的做法 但是上十頁跟下十頁的 ... 還是在
請問是什麼原因呢??
感謝
請問有實作這個嗎?
http://1.bp.blogspot.com/_bGOQZqQ9oEM/SKS-rVJV6AI/AAAAAAAAAIs/IMuqx_2n8do/s1600/pager3.png
張貼留言