技术开发 频道

详解ASP.NET4 GridView新增4大排序样式

  为排序列加上箭头

  使用的CSS配合SortedAscendingHeaderStyle和SortedDescendingHeaderStyle两个属性,则为排序列增加向上和向下箭头的表示排序状态是很容易的。首先,你需要找一些向上箭头或者向下箭头的图片,在本文的代码下载中是有这样的图片了。接者需要创建两个CSS类,比如下文中的sortasc—header和sortdesc-header,在这两个CSS类中需要指定上下箭头图片所在的位置,同时我们要在排序列的右边定义一个适当的间隔位置,以便让向上和向下箭头不被排序列所在的表头的文本所覆盖。如下所示:

.sortasc-header A
{
   background:url(URL
to up arrow image) right center no-repeat;
}

.sortdesc
-header A
{
   background:url(URL
to down arrow image) right center no-repeat;
}

TH A
{
   padding
-right: 20px;
}

 

  之后我们就可以利用这些样式了:

<asp:GridView ID="..." runat="server" AutoGenerateColumns="False" AllowSorting="true"
      ...
      SortedAscendingHeaderStyle
-CssClass="sortasc-header"
      SortedDescendingHeaderStyle
-CssClass="sortdesc-header"
      SortedAscendingCellStyle
-BackColor="Yellow"
      SortedDescendingCellStyle
-BackColor="Yellow">
   ...
</asp:GridView>

 

  实现的效果如下图所示:

1
 

1
相关文章