如何在GridView中显示基于排序类型的图像

本文关键字：排序 类型 图像 于排序 GridView 显示 | 更新日期: 2023-09-27 18:16:30

我有一个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; }

排序正在进行，只是箭头没有根据排序显示。

如何解决这个问题?

如何在GridView中显示基于排序类型的图像

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

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("&nbsp;"));
        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;
}
相关文章：