asp.net 30分钟掌握无刷新 Repeater


Posted in Javascript onSeptember 16, 2011

示例代码下载: /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 示例图片:

asp.net 30分钟掌握无刷新 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="'www.google.com'" 或者 Value="100", 当 Type 为 Selector 时, 则 Value 中的 javascript 表达式将作为选择器, 选择器的写法可以参照 http://jquery.com, 选择器对应的元素的值将作为参数的值. Default 中是默认值的 javascript 表达式, 当参数的值为 null 或者 '' 时, 将采用 Default 中的值.
请求/返回数据的格式
填充/搜索
对于填充或者搜索操作, 以 WebService 为例, 服务端将接收如下参数, pageindex 页码, pagesize 每页中包含数据条数, 还可以接收与字段同名的参数或者通过 Parameter 增加的参数作为搜索条件, 或者接收形式为 <字段名称>_order 的用于排序的字段参数, 排序参数有三种值, "" 表示没有排序, "asc" 升序, "desc" 降序:
[WebMethod ( )]
public static object <方法名称> ( int pageindex, int pagesize
[, <类型n, 如: string> <用于搜索的字段或条件名称n>]
[, string <用于排序的字段名称m>_order] )
{
}
[WebMethod ( )]
public static object Fill ( int pageindex, int pagesize
, string realname, int age
, string id_order )
{
}
服务器还应返回如下格式的 json 数据作为填充数据, 其中 __success 默认为 true, itemcount 可以省略, 但将无法计算 pagecount 页码.
{ 
"__success": <表示是否成功的布尔值, 为 true 或者 false>, 
"rows": <当前页包含行数据的 javascript 数组>, 
"itemcount": <总行数> 
} 
{ 
"__success": true, 
"rows": 
[ 
{ "id": 1, "realname": "jack", "age": 20 }, 
{ "id": 2, "realname": "tom", "age": 21 } 
], 
"itemcount": 120 
}

在 .NET 4.0 中可以使用匿名类型来返回 json, 比如:
[WebMethod ( )] 
public static object Fill ( /* 参数 */ ) 
{ 
// ... 
List<object> students = new List<object> ( ); 
students.Add ( new { 
id = 1, 
realname = "jack", 
age = 20 
} ); 
// ... 
return new { __success = true, rows = students.ToArray ( ), itemcount = 120 }; 
}

更新
删除
新建
以上 3 项由于篇幅原因无法全部列出, 如有需要请参考: http://code.google.com/p/zsharedcode/wiki/JQueryElementRepeaterDoc
行状态说明
在客户端的 javascript 脚本中, 行状态有 4 种, 分别是 unchanged 未改变, updated 更新过, inserted 新建后的行, removed 删除后的行.
排序状态说明
在客户端的 javascript 脚本中, 排序状态有 4 种, 分别是 none 无排序或按照默认排序, asc 升序, desc 降序.
设置模板
在 Repeater 的各种模板中, 可以设置 Repeater 最终显示的 html 代码, 这些 html 代码应该是完整的, 合法的, 并且不要直接使用单引号, 可以对单引号转义, 否则可能导致最终显示的不正常.
ItemTemplate
ItemTemplate 为行模板中的一种, 可以显示处于 unchanged 状态的行, 如果没有设置 UpdatedItemTemplate 或者 InsertedItemTemplate, 那么 updated, inserted 状态的行也显示在 ItemTemplate 中, 示例:
<ItemTemplate> 
<tr> 
<td> 
#{id} 
</td> 
<td> 
#{realname} 
</td> 
<td> 
#{age} 
</td> 
<td> 
/* 编辑和删除按钮 */ 
</td> 
</tr> 
</ItemTemplate>

UpdatedItemTemplate/InsertedItemTemplate
与 ItemTemplate 不同的是, UpdatedItemTemplate 和 InsertedItemTemplate 分别用于显示状态为 updated 和 inserted 的行, 主要用于采用不同样式来显示不同状态的行, 但也可以使用更简便的 je-class 来完成同样的效果, 示例:
<UpdatedItemTemplate> 
<tr style="font-weight: bold;"> 
<td> 
#{id} 
</td> 
<td> 
#{realname} 
</td> 
<td> 
#{age} 
</td> 
</tr> 
</UpdatedItemTemplate> 
<InsertedItemTemplate> 
<tr style="color: green;"> 
<td> 
#{id} 
</td> 
<td> 
#{realname} 
</td> 
<td> 
#{age} 
</td> 
</tr> 
</InsertedItemTemplate>

RemovedItemTemplate
EditItemTemplate
FilterTemplate/NewItemTemplate
HeaderTemplate/FooterTemplate/EmptyTemplate
以上 4 项由于篇幅原因无法全部列出, 如有需要请参考: http://code.google.com/p/zsharedcode/wiki/JQueryElementRepeaterDoc
特殊绑定
je-id
使用 je-id="<字段名>" 可以绑定特殊的 id, 可以使用在行模板或者 FilterTemplate, NewItemTemplate 中的 input 元素中. 在 EditItemTemplate 中, 被指定 je-id 的 input 将包含此字段的新值. 在 FilterTemplate 中, 指定 je-id 的 input 包含了用于搜索的字段的值, 这些字段应该包含在 FilterField 属性中. 在 NewItemTemplate 中, 指定 je-id 的 input 包含了用于新建的字段的值.
je-<javascript 事件名>
使用 je-<javascript 事件名>="<行为名>" 可以为事件绑定特殊的操作. 可以使用在各个模板中, 常用的行为有: beginedit 开始编辑, endedit 取消编辑, update 保存更新, remove 删除, toggleselect 切换选中状态, insert 新建, filter 搜索, togglesort 切换排序. 其中, 前 5 者只能用在行模板中, insert 可用在 NewItemTemplate 中, filter 可用在 FilterTemplate 中, togglesort 可用在 HeaderTemplate 中, 示例:
<ItemTemplate> 
<tr> 
<td> 
#{id} 
</td> 
<td> 
#{realname} 
</td> 
<td> 
#{age} 
</td> 
<td> 
<span je-onclick="beginedit">编辑</span> 
<span je-onclick="remove">删除</span> 
</td> 
</tr> 
</ItemTemplate> 
<EditItemTemplate> 
<tr> 
<td> 
#{id} 
</td> 
<td> 
<input type="text" je-id="realname" value="#{realname}" class="textbox" /> 
</td> 
<td> 
<input type="text" je-id="age" value="#{age}" class="textbox" /> 
</td> 
<td> 
<span je-onclick="endedit">取消</span> 
<span je-onclick="update">保存</span> 
</td> 
</tr> 
</EditItemTemplate>

需要说明的是, togglesort 还需要指定一个参数, 表示切换排序的字段, 这个字段已经在 SortField 中设置, 比如: je-onclick="togglesort,realname".
je-class
使用 je-class="<样式>" 可以为事件绑定特殊的样式. 可以在各个模板中使用 je-class, 常用的样式有: {header} 表示 ui-widget-header, {active} 表示 ui-state-active, {highlight} 表示 ui-state-highlight, {disabled} 表示 ui-state-disabled, {error} 表示 ui-state-error, {default} 表示 ui-state-default, {state} 表示行状态, {sort} 表示排序状态, 示例:
<HeaderTemplate> 
<thead je-class="{header}"> 
<tr> 
<td je-onclick="togglesort,id"> 
<span je-class="{sort,id,,ui-icon ui-icon-arrow-1-n icon,ui-icon ui-icon-arrow-1-s icon}"> 
</span> 
序号 
</td> 
/* ... */ 
</tr> 
</thead> 
</HeaderTemplate> 
<ItemTemplate> 
<tr je-class="{state}-item"> 
/* ... */ 
</tr> 
</ItemTemplate>

这里需要说明 {state} 和 {sort} 的语法, 分别为 {state[,<未改变行样式>[,<新建行样式>[,<修改行样式>[,<删除行样式>]]]]}, {sort,<排序字段>[,<无排序样式>[,<升序样式>[,<降序样式>]]]}. 对于 {state} 而言, 如果没有指定某种状态的样式, 则将使用行的状态名称来代替样式名称, 比如: {state,,new-item}, 由于没有指定未改变行的样式, 因此如果行的状态为 unchanged, 那么将返回 unchanged. 对于 {sort} 而言, 如果没有指定某种排序的样式, 将采用排序的状态来代替样式名称.
je-checked/selected/readonly
在 ItemTemplate 中使用 je-checked="selected" 配合 je-onclick="toggleselect"来表示行是否处于选中的状态, je-selected 则可用于 EditItemTemplate 中的 select 元素, 示例:
<ItemTemplate> 
<tr> 
<td> 
<input type="checkbox" 
je-checked="selected" 
je-onclick="toggleselect" 
/> #{id} 
</td> 
</tr> 
</ItemTemplate>

