ASP四种排序方式详解 NET4 GridView

与ASP.NET的其他Web控件相比，Gridview控件有很多不同的CSS样式属性设置，包括CssClass、Font font、ForeColor、BackColor、BackColor、Width、Height等。Gridview还包括一些应用于表格行的样式属性，如rowstyle、alternatingowsstyle、headerstyle和PagerStyle，所有这些都提供了基本的属性设置，如CssClass和Font。在ASP.NET 4.0的Gridview控件中，添加了四个新的样式属性：SortedDescendingHeaderStyle、SortedDescendingCellStyle、SortedDescendingCellStyle。这四个属性有点像前面的RowStyle和HeaderStyle属性，但是它们应用于gridview列，而不是行。这些属性仅在需要对gridview进行排序时起作用。如果GridView需要按升序排序，SortedAscendingHeaderStyle和SortedAscendingCellStyle属性定义了数据排序的样式。如果按降序对gridview进行排序，则排序时，SortedDescendingHeaderStyle和SortedDescendingCellStyle属性定义样式。这四个新功能使得在排序数据时更容易自定义列的外观样式。当这些属性与CSS样式结合使用时，它们可以在对表格排序时添加向上箭头和向下箭头，以指示表格当前是按升序还是降序排序。本文将介绍如何使用这四个新属性的样式。在Gridview中排序审阅默认情况下，在GridView中显示每列的列标题。要排序，您必须首先设置Gridview的AllowSorting属性，这将使要在Gridview中排序的列以链接的形式显示。当用户点击时，排序事件将被触发。如果GridView绑定到数据源控件，则不必编写任何代码来处理排序，一切都是自动完成的。从用户的角度来看，点击表头行的排序列，会对该列的数据进行升序排序，再次点击会进行降序排序。不幸的是，ASP.NET的GridView没有提供任何方法向用户显示当前排序列是按升序还是降序排序。在ASP.NET 4.0之前，实现它的唯一方法是编写一些代码，使用Gridview添加SortAscendingStyle和SortdeschendingsStyle，并使用CSS模拟和绘制两个上下箭头。在ASP.NET 4.0中，这个功能已经内置，这将在下面解释。ASP.NET 4.0新的排序相关样式属性增加了如下四个排序相关属性：排序升序标题样式当Gridview按升序排列时，它定义了排序列的标题样式。SortedAscendingCellstyle定义当Gridview按升序排序时要排序的数据列的样式。SortedDescending Headerstyle定义当Gridview按降序排序时排序列的标题样式。SortedDescending Cellstyle定义当Gridview按降序排序时要排序的数据列的样式。有了这些属性，在排序时，您只需要简单地设置它们。例如，在下面的示例中，您只需将SortedDescendingCellStyle属性和sorted descendingcellstyle的子样式背景颜色设置为黄色，就可以立即看到效果：

asp:GridView ID=“.”runat=' server ' AutoGenerateColumns=' False ' alloworting=' true '.sorted ascending cellstyle-back color='黄色' sorted descendi ngCellStyle-back color='黄色'./AsP : GridView

当然，为了方便观察，可以将Sorted升序Cellstyle-backcolor和Sorted降序Cellstyle-backcolor设置为不同的颜色，以看到更清晰的效果。用于向排序列添加箭头的CSS与SortedAscendingHeaderStyle和SortedDescendingHeaderStyle属性相匹配，因此很容易向排序列添加上下箭头来指示排序状态。首先，你需要找到一些向上箭头或向下箭头的图片，这在本文的代码下载中已经找到了。然后，我们需要创建两个CSS类，比如下面的sortsc-header和sortdesc-header。在这两个CSS类中，我们需要指定上下箭头图片的位置。同时，我们需要在排序列的右侧定义一个合适的区间位置，这样上下箭头就不会被排序列所在的表头的文本所覆盖。如下图所示：sortasc-header A { background : url(指向向上箭头图像的URL)右中不重复；} .sort desc-header A { background : url(指向向下箭头图像的URL)右中不重复；} TH A { padding-right : 20px；}然后我们可以利用这些风格：

asp:GridView ID=“.”runat=' server ' AutoGenerateColumns=' False ' alloworting=' true '.sorted ascendingheadstyle-CSS class=' sorted sc-header ' Sorte ddesendingheadstyle-CSS class=' sorted desc-header ' sorted ascendingcellstyle-back color='黄色' sorted sendingcellstyle-back color='黄色'./AsP : GridView