ASP.NET jQuery Repeater数据排序指南

ASP.NET应用程序中,经常需要对数据进行排序,以方便用户查看和分析。本文将详细介绍如何使用jQueryRepeater控件实现数据的排序功能。

准备阶段

在开始之前,请确保已经熟悉了ASP.NETjQueryRepeater控件的基本使用方法。如果需要,请参考。

调用togglesort方法

通常情况下,通过点击表格头部的字段来开始排序。可以在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,<排序字段名>[,<无排序类>[,<升序类>[,<降序类>]]]}
沪ICP备2024098111号-1
上海秋旦网络科技中心:上海市奉贤区金大公路8218号1幢 联系电话:17898875485