je-value
在 FilterTemplate 中使用 je-value="<搜索字段名>" 来绑定初始化的搜索条件.
je-<jQueryUI 插件名>
可以在任何模板中使用 je-<jQueryUI 插件名>="<属性名n>=<属性值n>;", 来生成一个 jQueryUI 的插件, 但目前仅支持 je-button 和 je-datepicker, 示例:
<EditItemTemplate> 
<tr je-class="{state}-item"> 
<td> 
<input type="checkbox" je-checked="selected" je-onclick="toggleselect" /> #{id} 
</td> 
<td> 
<input type="text" je-id="realname" value="#{realname}" /> 
</td> 
<td> 
<input type="text" je-id="age" value="#{age}" /> 
</td> 
<td> 
<input type="text" je-id="birthday" 
je-datepicker="dateFormat='yy-mm-dd';" 
value="#{birthday}" /> 
</td> 
<td> 
<span 
je-button="label='编辑';icons={ primary: 'ui-icon-pencil' };" 
je-onclick="beginedit"> 
</span> 
<span 
je-button="label='删除';icons={ primary: 'ui-icon-trash' };" 
je-onclick="remove"> 
</span> 
</td> 
</tr> 
</EditItemTemplate>

属性的设置是和 jQueryUI 插件的属性一致的, 可以参考 http://jqueryui.com.
事件
在 Repeater 所有的事件中都有具有 tag 和 e 两个参数, tag 是 repeater 所在的元素, e 则包含了事件的相关数据.
PreUpdate, Updated 更新前后的事件, PreRemove, Removed 删除前后的事件, PreInsert, Inserted 新建前后的事件. 这些事件的 e 参数中包含 row 属性, 表示当前参与相关操作的行, 而 Updated, Removed, Inserted 的 e 还包含 isSuccess, 表示是否执行成功, 示例:
<je:Repeater ID="studentRepeater" runat="server" 
/* ... */ 
PreUpdate=" 
function(tag, e){ 
if(e.row.realname == '' || e.row.age == '' || e.row.birthday == ''){ 
$('#message').text('请将信息填写完整'); 
return false; 
} 
} 
" PreInsert=" 
function(tag, e){ 
if(e.row.realname == '' || e.row.age == '' || e.row.birthday == ''){ 
$('#message').text('请将信息填写完整'); 
return false; 
} 
} 
" PreRemove=" 
function(tag, e){ 
if(!confirm('是否删除 ' + e.row.realname)){ 
return false; 
} 
} 
" Updated=" 
function(tag, e){ 
$('#message').text('更新 ' + e.row.realname + (e.isSuccess ? ' 成功' : ' 失败')); 
} 
" Inserted=" 
function(tag, e){ 
$('#message').text('新建 ' + e.row.realname + (e.isSuccess ? ' 成功' : ' 失败')); 
} 
" Removed=" 
function(tag, e){ 
$('#message').text('删除 ' + e.row.realname + (e.isSuccess ? ' 成功' : ' 失败')); 
} 
"> 
/* ... */ 
</je:Repeater>

PreFill, Filled 填充前后的事件, PreExecute, Executed 执行任何操作前后的事件, PreCustom, Customed 执行自定义操作前后的事件, 参数 e 包含 command 属性表示自定义操作的名称, PreSubStep, SubStepped 执行分布操作前后的事件, 参数 e 包含 count 属性表示总的条数, completed 属性表示已经处理完成的行数.
Navigable 当导航可用性变化时, 参数 e 包含 prev 属性表示是否有上一页, next 属性表示是否有下一页. Blocked 当有操作被阻塞时的事件.

客户端方法

此项由于篇幅原因无法全部列出, 如有需要请参考: http://code.google.com/p/zsharedcode/wiki/JQueryElementRepeaterDoc.

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

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

