示例代码下载:
2011-9-22 更新部分内容
2011-10-9 更新的部分内容, 详情请参考
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 示例图片:
准备
请确保已经在 中下载 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 的脚本和样式, 在 下载的压缩包中包含了一个自定义样式的 jQueryUI, 如果需要更多样式, 可以在 下载:
复制代码 代码如下:
<link type="text/css" href="https://www.jb51.net/[样式路径]/jquery-ui-1.8.15.custom.css" />
<script type="text/javascript" src="https://www.jb51.net/[脚本路径]/jquery-1.6.2.min.js"></script>
<script type="text/javascript" src="https://www.jb51.net/[脚本路径]/jquery-ui-1.8.15.custom.min.js"></script>
<script type="text/javascript" src="https://www.jb51.net/[脚本路径]/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 表达式, 它将作为一个选择器, 写法可以参照 , 选择器对应的元素将作为页面上最终的 repeater 来呈现, 示例:
复制代码 代码如下: