示例代码下载: /201109/yuanma/JQueryElementTest.rar
本文中所包含的内容如下:
* 准备
* 主要功能
* 绑定字段
* 绑定属性
* 基本设置
* 设置分页
* 设置字段
* 设置调用的服务端方法
* 请求/返回数据的格式
* 填充/搜索
* 更新
* 删除
* 新建
* 行状态说明
* 排序状态说明
* 设置模板
* ItemTemplate
* UpdatedItemTemplate/InsertedItemTemplate
* RemovedItemTemplate
* EditItemTemplate
* FilterTemplate/NewItemTemplate
* HeaderTemplate/FooterTemplate/EmptyTemplate
* 特殊绑定
* je-id
* je-<javascript 事件名>
* je-class
* je-checked/selected/readonly
* je-value
* je-<jQueryUI 插件名>
* 事件
* 客户端方法
Repeater 示例图片:

准备
请确保已经在 http://code.google.com/p/zsharedcode/wiki/Download 中下载 JQueryElement 最新的版本.
请使用指令引用如下的命名空间:
复制代码 代码如下:
<%@ Register Assembly="zoyobar.shared.panzer.JQueryElement"
Namespace="zoyobar.shared.panzer.ui.jqueryui"
TagPrefix="je" %>
<%@ Register Assembly="zoyobar.shared.panzer.JQueryElement"
Namespace="zoyobar.shared.panzer.web.jqueryui"
TagPrefix="je" %>

除了命名空间, 还需要引用 jQueryUI 的脚本和样式, 可以在 http://jqueryui.com 下载, 例如:
复制代码 代码如下:
<link type="text/css" rel="stylesheet" href="[样式路径]/jquery-ui-1.8.15.custom.css" />
<script type="text/javascript" src="[脚本路径]/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="[脚本路径]/jquery-ui-1.8.15.custom.min.js"></script>
<script type="text/javascript" src="[脚本路径]/jquery.ui.datepicker-zh-CN.js"></script>

主要功能
绑定字段
在行模板中, 可以使用 #{<字段名>} 的形式来绑定字段, 比如:
复制代码 代码如下:
<ItemTemplate>
<span>#{id}</span>
<span>#{realname}</span>
<span>#{age}</span>
</ItemTemplate>

字段也可以被绑定在标签的属性中, 比如:
复制代码 代码如下:
<ItemTemplate>
<span>#{id}</span>
<span title="#{realname}">#{realname}</span>
<span>#{age}</span>
</ItemTemplate>

绑定属性
在所有的模板中都可以绑定属性, 语法为 @{<属性名>}, 比如:
<FooterTemplate>
第 @{pageindex}/@{pagecount} 页, @{itemcount} 条
</FooterTemplate>
基本设置
Repeater 的 Selector 属性是一个 javascript 表达式, 它将作为一个选择器, 写法可以参照 http://jquery.com, 选择器对应的元素将作为页面上最终的 repeater 来呈现, 示例:
复制代码 代码如下:
<table id="list"></table>
<je:Repeater ID="studentRepeater" runat="server"
Selector="'#list'">

</je:Repeater>

设置 IsVariable 属性为 True, 则将在客户端生成与 ClientID 同名的 javascript 变量, 示例:
复制代码 代码如下:
<je:Repeater ID="studentRepeater" runat="server"
IsVariable="true">
</je:Repeater>
<script type="text/javascript">
$(function () {
studentRepeater.__repeater('fill');
});
</script>

由于在此页面中 ClientID 与 ID 相同, 因此通过 studentRepeater 就可以访问 repeater. 此外, 也可以通过 JQueryScript 控件并使用内嵌语法 [%id:studentRepeater%] 来确保 ClientID 与 ID 不相同的页面也能访问 repeater 变量.
设置分页
通过 Repeater 的 PageSize 属性设置每页包含多少条数据, PageIndex 属性设置初始的页码, PageIndex 默认为 1.
设置字段
Repeater 的 Field 属性表示参与绑定的字段, 其形式为一个 javascript 字符串数组, 比如: ['id', 'realname', 'age'], 如果不设置 Field 属性, 则由第一次填充的数据来确定, 但这将导致在没有数据的情况下无法新建.
FilterField 表示用于搜索的字段, 也是一个 javascript 字符串数组. FilterFieldDefault 为搜索字段的值为 null 或者 '' 时的默认值, 示例: ['', '', 0].
SortField 表示参与排序的字段, 比如: ['id'].
设置调用的服务端方法
可以通过 Async 来设置如何调用服务器端方法, 如果是调用 WebService, 则需要设置 MethodName, 如果是普通的 ashx 这样的一般处理程序, 则忽略 MethodName, 示例:
复制代码 代码如下:
<je:Repeater ID="studentRepeater" runat="server"
FillAsync-Url="<填充方法地址>"
FillAsync-MethodName="<填充方法名称>"
UpdateAsync-Url="<更新方法地址>"
UpdateAsync-MethodName="<更新方法名称>"
InsertAsync-Url="<新建方法地址>"
InsertAsync-MethodName="<新建方法名称>"
RemoveAsync-Url="<删除方法地址>"
RemoveAsync-MethodName="<删除方法名称>"
>

</je:Repeater>
<je:Repeater ID="studentRepeater" runat="server"
FillAsync-Url="Student.aspx"
FillAsync-MethodName="Fill"
UpdateAsync-Url="Student.aspx"
UpdateAsync-MethodName="Update"
InsertAsync-Url="Student.aspx"
InsertAsync-MethodName="Insert"
RemoveAsync-Url="Student.aspx"
RemoveAsync-MethodName="Remove"
>

</je:Repeater>

如果, 你需要为方法传递更多的参数, 则可以采用下面的形式:
复制代码 代码如下:
<je:Repeater ID="studentRepeater" runat="server">
<FillAsync Url="<填充方法地址>" MethodName="<填充方法名称>">
<ParameterList>
<je:Parameter Name="<参数名1>"
Type="Expression"
Value="<值1>"
Default="<默认值1>" />
<je:Parameter Name="<参数名2>"
Type="Selector"
Value="<选择器2>"
Default="<默认值2>" />

</ParameterList>
</FillAsync>
</je:Repeater>
<je:Repeater ID="studentRepeater" runat="server">
<FillAsync Url="Student.aspx" MethodName="Fill">
<ParameterList>
<je:Parameter Name="ws"
Type="Expression"
Value="website"
Default="'-'" />
<je:Parameter Name="year"
Type="Selector"
Value="'#year'"
Default="2011" />

</ParameterList>
</FillAsync>
</je:Repeater>

通过添加 Parameter, 可以传递更多的参数, Name 为参数名, Type 为 Expression 时, 则 Value 中包含的是一个 javascript 表达式, 示例中的 Value="website" 表示取 javascript 变量 website 的值, 当然也可以设置为常量, 比如: Value="'/ , 其中包含了 IEBrowser 控制 WebBrowser 执行各种 js 和 jQuery 脚本以及录制功能 和 jQueryUI 的 Asp.net 控件 JQueryElement.