GridView排序CssClass不适用

Question

我有一个带有以下标记的网格视图：

<asp:GridView ID="gv" runat="server" Width="700px" skinid="gridview" HeaderStyle-HorizontalAlign="Left" AllowPaging="true" PageSize="50" AllowSorting="true" CssClass="gv">
<SortedAscendingHeaderStyle CssClass="sort_asc" />
<SortedDescendingHeaderStyle CssClass="sort_desc" />
<Columns>

<asp:TemplateField>
    <ItemTemplate>
        <asp:CheckBox ID="chk" runat="server" />
    </ItemTemplate>
</asp:TemplateField>

<asp:BoundField HeaderText="Project" DataField="Project" SortExpression="Project" />
<asp:BoundField HeaderText="Type" DataField="Type" SortExpression="Type" />

</Columns>
</GridView>

但是，我的 SortedAscendingHeaderStyle 和 SortedDescendingHeaderStyle CssClass 在排序时并未应用于 HTML。

我的 CSS 是：

.gv .sort_asc
{
    display:block;
    padding:0 4px 0 15px; 
   background:url(/Admin/Images/Icons/arrow_down.jpg) no-repeat;  
}
.gv .sort_desc
{
    display:block;
    padding:0 4px 0 15px; 
   background:url(/Admin/Images/Icons/arrow_up.jpg) no-repeat;  
}

这可能是什么原因？

Answer 1

下面是方法，可以完成任务：

在 .aspx 文件中

<asp:GridView ID="gvData" runat="server" SkinID="yourskinID"
   AllowSorting="True" onsorting="gvData_Sorting">
   <HeaderStyle CssClass="ascendingCssClass" /> <%-- put it into your SKIN file, 
       assume you're showing data in ascending initially  --%>
   <Columns>

   </Columns>
</asp:GridView>

在 .cs 文件中

private const string ASCENDING = " ASC";
private const string DESCENDING = " DESC";

public SortDirection GridViewSortDirection
{
    get
    {
        if (ViewState["sortDirection"] == null)
            ViewState["sortDirection"] = SortDirection.Ascending;

        return (SortDirection)ViewState["sortDirection"];
    }
    set { ViewState["sortDirection"] = value; }
}

protected void gvData_Sorting(object sender, GridViewSortEventArgs e)
{
    string sortExpression = e.SortExpression;
    if (GridViewSortDirection == SortDirection.Ascending)
    {
        GridViewSortDirection = SortDirection.Descending;
        //Put your CssClass here for descending
        gvData.HeaderStyle.CssClass = "descendingCssClass";
        SortGridView(sortExpression, DESCENDING);
    }
    else
    {
        GridViewSortDirection = SortDirection.Ascending;
        //Put your CssClass here for ascending
        gvData.HeaderStyle.CssClass = "ascendingCssClass";
        SortGridView(sortExpression, ASCENDING);
    }
}

private void SortGridView(string sortExpression, string direction)
{
    DataTable dt = GetData();
    DataView dv = new DataView(dt);
    dv.Sort = sortExpression + direction;
    gvData.DataSource = dv;
    gvData.DataBind();
}

更新：

示例/测试 css 如下所示：我只是将其用于测试目的，请使用您适当的样式。

 tr.ascendingCssClass th a:link
 {
    color:Green;
    background-color:White;
 }    
 tr.ascendingCssClass th a:hover
 {
    color:Orange;
    background-color:White;
 }     
 tr.ascendingCssClass th a:visited
 {
     color:Black;
     background-color:White;
 }


 tr.descendingCssClass th a:link
 {
     color: red;
     background-color:Gray;
 }    
 tr.descendingCssClass th a:hover
 {
     color: Yellow;
     background-color:Gray;
 }     
 tr.descendingCssClass th  a:visited
 {
     color: Yellow;
     background-color:Gray;
 }

并且，DataTable 函数如下：

DataTable GetData()
{
    DataTable table = new DataTable("MyDataTable");
    using (SqlConnection connection = new SqlConnection(YourConnectionString))
    {
        //Your data retrival code goes here
        adapter.Fill(table); // Finally fill the datatable
    }
    return table;
}