30 分钟掌握无刷新 Repeater


答案：示例代码下载: http://zsharedcode.googlecode.com/files/JQueryElementDemo.rar 
2011-9-22 更新部分内容 
2011-10-9 更新的部分内容, 详情请参考 http://code.google.com/p/zsharedcode/wiki/JQueryElementRepeaterDoc 
2011-10-17 更新部分内容 
本文中所包含的内容如下: 
* 准备 
* 主要功能 
* 绑定字段 
* 字段表达式 
* 绑定属性 
* 属性表达式 
* 基本设置 
* 设置分页 
* 设置字段 
* 设置调用的服务端方法 
* 请求/返回数据的格式 
* 填充/搜索 
* 更新 
* 删除 
* 新建 
* 行状态说明 
* 排序状态说明 
* 设置模板 
* ItemTemplate 
* UpdatedItemTemplate/InsertedItemTemplate 
* RemovedItemTemplate 
* EditItemTemplate 
* FilterTemplate/NewItemTemplate 
* HeaderTemplate/FooterTemplate/EmptyTemplate 
* 特殊绑定 
* je-id 
* je-<javascript 事件名> 
* je-class 
* je-checked/selected/readonly 
* je-value 
* je-<jQueryUI 插件名> 
* je-template 
* 子视图 
* 数据分组 
* 事件 
* 客户端方法 
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://code.google.com/p/zsharedcode/wiki/Download 下载的压缩包中包含了一个自定义样式的 jQueryUI, 如果需要更多样式, 可以在 http://jqueryui.com/download 下载: 
复制代码 代码如下:
 
<link type="text/css" rel="stylesheet" href=><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> 
 
字段表达式 

当需要根据字段的值显示不同内容时, 可以使用字段表达式, 在表达式中 # 将表示字段本身, 示例: 
复制代码 代码如下:
 
<script type="text/javascript"> 
function convertAge(age) { 

if(age < 0) return age.toString() + '-未出世'; 
else if (age < 4) return age.toString() + '-幼儿'; 
else if (age < 10) return age.toString() + '-儿童'; 
else if (age < 18) return age.toString() + '-少年'; 
else if (age < 30) return age.toString() + '-青年'; 
else if (age < 50) return age.toString() + '-中年'; 
else return age.toString() + '-老年'; 

} 
</script> 

<td> 
#{age,convertAge(#)} 
</td> 
 
在上面的例子中, #{age,convertAge(#)} 并不会直接输出 age 字段的值, 而是将 age 字段传递给 convertAge 函数, 然后将函数执行的结果输出. 

除了调用函数外, 也可以直接书写 javascript 代码, 比如: #{age,# <= 0 ? '不可能吧' : #.toString()}. 

绑定属性 

在所有的模板中都可以绑定属性, 语法为 @{<属性名>}, 比如: 
复制代码 代码如下:
 
<FooterTemplate> 
第 @{pageindex}/@{pagecount} 页, @{itemcount} 条 
</FooterTemplate> 
 
属性表达式 

属性表达式和上面的字段表达式是类似的, 可以输出转换后的属性, 示例: 
复制代码 代码如下:
 
<td colspan="5"> 
第 @{pageindex}/@{pagecount,@ <= 0 ? '-' : @} 页, @{itemcount,@ <= 0 ? '-' : @} 条 
</td> 
 
我们判断属性 pagecount 和 itemcount 如果小于等于 0, 则显示连接线. 

基本设置 

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']. 

FieldMask 表示用于验证字段的正则表达式, 在更新或新建时起效, 格式为: {<字段名>: { reg: <正则表达式>, tip: '<错误提示信息>', type: '<字段类型, 可以是 number, boolean, date>'} }. 

设置调用的服务端方法 

可以通过 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="<删除方法地址>
上一个：得到真实外网IP、IP所在国家、省份、地区(小偷程序)
下一个：Asp.Net平台下的图片在线裁剪功能的实现代码(源码打包)
更多图片编程知识: