在jquery repeater中添加设置日期,下拉,复选框等控件

2024-09-06 20:04:47

字体：大中小

来源：转载

供稿：网友

如果, 有不明白的问题, 请先阅读 30 分钟掌握无刷新 Repeater.

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

本文将详细的讲解 Repeater 控件的模板中如何处理控件, 目录如下:

* 准备
* html 元素
* 文本框
* 下拉框
* 多行文本框
* 复选框
* jQueryUI 插件
* jQueryUI 日期框
* jQueryUI 按钮
* jQueryUI 自动匹配

示例图片:

准备
请参照 http://code.google.com/p/zsharedcode/wiki/JQueryElementRepeaterDoc 中的准备.
html 元素
可以在模板中使用 html 文本框或者下拉框, 并进行赋值和读取数据.
文本框
文本框可以用于编辑文本字段, 也可以配合 je-datepicker, je-autocomplete 创建日期框, 自动匹配.
代码如下:
<input je-id="<字段名>" type="text" value="<绑定字段>">
<je:Repeater ID="pictureRepeater" runat="server"
... >
<EditItemTemplate>
<input je-id="realname" type="text" value="#{realname}" />
</EditItemTemplate>
</je:Repeater>

通过在 input 中添加 value="#{<绑定字段>}" 来设置文本框的值, 而使用 je-id="<字段名>" 可以让 repeater 在更新或新建行时, 知道该文本框的值对应了该字段.
下拉框
下拉框可用于一些枚举值的编辑, 限制字段只能在指定的值中选择.
代码如下:
<select je-id="<字段名>">
<option value="<枚举值1>" je-selected="<布尔值1, 可以是绑定字段或者一个表达式>">
<显示值1>
</option>
<option value="<枚举值2>" je-selected="<布尔值2, 可以是绑定字段或者一个表达式>">
<显示值2>
</option>
</select>
<je:Repeater ID="pictureRepeater" runat="server"
... >
<EditItemTemplate>
<select je-id="sex">
<option value="true" je-selected="#{sex}">男</option>
<option value="false" je-selected="#{sex,!#}">女</option>
</select>
<select je-id="major">
<option value="jsj" je-selected="'#{major}' == 'jsj'">
计算机
</option>
<option value="gsgl" je-selected="'#{major}' == 'gsgl'">
工商管理
</option>
<option value="hy" je-selected="'#{major}' == 'hy'">
汉语
</option>
</select>
</EditItemTemplate>
</je:Repeater>

和文本框一样, 下拉框同样通过 je-id 绑定字段名, 在每一个 option 中通过 value 属性设置枚举值, 使用 je-selected 来设置一个返回布尔值的表达式, 如果表达式返回 true, 则该选项处于选中状态.
在上面的代码中, 由于 sex 字段是布尔类型的, 所以可以使用 #{sex} 这样的形式, #{sex,!#} 则是取 sex 字段的反. 也可以像这样 #{major,# == 'jsj'}, 表示 major 字段为 'jsj' 则选项处于选中状态. 还可以使用 '#{major}' == 'jsj' 来完成同样的效果, 但这里的 #{major} 需要用单引号括住.

上一篇：巧妙使用JQuery Clone 添加多行数据，并更新到数据库的实现代码

下一篇：JQuery实现Repeater无刷新批量删除(附后台asp.net源码)