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

 更新时间:2011年10月25日 11:13:01   作者:   我要评论
节后的这一周, 希望大家能挺住, hehe, 这两天给大家准备一个 Repeater 子视图的例子, 模拟了 Google 搜索结果后的页面的预览, 其实也只是显示了一段问题
如果, 有不明白的问题, 请先阅读 30 分钟掌握无刷新 Repeater.

示例代码下载: http://zsharedcode.googlecode.com/files/JQueryElementDemo.rar

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

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

示例图片:

准备

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

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

<je:Repeater ID="<子视图 ID>" runat="server"
FilterField="<子视图搜索字段>">
</je:Repeater>
<je:Repeater ID="pictureRepeater" runat="server"
FilterField="['url']"
FillAsync-Url="webservice.asmx"
FillAsync-MethodName="">
<ItemTemplate>
<div>
<span class="url">#{url}</span>
<br />
<br />
#{picture}
</div>
</ItemTemplate>
</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 三个函数, 比如:
复制代码 代码如下:

// je-<javascript 事件名>="shiftview,'<子视图 ID>'[,<子视图搜索字段值n>]"
<div id="list">
<je:Repeater ID="" runat="server"
Selector="'#list'" PageSize="2" IsVariable="true"
FillAsync-Url="webservice.asmx"
FillAsync-MethodName="">
<ItemTemplate>
<div class="picture">
<div
je-button="label='更多';"
je-onclick="shiftview,'pictureRepeater','#{url}'">
</div>
<div je-id="pictureRepeater" style="display: none;">
</div>
</div>
</ItemTemplate>
</je:Repeater>
</div>

以 shiftview 为例, 第一个参数为子视图的 ID, 之后的参数为用于搜索子视图数据的条件, 示例中将字段 url 作为参数, 对应了子视图样本 FilterField 属性中的 url. 如果有更多的条件, 继续添加即可, 顺序需要和子视图样本 FilterField 属性中条件一样.
expandview 方法和 shiftview 是类似的, 不同的 expandview 是打开子视图, 而 shiftview 是切换子视图的打开状态.
而 collapseview 方法是关闭子视图, 不需要传递条件.
默认情况下, 当子视图首次被打开时, 将自动调用 fill 方法来填充数据, 而之后的打开显示现存的数据, 不再刷新.
定义子视图容器
除了定义子视图样本之外, 还需要在行模板中定义子视图容器, 在刚才的代码中, 有这样一段:
复制代码 代码如下:

// je-id="<子视图 ID>"
<ItemTemplate>
<div class="picture">
<div je-id="pictureRepeater" style="display: none;">
</div>
</div>
</ItemTemplate>

通过 je-id 绑定为子视图 ID, 即可将元素绑定为子视图的容器, 而子视图将显示在目标容器中.
子视图默认为关闭状态, 因此代码中通过 style="display: none;" 使子视图容器在开始时隐藏.

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

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

欢迎访问 panzer 开源项目, http://zsharedcode.googlecode.com/ , 其中包含了 IEBrowser 控制 WebBrowser 执行各种 js 和 jQuery 脚本以及录制功能 和 jQueryUI 的 Asp.net 控件 JQueryElement.

相关文章

  • ASP.NET抓取网页内容的实现方法

    ASP.NET抓取网页内容的实现方法

    这篇文章主要介绍了ASP.NET抓取网页内容的实现方法,涉及使用HttpWebRequest及WebResponse抓取网页内容的技巧,需要的朋友可以参考下
    2015-02-02
  • Asp.net后台调用js 2种方法

    Asp.net后台调用js 2种方法

    这篇文章主要介绍了Asp.net后台调用js的二种方法,大家参考使用吧
    2013-11-11
  • SQLServer 在Visual Studio的2种连接方法

    SQLServer 在Visual Studio的2种连接方法

    这篇文章介绍了SQLServer 在Visual Studio的2种连接方法,有需要的朋友可以参考一下
    2013-09-09
  • .Net Core下HTTP请求IHttpClientFactory示例详解

    .Net Core下HTTP请求IHttpClientFactory示例详解

    这篇文章主要给大家介绍了关于.Net Core下HTTP请求IHttpClientFactory的相关资料,文中通过示例代码介绍的非常详细,对大家学习或者使用.Net Core具有一定的参考学习价值,需要的朋友们下面来一起学习学习吧
    2019-09-09
  • asp.net使用DataTable构造Json字符串的方法

    asp.net使用DataTable构造Json字符串的方法

    这篇文章主要介绍了asp.net使用DataTable构造Json字符串的方法,涉及asp.net字符串序列化、遍历及构造等操作技巧,需要的朋友可以参考下
    2015-12-12
  • ASP.NET中事件如何依次发生?

    ASP.NET中事件如何依次发生?

    这篇文章主要介绍了ASP.NET中事件是如何依次发生的,
    2015-09-09
  • .net SMTP发送Email实例(可带附件)

    .net SMTP发送Email实例(可带附件)

    本文为大家详细介绍下.net SMTP发送Email同时可带附件的具体实现思路及代码,想实现的朋友可以参考下哈,希望对大家有所帮助
    2013-07-07
  • asp.net利用反射实现给model类赋值的方法

    asp.net利用反射实现给model类赋值的方法

    这篇文章主要介绍了asp.net利用反射实现给model类赋值的方法,结合实例形式分析了asp.net使用反射给model类赋值的操作步骤与相关操作技巧,需要的朋友可以参考下
    2017-03-03
  • 浅谈Asp.Net母版页的相关知识

    浅谈Asp.Net母版页的相关知识

    母版页的使用与普通页面类似,可以在其中放置文件或者图形、任何的HTML控件和Web控件,后置代码等,这篇文章主要介绍了浅谈Asp.Net母版页的相关知识,感兴趣的小伙伴们可以参考一下
    2018-11-11
  • ASP.NET MVC中异常Exception拦截的深入理解

    ASP.NET MVC中异常Exception拦截的深入理解

    异常信息的处理在程序中非常重要, 在asp.net mvc中提供异常属性拦截器进行对异常信息的处理,下面这篇文章主要给大家介绍了关于ASP.NET MVC中异常Exception拦截的相关资料,需要的朋友可以参考下
    2018-07-07

最新评论