欢迎访问 panzer 开源项目, http://zsharedcode.googlecode.com/ , 其中包含了 IEBrowser 控制 WebBrowser 执行各种 js 和 jQuery 脚本以及录制功能 和 jQueryUI 的 Asp.net 控件 JQueryElement.
Javascript 相关文章推荐
js鼠标左右键 键盘值小结
Jun 11 Javascript
基于jquery的一行代码轻松实现拖动效果
Dec 28 Javascript
jQuery ajax应用总结
Jun 02 Javascript
javascript insertAfter()定义与用法示例
Jul 25 Javascript
AngularJS教程 ng-style 指令简单示例
Aug 03 Javascript
JS取数字小数点后两位或n位的简单方法
Oct 24 Javascript
JS检测数组类型的方法小结
Mar 14 Javascript
node.js自动上传ftp的脚本分享
Jun 16 Javascript
js中怎么判断两个字符串相等的实例
Jan 17 Javascript
Vue的transition-group与Virtual Dom Diff算法的使用
Dec 09 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
Jul 22 Javascript
echarts柱状图背景重叠组合而非并列的实现代码
Dec 10 Javascript
jquer之ajaxQueue简单实现代码
Sep 15 #Javascript
js substr、substring和slice使用说明小记
Sep 15 #Javascript
javascript 闭包
Sep 15 #Javascript
用JQuery模仿淘宝的图片放大镜显示效果
Sep 15 #Javascript
document.getElementById介绍
Sep 13 #Javascript
动态创建样式表在各浏览器中的差异测试代码
Sep 13 #Javascript
contains和compareDocumentPosition 方法来确定是否HTML节点间的关系
Sep 13 #Javascript
You might like
谈谈PHP语法(2)
2006/10/09 PHP
php格式化日期实例分析
2014/11/12 PHP
我整理的PHP 7.0主要新特性
2016/01/07 PHP
javascript背投广告代码的完善
2008/04/08 Javascript
使用JS CSS去除IE链接虚线框的三种方法
2013/11/14 Javascript
NODE.JS加密模块CRYPTO常用方法介绍
2014/06/05 Javascript
node.js中的fs.fchmod方法使用说明
2014/12/16 Javascript
js实现具有高亮显示效果的多级菜单代码
2015/09/01 Javascript
js实现图片放大和拖拽特效代码分享
2015/09/05 Javascript
AngularJs concepts详解及示例代码
2016/09/01 Javascript
原生js仿jquery实现对Ajax的封装
2016/10/04 Javascript
简单实现JS倒计时效果
2016/12/23 Javascript
JavaScript中无法通过div.style.left获取值的解决方法
2017/02/19 Javascript
微信小程序 设置启动页面的两种方法
2017/03/09 Javascript
vue 使用Jade模板写html,stylus写css的方法
2018/02/23 Javascript
[50:58]2018DOTA2亚洲邀请赛 4.1 小组赛 B组 Mineski vs EG
2018/04/03 DOTA
[02:12]2019完美世界全国高校联赛(春季赛)报名开启
2019/03/01 DOTA
在arcgis使用python脚本进行字段计算时是如何解决中文问题的
2015/10/18 Python
详解 Python 读写XML文件的实例
2017/08/02 Python
Python实现数据可视化看如何监控你的爬虫状态【推荐】
2018/08/10 Python
Python函数返回不定数量的值方法
2019/01/22 Python
手把手教你pycharm专业版安装破解教程(linux版)
2019/09/26 Python
Django中使用MySQL5.5的教程
2019/12/18 Python
python能做哪方面的工作
2020/06/15 Python
C++:memset ,memcpy和strcpy的根本区别
2013/04/27 面试题
生物技术研究生自荐信
2013/11/12 职场文书
入党积极分子自我鉴定范文
2014/03/25 职场文书
《桥》教学反思
2014/04/09 职场文书
关于运动会的口号
2014/06/07 职场文书
如何签定毕业生就业协议书
2014/09/28 职场文书
诉讼代理人授权委托书
2014/10/11 职场文书
考试没考好检讨书(精选篇)
2014/11/16 职场文书
2015年信息宣传工作总结
2015/05/26 职场文书
暑期辅导班宣传单
2015/07/14 职场文书
Arthas排查Kubernetes中应用频繁挂掉重启异常
2022/02/28 MySQL
Go 内联优化让程序员爱不释手
2022/06/21 Golang