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

如果, 有不明白的问题, 请先阅读 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 创建日期框, 自动匹配.
代码如下:

<br><input je-id="<字段名>" type="text" value="<绑定字段>"> <br><je:Repeater ID="pictureRepeater" runat="server" <br>... > <br><EditItemTemplate> <br><input je-id="realname" type="text" value="#{realname}" /> <br></EditItemTemplate> <br></je:Repeater> <br> <br>通过在 input 中添加 value="#{<绑定字段>}" 来设置文本框的值, 而使用 je-id="<字段名>" 可以让 repeater 在更新或新建行时, 知道该文本框的值对应了该字段. <br>下拉框 <br>下拉框可用于一些枚举值的编辑, 限制字段只能在指定的值中选择. <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br><select je-id="<字段名>"> <br><option value="<枚举值1>" je-selected="<布尔值1, 可以是绑定字段或者一个表达式>"> <br><显示值1> <br></option> <br><option value="<枚举值2>" je-selected="<布尔值2, 可以是绑定字段或者一个表达式>"> <br><显示值2> <br></option> <br></select> <br><je:Repeater ID="pictureRepeater" runat="server" <br>... > <br><EditItemTemplate> <br><select je-id="sex"> <br><option value="true" je-selected="#{sex}">男</option> <br><option value="false" je-selected="#{sex,!#}">女</option> <br></select> <br><select je-id="major"> <br><option value="jsj" je-selected="'#{major}' == 'jsj'"> <br>计算机 <br></option> <br><option value="gsgl" je-selected="'#{major}' == 'gsgl'"> <br>工商管理 <br></option> <br><option value="hy" je-selected="'#{major}' == 'hy'"> <br>汉语 <br></option> <br></select> <br></EditItemTemplate> <br></je:Repeater> <br> <br>和文本框一样, 下拉框同样通过 je-id 绑定字段名, 在每一个 option 中通过 value 属性设置枚举值, 使用 je-selected 来设置一个返回布尔值的表达式, 如果表达式返回 true, 则该选项处于选中状态. <br>在上面的代码中, 由于 sex 字段是布尔类型的, 所以可以使用 #{sex} 这样的形式, #{sex,!#} 则是取 sex 字段的反. 也可以像这样 #{major,# == 'jsj'}, 表示 major 字段为 'jsj' 则选项处于选中状态. 还可以使用 '#{major}' == 'jsj' 来完成同样的效果, 但这里的 #{major} 需要用单引号括住. <br>多行文本框 <br>多行文本框和上面所说的文本框不同的是, 多行文本框使用 textarea 元素. <br><textarea je-id="<字段名>"><绑定字段></textarea> <br>多行文本框直接将字段绑定为 textarea 的内容. <br>复选框 <br>复选框经常会用于编辑布尔类型的字段, 比如: <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br><input je-id="<字段名>" type="checkbox" <br>je-checked="<布尔值, 可以是绑定字段或者一个表达式>" /> <br><je:Repeater ID="pictureRepeater" runat="server" <br>... > <br><EditItemTemplate> <br><input je-id="sex" type="checkbox" je-checked="#{sex}" /> <br></EditItemTemplate> <br></je:Repeater> <br> <br>上面的代码中, input 元素中设置 type 为 checkbox, 并通过 je-checked 绑定了布尔类型的 sex 字段. sex 为 true, 则复选框处于选中的状态. <br>jQueryUI 插件 <br>在模板中使用 je-<jQueryUI 插件名>="<属性名n>=<属性值n>;" 的语法来创建 jQueryUI 插件, 其中的属性名和属性值可以参考 http://jqueryui.com. <br>jQueryUI 日期框 <br>日期框用于绑定编辑日期类型的字段: <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br><input je-id="<字段名>" je-datepicker="<属性名n>=<属性值n>;" <br>type="text" value="<日期值>" /> <br><je:Repeater ID="pictureRepeater" runat="server" <br>... > <br><EditItemTemplate> <br><input je-id="birthday" je-datepicker="dateFormat='yy-mm-dd'" <br>type="text" <br>value="#{birthday,jQuery.panzer.formatDate(#,'yyyy-MM-dd')}" /> <br></EditItemTemplate> <br></je:Repeater> <br> <br>代码中 dateFormat 属性设置了日期框的日期格式, 可以设置更多的属性, 多个属性使用 ; 号分隔即可. 日期框的值绑定为字段 birthday, 不过日期使用了 jQuery.panzer.formatDate 函数来格式化日期的</li></ol></pre>输出, 而这里的格式化形式类似于 .NET. <br>jQueryUI 按钮 <br>按钮通常用于执行一些命令: <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br><span je-button="<属性名n>=<属性值n>;" je-onclick="<行为名>"></span> <br><je:Repeater ID="pictureRepeater" runat="server" <br>... > <br><span je-button="label='保存';" je-onclick="update"></span> <br></je:Repeater> <br> <br>可以使用 span 元素来作为按钮, 也可以使用 input 元素. 在属性中 label 作为按钮的文本, 也可以将文本直接作为 span 元素的内容. 而常用的行为有 beginedit, endedit, update, insert, remove, next, prev, goto. <br>分别对应了 开始编辑, 取消编辑, 更新, 新建, 删除, 下一页, 上一页, 跳转行为. <br>jQueryUI 自动匹配 <br>jQueryUI 的 autocomplete 插件可以在用户输入文字时, 自动匹配到相应的条目: <br><span><u></u></span> 代码如下:<pre class="brush:php;toolbar:false layui-box layui-code-view layui-code-notepad"><ol class="layui-code-ol"><li><br><input je-id="<字段名>" je-autocomplete="<属性名n>=<属性值n>;" <br>value="<当前值>" /> <br><je:Repeater ID="pictureRepeater" runat="server" <br>... > <br><input je-id="major" je-autocomplete="source=['jsj','gsgl','hy']" <br>value="#{major}" /> <br></je:Repeater> <br> <br>autocomplete 的 source 属性为用于匹配的条目的数组. <br></li><li><p style="PADDING-LEFT: 30px"><span style="FONT-SIZE: 13px"><span style="FONT-SIZE: 13px"><strong>JQueryElement </strong>是开源共享的代码, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 页面下载 dll 或者是源代码.</span></span></p></li><li><p style="PADDING-LEFT: 30px"><span style="FONT-SIZE: 13px"><strong>实际过程演示:</strong> http://www.tudou.com/programs/view/jiuV1nkeWNo/, 建议全屏观看.</span></p></li><li>欢迎访问 panzer 开源项目, http://zsharedcode.googlecode.com/ , 其中包含了 IEBrowser 控制 WebBrowser 执行各种 js 和 jQuery 脚本以及录制功能 和 jQueryUI 的 Asp.net 控件 JQueryElement.</li><li>            </li><li>                                </li></ol></pre></li></ol></pre></li></ol></pre></li></ol></pre>