jquery repeater 完成 QQ 邮箱邮件分组显示功能

前几天, JQueryElement 更新到了 3.5.0, 增加了其中 Repeater 的数据分组显示的功能, 所以这里也是编写了一个仿照 QQ 邮箱分组显示邮件的例子.

由于精力有限, 不能在多个博客中保证文章的同步, 可在如下地址查看最新内容, 请谅解:

http://code.google.com/p/zsharedcode/wiki/JERepeaterGroup

先来看下, QQ 邮箱的截图:

在邮箱中, 可以按照发件人, 主题, 时间等字段分组和排序, 我们在例子中也将完成类似的效果. 那么, 开始今天的讲解吧.

如果, 有不明白的问题, 请先阅读 30 分钟掌握无刷新 Repeater.

请到 Download 下载资源 的 JQueryElement 示例下载一节下载示例代码

本文将详细的讲解 Repeater 控件中如何对数据分组, 目录如下:

  * 准备
  * 设置分组的字段
  * 设置分组模板

示例图片:

准备

请参照 http://code.google.com/p/zsharedcode/wiki/JQueryElementRepeaterDoc 中的准备.

设置分组的字段

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/, 建议全屏观看.

转载于:https://www.cnblogs.com/zoyobar/archive/2011/10/17/JE_15.html