如何在 GridView 中根据排序类型显示图像

Question

我有一个GridView，我正在按 ASC/DESC 对其进行排序，我想显示一个箭头图像。

我有以下几点：

<asp:GridView AlternatingRowStyle-BackColor="#E2E2E2" AutoGenerateColumns="false" OnSorting="yourTasksGV_Sorting" AllowSorting="true" ID="yourTasksGV" runat="server" ClientIDMode="Static" EmptyDataText="There is no data to display">
                                <SortedAscendingHeaderStyle CssClass="gvAsc" />
                                <SortedDescendingHeaderStyle CssClass="gvDesc" />
                                <Columns>
                                    <asp:HyperLinkField Target="_blank" DataNavigateUrlFields="Task Detail" DataTextField="Task Name" DataNavigateUrlFormatString="" HeaderText="Task Details" SortExpression="Task Detail" ItemStyle-Width="35%" ItemStyle-CssClass="taskTableColumn" />
                                    <asp:BoundField DataField="Services" HeaderText="Services" SortExpression="Services" ItemStyle-Width="25%" ItemStyle-CssClass="taskTableColumn" />
                                    <asp:BoundField DataField="Status" HeaderText="Status" SortExpression="Status" ItemStyle-Width="15%" ItemStyle-CssClass="taskTableColumn" />
                                    <asp:BoundField DataField="Due Date" HeaderText="Due Date" SortExpression="Due Date" ItemStyle-Width="15%" ItemStyle-CssClass="taskTableColumn" />
                                </Columns>
                            </asp:GridView>

CSS：

#yourTasksGV th.gvAsc a { background:url(../theImages/up.png) right center no-repeat; }
#yourTasksGV th.gvDesc a { background:url(../theImages/down.png) right center no-repeat; }

排序正在进行，但箭头未根据排序显示。

我该如何解决这个问题？

Answer 1

以下是我使用的，我喜欢它，因为它只为数据绑定事件触发一次，而不是每行一次。

protected void GridView1_DataBound(object sender, EventArgs e)
{ 
     if (String.Empty != this.GridView1.SortExpression) 
            AddSortImage(GridView1.HeaderRow); 
}

支持的方法有：

void AddSortImage(GridViewRow headerRow) 
{ 
     int iCol = GetSortColumnIndex();
     if (-1 == iCol) 
           return; 

     // Create the sorting image based on the sort direction.

     Image sortImage = new Image();
     if (SortDirection.Ascending == this.GridView1.SortDirection) 

{             sortImage.ImageUrl = @"~\Images\BlackDownArrow.gif"; 
               sortImage.AlternateText = "Ascending Order"; 
}     else  
{
             sortImage.ImageUrl = @"~\Images\BlackUpArrow.gif";
             sortImage.AlternateText = "Descending Order";
}
      // Add the image to the appropriate header cell. 
        headerRow.Cells[iCol].Controls.Add(new LiteralControl(" "));
        headerRow.Cells[iCol].Controls.Add(sortImage); 
} 

public int GetSortColumnIndex() 
{ 
      // Iterate through the Columns collection to determine the index 
      // of the column being sorted. 
      foreach (DataControlField field in GridView1.Columns) 
       { 
             if (field.SortExpression == this.GridView1.SortExpression) 
               { 
                  return this.GridView1.Columns.IndexOf(field); 
                }
         } 
      return -1;
}