经过数个版本的迭代后,
JQueryElement 3.3.0 版本中的 Repeater 基本上已经完善, 这里将分功能的总结讲解一下 Repeater 的使用方法.
示例代码下载: http://zsharedcode.googlecode.com/files/JQueryElementTest.rar
本文中所包含的内容如下:
* 准备 * 主要功能 * 绑定字段 * 绑定属性 * 基本设置 * 设置分页 * 设置字段 * 设置调用的服务端方法 * 请求/返回数据的格式 * 填充/搜索 * 更新 * 删除 * 新建 * 行状态说明 * 排序状态说明 * 设置模板 * ItemTemplate * UpdatedItemTemplate/InsertedItemTemplate * RemovedItemTemplate * EditItemTemplate * FilterTemplate/NewItemTemplate * HeaderTemplate/FooterTemplate/EmptyTemplate * 特殊绑定 * je-id * je-
* je-class * je-checked/selected/readonly * je-value * je- * 事件 * 客户端方法
准备
请确保已经在 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 下载, 例如:
主要功能
绑定字段
在行模板中, 可以使用 #{<字段名>} 的形式来绑定字段, 比如:
#{id} #{realname} #{age}
字段也可以被绑定在标签的属性中, 比如:
#{id} #{realname} #{age}
绑定属性
在所有的模板中都可以绑定属性, 语法为 @{<属性名>}, 比如:
第 @{pageindex}/@{pagecount} 页, @{itemcount} 条
基本设置
Repeater 的 Selector 属性是一个 javascript 表达式, 它将作为一个选择器, 写法可以参照 http://jquery.com, 选择器对应的元素将作为页面上最终的 repeater 来呈现, 示例:
/* ... */
设置 IsVariable 属性为 True, 则将在客户端生成与 ClientID 同名的 javascript 变量, 示例:
由于在此页面中 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, 示例:
/* ... */
/* ... */
如果, 你需要为方法传递更多的参数, 则可以采用下面的形式:
/* ... */
/* ... */
通过添加 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
最新评论