jquery repeater 模仿 Google 展开页面预览子视图

节后的这一周, 希望大家能挺住, hehe, 这两天给大家准备一个 Repeater 子视图的例子, 模拟了 Google 搜索结果后的页面的预览, 其实也只是显示了一段问题.

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

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

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

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

本文将详细的讲解 Repeater 控件中如何使用子视图, 目录如下:

* 准备
* 定义子视图样本
* 切换子视图状态
* 定义子视图容器

示例图片:

准备

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

定义子视图样本

显示在 repeater 中的 repeater 被称为子视图, 每一个子视图都是子视图样本的副本, 并根据条件来展示不同的数据. 子视图样本的定义没有特别之处, 比如:

 1 <je:Repeater ID="<子视图 ID>" runat="server"
 2     FilterField="<子视图搜索字段>">
 3 
 4 </je:Repeater>
 5 
 6 <je:Repeater ID="pictureRepeater" runat="server"
 7     FilterField="['url']"
 8     FillAsync-Url="webservice.asmx"
 9     FillAsync-MethodName="GetGooglePicture">
10     <ItemTemplate>
11         <div>
12             <span class="url">#{url}</span>
13             <br />
14             <br />
15             #{picture}
16         </div>
17     </ItemTemplate>
18 </je:Repeater>

大多数情况下, 需要为子视图样本定义 FilterField 属性, 也就是搜索子视图数据所用到的字段或条件, 上面的代码中, 我们添加了 url 作为条件, 那么后台返回数据的代码可以这样编写:

[WebMethod]
public SortedDictionary<string, object> GetGooglePicture ( string url )
{
    // 返回 JSON
}

由于, 只返回一行数据, 因此不必添加 pageindex 和 pagesize 参数.

关于如何返回 JSON, 请参考使用 ASP.NET 一般处理程序或 WebService 返回 JSON, 本示例所有代码为在 .NET 4.0 下编写.

切换子视图状态

如果需要在 Repeater 中控制子视图切换, 关闭和打开, 可以使用 shiftview, collapseview, expandview 三个函数, 比如:

 1 //    je-<javascript 事件名>="shiftview,'<子视图 ID>'[,<子视图搜索字段值n>]"
 2 
 3 <div id="list">
 4     <je:Repeater ID="googleRepeater" runat="server"
 5         Selector="'#list'" PageSize="2" IsVariable="true"
 6         FillAsync-Url="webservice.asmx"
 7         FillAsync-MethodName="SearchGoogle">
 8         <ItemTemplate>
 9 
10             <div class="picture">
11                 <div
12 je-button="label='更多';"
13                     je-onclick="shiftview,'pictureRepeater','#{url}'">
14                 </div>
15                 <div je-id="pictureRepeater" style="display: none;">
16                 </div>
17             </div>
18         
19         </ItemTemplate>
20 
21     </je:Repeater>
22 </div>

以 shiftview 为例, 第一个参数为子视图的 ID, 之后的参数为用于搜索子视图数据的条件, 示例中将字段 url 作为参数, 对应了子视图样本 FilterField 属性中的 url. 如果有更多的条件, 继续添加即可, 顺序需要和子视图样本 FilterField 属性中条件一样.

expandview 方法和 shiftview 是类似的, 不同的是 expandview 打开子视图, 而 shiftview 是切换子视图的打开状态.

而 collapseview 方法是关闭子视图, 不需要传递条件.

默认情况下, 当子视图首次被打开时, 将自动调用 fill 方法来填充数据, 而之后的打开显示现存的数据, 不再刷新.

定义子视图容器

除了定义子视图样本之外, 还需要在行模板中定义子视图容器, 在刚才的代码中, 有这样一段:

 1 // je-id="<子视图 ID>"
 2 
 3 <ItemTemplate>
 4 
 5     <div class="picture">
 6 
 7         <div je-id="pictureRepeater" style="display: none;">
 8         </div>
 9     </div>
10         
11 </ItemTemplate>

通过 je-id 绑定为子视图 ID, 即可将元素绑定为子视图的容器, 而子视图将显示在目标容器中.

子视图默认为关闭状态, 因此代码中通过 style="display: none;" 使子视图容器在开始时隐藏.

JQueryElement 是开源共享的代码, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 页面下载 dll 或者是源代码.

实际过程演示: http://www.tudou.com/programs/view/uVx2BBMHgOQ/, 建议全屏观看.