[ASP.NET] 在 GridView 中對欄位進行排序時顯示上下箭頭

自從 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 欄位一旦開始排序, 就會出現上下箭頭了!