在ASP.NET应用程序中,经常需要对数据进行排序,以方便用户查看和分析。本文将详细介绍如何使用jQueryRepeater控件实现数据的排序功能。
在开始之前,请确保已经熟悉了ASP.NETjQueryRepeater控件的基本使用方法。如果需要,请参考。
通常情况下,通过点击表格头部的字段来开始排序。可以在Repeater的HeaderTemplate中使用je-onclick属性来调用togglesort方法。
<je:Repeater ID="personList" runat="server">
<HeaderTemplate>
<thead je-class="{header}">
<tr>
<td je-onclick="togglesort,'realname'">真实姓名</td>
<td je-onclick="togglesort,'age'">年龄</td>
<td je-onclick="togglesort,'birthday'">生日</td>
</tr>
</thead>
</HeaderTemplate>
</je:Repeater>
在上面的示例中,通过td标签的je-onclick属性调用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,请参考。
除了排序之外,通常还需要显示字段的排序状态,例如上箭头表示升序:
<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'">真实姓名<span je-class="{sort,realname,,asc-arrow icon,desc-arrow icon}"></span></td>
</tr>
</thead>
</HeaderTemplate>
</je:Repeater>
{sort,<排序字段名>[,<无排序类>[,<升序类>[,<降序类>]]]}