在 jQuery Repeater 中按多个字段排序

原始文章可以在这里找到。

简介/目录

下载示例：JQueryElementDemo-en.zip，目录为 /repeater/Default.aspx。

本文将详细解释如何在 Repeater 中根据字段对数据进行排序，目录如下

• 准备
• 调用 togglesort 方法
• 多字段排序
• 服务器端排序
• 显示排序状态

准备

请查看30 分钟掌握 ASP.NET jQuery Repeater中的准备部分。

调用 togglesort 方法

在正常情况下，我们通过点击表格标题中的字段来开始对数据进行排序，因此可以在 HeaderTemplate 中调用 togglesort 方法

<je:Repeater ID="personList" runat="server" ... >
 <HeaderTemplate>
  <thead je-class="{header}">
   <tr>
    <td je-onclick="togglesort,'realname'">
     Real Name
    </td>
    <td je-onclick="togglesort,'age'">
     Age
    </td>
    <td je-onclick="togglesort,'birthday'">
     Birthday
    </td>
   </tr>
  </thead>
 </HeaderTemplate>
</je:Repeater>  

在我们的示例中，我们通过点击标题时 td 标签的 je-onclick 调用方法 togglesort，togglesort 切换字段的排序状态，顺序为升序、降序、无序。 此外，还需要指定切换哪个字段，该字段紧跟在 togglesort 之后作为第一个参数。

togglesort 方法将再次从服务器端获取数据，因此无需调用 fill 方法。

多字段排序

默认情况下，当您点击不同的字段时，已排序字段的排序状态将消失。 如果您想根据多个字段进行排序，可以在点击字段时按住 Ctrl 键。

服务器端排序

服务器端方法可以接收一个名为 __order 的参数，其中包含有关排序的信息

public void ProcessRequest ( HttpContext context )
{
 context.Response.ContentType = "text/javascript";
 context.Response.Cache.SetNoStore ( );

 int pageindex = 1;
 int pagesize = 3;

 if ( null != context.Request["pageindex"] )
  int.TryParse ( context.Request["pageindex"], out pageindex );

 if ( null != context.Request["pagesize"] )
  int.TryParse ( context.Request["pagesize"], out pagesize );

 int beginIndex = pagesize * ( pageindex - 1 ) + 1;
 int endIndex = pagesize * pageindex;

 string order = context.Request["__order"];
 // "realname asc, age desc"

 // return json
}  

在上面的代码中，我们使用通用处理程序返回 JSON，通过 Request 对象获取参数 __order。 关于如何返回 JSON，请参阅 不同 .NET 版本中返回 JSON。

显示排序状态

除了排序之外，通常还需要显示字段的排序状态，例如向上箭头表示升序

<je:Repeater ID="personList" runat="server"
Selector="'#list'" IsVariable="true"
PageSize="3" FillAsync-Url="person.ashx">
<HeaderTemplate>
 <thead je-class="{header}">
  <tr>

   <td je-onclick="togglesort,'realname'">
    Real Name
<span je-class="{sort,realname,,asc-arrow icon,desc-arrow icon}">
</span>
   </td>

  </tr>
 </thead>
</HeaderTemplate>
</je:Repeater>  

您可以使用 je-class 根据排序状态显示不同的样式，语法为

{sort,<sort field name>[,<no sort class>[,<asc class>[,<desc class>]]]}

注释