ListView 页眉排序方向指示器

• 下载源代码 - 34.3 KB

引言

ASP.NET 3.5版本的ListView控件为开发人员带来了极大的便利，在需要数据绑定网格控件时，它大大简化了HTML的复杂性。ListView使开发人员能够完全控制生成的HTML，同时简化了数据绑定、自定义分页和列排序等功能。虽然ListView提供了列排序功能，但并未明确指示哪个列是最近排序的。互联网上有许多关于为DataGrid和GridView提供列排序指示器的技术。本文的目的是提供一个自定义控件，用于提供ListView列排序指示器。

使用代码

这个ListView列排序指示器由两个自定义控件组成：一个继承自ListView的ListViewSort自定义控件，以及一个ListViewSortColumnHeader复合自定义控件。ListViewSortColumnHeader控件用于在ListView的LayoutTemplate中定义每个可排序的标题。ListViewSort自定义控件用于替换ListView ASP.NET控件，并公开以下扩展公共属性：

• ImageUrlAscending - 用于表示活动排序标题中升序排序方向的图像文件。如果省略，则使用嵌入式Web资源作为默认。
• ImageUrlDescending - 用于表示活动排序标题中降序排序方向的图像文件。如果省略，则使用嵌入式Web资源作为默认。
• SortExpressionDefault - 默认排序表达式的数据元素名称。
• SortDirectionDefault - 标题排序时的初始排序方向。

除了上述扩展公共属性外，ListViewSort与ListView完全相同，如下图所示：

   1:  <myControls:ListViewSort ID="listViewSort" 
   2:      DataSourceID="ObjMenu" 
   3:      DataKeyNames="Name"
   4:      SortExpressionDefault="Name"
   5:      SortDirectionDefault="Ascending"
   6:      runat="server">
   7:      <LayoutTemplate>
   8:          <table runat="server" 
   9:              class="listViewGrid"
  10:              cellspacing="0"
  11:              border="0">
  12:              <tr>
  13:                  <th>
  14:                      <myControls:ListViewSortColumnHeader runat="server"
  15:                          Key="Name"
  16:                          Text="Food Name" />
  17:                  </th>
  18:                  <th>
  19:                      <myControls:ListViewSortColumnHeader runat="server"
  20:                          Key="Price"
  21:                          Text="Price" />
  22:                  </th>
  23:                  <th>
  24:                      <myControls:ListViewSortColumnHeader runat="server"    
  25:                          Key="Description"
  26:                          Text="Description" />
  27:                  </th>
  28:                  <th>
  29:                      <myControls:ListViewSortColumnHeader runat="server"
  30:                          Key="Calories"
  31:                          Text="Calories" />
  32:                  </th>
  33:              </tr>
  34:              
  35:              <tr runat="server" id="itemPlaceholder" />
  36:          
  37:          </table>
  38:          <asp:DataPager ID="dataPager" runat="server">
  39:              <Fields>
  40:                  <asp:NumericPagerField ButtonCount="10"
  41:                      NextPageText="..."
  42:                      PreviousPageText="..." />     
  43:              </Fields>
  44:          </asp:DataPager>
  45:      </LayoutTemplate>
  46:      <ItemTemplate>
  47:          <tr class="<%# ((ListViewDataItem)Container).DisplayIndex % 2 == 0 ? 
                                "itemRow" : "altItemRow" %>">

ListViewSortColumnHeader复合控件用于替换通常用于激活列排序的HyperLink ASP.NET控件。ListViewSortColumnHeader公开Key和Text属性。Key属性将标题与数据绑定表达式关联起来，而Text属性用于提供标题中显示的实际文本。当标题参与排序操作时，ListViewSortColumnHeader控件会生成asp:HyperLink控件和一个预期的asp:Image控件的asp:PlaceHolder控件。

ListViewSort自定义控件重写了继承的ListView控件的一个事件：OnDataBound，如下图所示：

   1:  protected override void OnDataBound(EventArgs e)
   2:  {
   3:      if (base.SortExpression.Length == 0)
   4:      {
   5:          if (SortExpressionDefault.Length > 0)
   6:          {
   7:              base.Sort(SortExpressionDefault, SortDirectionDefault);
   8:          }
   9:      }
  10:   
  11:      List<Control> controls = Helpers.GetControlsByType(this, 
                                          typeof(ListViewSortColumnHeader));
  12:      foreach (Control control in controls)
  13:      {
  14:          ListViewSortColumnHeader header = (ListViewSortColumnHeader)control;
  15:          if (header.HasSortDirectionIndicator() == true)
  16:          {
  17:              header.ResetSortDirectionIndicator();
  18:          }
  19:      }
  20:   
  21:      foreach (Control control in controls)
  22:      {
  23:          ListViewSortColumnHeader header = (ListViewSortColumnHeader)control;
  24:          if (header.Key == base.SortExpression)
  25:          {
  26:              header.SetSortDirectionIndicator(base.SortExpression, 
                                                    base.SortDirection);
  27:              break;
  28:          }
  29:      }
  30:   
  31:      base.OnDataBound(e);
  32:  }

在ListViewSort的OnDataBound事件处理过程中，会检查现有的ListViewSort标题，移除任何现有的排序方向指示器asp:Image控件，然后将适当的排序方向指示器asp:Image控件注入到正在排序的新标题中。除了在ViewState中维护四个ListViewSort扩展公共属性外，ListViewSort基本上只做这些。这种简洁性确保了排序方向指示器逻辑不需要针对每个使用ListView的Web页面都集成到您的应用程序中。下面是一个ListViewSort的示例输出。在此示例（以及相关的项目演示文件）中，可以点击任何标题，表格数据将按升序或降序排序。

上述示例HTML和代码的项目演示文件还演示了如何使用启用了自定义分页的ASP.NET ObjectDataSource控件，以确保在任何时候都只将当前显示的ListViewSort数据保留在ViewState中。

历史

• 2008年5月13日 - 初始发布。