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

节后的这一周, 希望大家能挺住, hehe, 这两天给大家准备一个 Repeater 子视图的例子, 模拟了 Google 搜索结果后的页面的预览, 其实也只是显示了一段问题.如果, 有不明白的问题, 请先阅读 30 分钟掌握无刷新 Repeater.示例代码下载: /files/JQueryElementDemo.rar本文将详细的讲解 Repeater 控件中如何使用子视图, 目录如下: * 准备 * 定义子视图样本 * 切换子视图状态 * 定义子视图容器示例图片:准备请参照 /p/zsharedcode/wiki/JQueryElementRepeaterDoc 中的准备.定义子视图样本显示在 repeater 中的 repeater 被称为子视图, 每一个子视图都是子视图样本的副本, 并根据条件来展示不同的数据. 子视图样本的定义没有特别之处, 比如:1 je:RepeaterID= runat=server 2 FilterField= 3 4 5 6 10 11 12 #url13 14 15 #picture16 17 18 大多数情况下, 需要为子视图样本定义 FilterField 属性, 也就是搜索子视图数据所用到的字段或条件, 上面的代码中, 我们添加了 url 作为条件, 那么后台返回数据的代码可以这样编写:WebMethodpublic SortedDictionary GetGooglePicture ( string url ) / 返回 JSON由于, 只返回一行数据, 因此不必添加 pageindex 和 pagesize 参数.关于如何返回 JSON, 请参考 使用 ASP.NET 一般处理程序或 WebService 返回 JSON, 本示例所有代码为在 .NET 4.0 下编写.切换子视图状态如果需要在 Repeater 中控制子视图切换, 关闭和打开, 可以使用 shiftview, collapseview, expandview 三个函数, 比如:1 / je-=shiftview, 2 3 4 8 910 11 14 15 16 17 18 19 2021 22 以 shiftview 为例, 第一个参数为子视图的 ID, 之后的参数为用于搜索子视图数据的条件, 示例中将字段 url 作为参数, 对应了子视图样本 FilterField 属性中的 url. 如果有更多的条件, 继续添加即可, 顺序需要和子视图样本 FilterField 属性中条件一样.expandview 方法和 shiftview 是类似的, 不同的 expandview 是打开子视图, 而 shiftview 是切换子视图的打开状态.而 collapseview 方法是关闭子视图, 不需要传递条件.默认情况下, 当子视图首次被打开时, 将自动调用 fill 方法来填充数据, 而之后的打开显示现存的数据, 不再刷新.定义子视图容器除了定义子视图样本之外, 还需要在行模板中定义子视图容器, 在刚才的代码中, 有这样一段:1 / je-id= 2 3 4 5 6 7 8 9 10 11 通过 je-id 绑定为子视图 ID, 即可将元素绑定为子视