自從 ASP.NET 4.0 開始, GridView 控制項就多了一個 SortedAscendingHeaderStyle 和 SortedDescendingHeaderStyle 屬性。顧名思義, 它是專門針對欄位排序功能而設計的。在 MSDN 說明頁上(見上方連結), 它載明了「當這個屬性設定為 true 時,指示排序方向的箭號會在資料行標題中顯示」。可是我們應該在哪裡把它設定為 true 呢? 我們又應該在哪裡指定上下箭頭呢...
自從 ASP.NET 4.0 開始, GridView 控制項就多了一個 SortedAscendingHeaderStyle 和 SortedDescendingHeaderStyle 屬性。顧名思義, 它是專門針對欄位排序功能而設計的。在 MSDN 說明頁上(見上方連結), 它載明了「當這個屬性設定為 true 時,指示排序方向的箭號會在資料行標題中顯示」。可是我們應該在哪裡把它設定為 true 呢? 我們又應該在哪裡指定上下箭頭呢?
其實 MSDN 網頁上的那段描述是一個語焉不詳而且誤導人的文字。我們根本沒有辦法把這個屬性設定為 true, 箭頭也不會自動跑出來!
不過, 我們確實可以利用這個屬性, 讓 GridView 欄位在進行排序時自動出現箭頭或者任何你喜歡的符號, 方法如下:
第一步, 請在 Site.css 或者你習慣使用的任何 CSS 檔案中加上如下的兩個樣式:
th.asc a:after { content: " ▲"; } th.dsc a:after { content: " ▼"; }
接著, 把你的 GridView 加上 SortedAscendingHeaderStyle 和 SortedDescendingHeaderStyle 兩個屬性:
<asp:GridView ID="gv" runat="server" ...>
<SortedAscendingHeaderStyle CssClass="asc" />
<SortedDescendingHeaderStyle CssClass="dsc" />
<Columns>
...
如此一來, 你的 GridView 欄位一旦開始排序, 就會出現上下箭頭了!