jquery repeater 完成 QQ 邮箱邮件分组显示功能
前几天, JQueryElement 更新到了 3.5.0, 增加了其中 Repeater 的数据分组显示的功能, 所以这里也是编写了一个仿照 QQ 邮箱分组显示邮件的例子.
由于精力有限, 不能在多个博客中保证文章的同步, 可在如下地址查看最新内容, 请谅解:
http://code.google.com/p/zsharedcode/wiki/JERepeaterGroup
先来看下, QQ 邮箱的截图:
在邮箱中, 可以按照发件人, 主题, 时间等字段分组和排序, 我们在例子中也将完成类似的效果. 那么, 开始今天的讲解吧.
如果, 有不明白的问题, 请先阅读 30 分钟掌握无刷新 Repeater.
请到 Download 下载资源 的 JQueryElement 示例下载一节下载示例代码
本文将详细的讲解 Repeater 控件中如何对数据分组, 目录如下:
* 准备
* 设置分组的字段
* 设置分组模板
示例图片:
准备
设置分组的字段
Repeater 每次只能根据一个字段来分组, 可以 GroupField 属性或者 setgroup 方法来设置用来分组的字段, 比如:
1 <je:Repeater ID="mailRepeater" runat="server"
2 GroupField="<分组字段>">
3 <HeaderTemplate>
4
5 <td class="group-header"
6 je-onclick="setgroup,'<分组字段>';togglesort,'sender'">
7 发送人
8 </td>
9
10 </HeaderTemplate>
11 </je:Repeater>
12
13 <je:Repeater ID="mailRepeater" runat="server"
14 GroupField="displaydate">
15 <HeaderTemplate>
16
17 <td class="group-header"
18 je-onclick="setgroup,'sender';togglesort,'sender'">
19 发送人
20 </td>
21
22 </HeaderTemplate>
23 </je:Repeater>
如果使用 setgroup 方法设置分组字段, 并不会自动重新获取数据, 所以需要调用 fill, togglesort 之类的函数来刷新数据.
在上面的例子中, 我们设置 GroupField 为 displaydate, 因此默认情况下, repeater 将根据返回的 JSON 数据的 displaydate 来划分分组.
每一次设置分组字段后, 应该重新从服务器端获取当前页的数据, 下面是 Repeater 所调用的 WebService 方法:
1 [WebMethod]
2 [ScriptMethod]
3 public SortedDictionary<string, object> FillMailList ( int pageindex, int pagesize, string __order, string __group )
4 {
5 this.Context.Response.Cache.SetNoStore ( );
6
7 int beginIndex = pagesize * ( pageindex - 1 ) + 1;
8 int endIndex = pagesize * pageindex;
9
10 int itemcount;
11 DataTable mailTable = SampleHelper.Filter ( null,
( __order == string.Empty ? string.Empty : __order + "," ) + "ReceiveDate desc",
beginIndex, endIndex, null, "QQMail",
out itemcount );
12
13 List<object> tableJSON = SampleHelper.CreateJSONArray ( mailTable );
14
15 return SampleHelper.CreateJSONObject ( new KeyValuePair<string, object>[]
16 {
17 new KeyValuePair<string, object> ( "__success", true ),
18 new KeyValuePair<string, object> ( "rows", tableJSON ),
19 new KeyValuePair<string, object> ( "itemcount", itemcount )
20 }
21 );
22
23 /*
24 * {
25 * "__success": true,
26 * "rows":
27 * [
28 * { "id": 0, "sender": "xxx", ... }
29 * ],
30 * "itemcount": 100
31 * }
32 * */
33 }
在 FillMailList 方法中, 我们接受了 __order 和 __group 两个参数, 分别表示排序和分组的条件, 由于示例中排序和分组的条件是一样的, 所以我们只用了 __order 这个参数. 此外, 我们通过 SampleHelper 读取了 Sample.xml 文件中的数据, 并按照指定排序和分组条件输出了对应的 JSON 数据.
也是因为使用 Access 分页再加上排序, sql 语句组合起来也是挺麻烦的, 这里也就没有写使用 Access 数据库的代码.
代码中, 我们还设定了默认按照 ReceiveDate desc 来排序, 如果 __order 不为空, 比如 __order 为 "sender desc", 那么将按照 "sender desc, ReceiveDate desc" 排序, 也就是同一分组的数据将按照接收日期来排序.
关于如何返回 JSON, 请参考 使用 ASP.NET 一般处理程序或 WebService 返回 JSON, 本示例所有代码为在 .NET 4.0 下编写.
设置分组模板
通过 GroupTemplate 可以设置分组模板, 这类似于一个表头, 相同分组的数据将显示在同一表头下, 比如:
1 <script type="text/javascript">
2 function convertGroupField(groupfield) {
3 switch (groupfield) {
4 case'displaydate':
5 return'<strong>时间</strong>';
6 case'sender':
7 return'<strong>发送人</strong>';
8 }
9 }
10 </script>
11
12 <je:Repeater ID="mailRepeater" runat="server"
13 GroupField="displaydate"
14 FillAsync-Url="webservice.asmx"
15 FillAsync-MethodName="FillMailList">
16
17 <GroupTemplate>
18 <tr>
19 <td colspan="4">
20 @{groupfield,convertGroupField(@)}:
21 @{groupname}
22 </td>
23 </tr>
24 </GroupTemplate>
25 <ItemTemplate>
26 <tr>
27 <td>
28 <input type="checkbox"
29 je-checked="selected"
30 je-onclick="toggleselect,false"/>
31 </td>
32 <td>
33 #{sender}
34 </td>
35 <td>
36 <strong>#{title}</strong>
37 </td>
38 <td>
39 <strong>#{displaydate}</strong>
40 #{receivedate,jQuery.panzer.formatDate(#,'yyyy-MM-dd h:m')}
41 </td>
42 </tr>
43 </ItemTemplate>
44 </je:Repeater>
在 GroupTemplate 中可以使用属性 groupfield 和 groupname 来表示分组字段和当前分组的值.
groupfield 为当前分组的字段, 示例中, 我们使用了 javascript 函数 convertGroupField 来转换了输出.
groupname 则是当前分组字段的值, 比如示例图片中的发送人后面的 Dell, Google 等.
JQueryElement 是开源共享的代码, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 页面下载 dll 或者是源代码.
实际过程演示: http://www.tudou.com/programs/view/5KYgMnAdG6A/, 建议全屏观看.
