JQueryElement 更新到了 3.5.1, 今天给大家主要讲下如何在 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 创建日期框, 自动匹配.
<je:repeater id="pictureRepeater" runat="server"
… >
通过在 input 中添加 value=”#{}” 来设置文本框的值, 而使用 je-id=”” 可以让 repeater 在更新或新建行时, 知道该文本框的值对应了该字段.
下拉框
下拉框可用于一些枚举值的编辑, 限制字段只能在指定的值中选择.
<option value="” je-selected=””>
<option value="” je-selected=””>
<je:repeater id="pictureRepeater" runat="server"
… >
男
女
计算机
工商管理
汉语
和文本框一样, 下拉框同样通过 je-id 绑定字段名, 在每一个 option 中通过 value 属性设置枚举值, 使用 je-selected 来设置一个返回布尔值的表达式, 如果表达式返回 true, 则该选项处于选中状态.
在上面的代码中, 由于 sex 字段是布尔类型的, 所以可以使用 #{sex} 这样的形式, #{sex,!#} 则是取 sex 字段的反. 也可以像这样 #{major,# == ‘jsj’}, 表示 major 字段为 ‘jsj’ 则选项处于选中状态. 还可以使用 ‘#{major}’ == ‘jsj’ 来完成同样的效果, 但这里的 #{major} 需要用单引号括住.
多行文本框
多行文本框和上面所说的文本框不同的是, 多行文本框使用 textarea 元素.
<textarea je-id="”>
多行文本框直接将字段绑定为 textarea 的内容.
复选框
复选框经常会用于编辑布尔类型的字段, 比如:
je-checked=”” />
<je:repeater id="pictureRepeater" runat="server"
… >
上面的代码中, input 元素中设置 type 为 checkbox, 并通过 je-checked 绑定了布尔类型的 sex 字段. sex 为 true, 则复选框处于选中的状态.
jQueryUI 插件
在模板中使用 je-=”=;” 的语法来创建 jQueryUI 插件, 其中的属性名和属性值可以参考 http://jqueryui.com.
jQueryUI 日期框
日期框用于绑定编辑日期类型的字段:
type=”text” value=”” />
<je:repeater id="pictureRepeater" runat="server"
… >
<input je-id="birthday" je-datepicker="dateFormat='yy-mm-dd'"
type=”text”
value=”#{birthday,jQuery.panzer.formatDate(#,’yyyy-MM-dd’)}” />
代码中 dateFormat 属性设置了日期框的日期格式, 可以设置更多的属性, 多个属性使用 ; 号分隔即可. 日期框的值绑定为字段 birthday, 不过日期使用了 jQuery.panzer.formatDate 函数来格式化日期的输出, 而这里的格式化形式类似于 .NET.
jQueryUI 按钮
按钮通常用于执行一些命令:
<je:repeater id="pictureRepeater" runat="server"
… >
可以使用 span 元素来作为按钮, 也可以使用 input 元素. 在属性中 label 作为按钮的文本, 也可以将文本直接作为 span 元素的内容. 而常用的行为有 beginedit, endedit, update, insert, remove, next, prev, goto.
分别对应了 开始编辑, 取消编辑, 更新, 新建, 删除, 下一页, 上一页, 跳转行为.
jQueryUI 自动匹配
jQueryUI 的 autocomplete 插件可以在用户输入文字时, 自动匹配到相应的条目:
value=”” />
<je:repeater id="pictureRepeater" runat="server"
… >
<input je-id="major" je-autocomplete="source=['jsj','gsgl','hy']"
value=”#{major}” />
autocomplete 的 source 属性为用于匹配的条目的数组.
JQueryElement 是开源共享的代码, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 页面下载 dll 或者是源代码.
实际过程演示: http://www.tudou.com/programs/view/jiuV1nkeWNo/, 建议全屏观看.
- datePicker――日期选择控件（with jquery）
- 基于jQuery的日期选择控件
- 基于jquery的web页面日期格式化插件
- jquery 日期控件datepicker属性详细解析
- JQuery EasyUI 日期控件如何控制日期选择区间
- jQuery实现简单的日期输入格式化控件
相关文章
-
asp.net用url重写URLReWriter实现任意二级域名 高级篇
Asp.net 用url重写(URLReWriter)实现任意二级域名，需要的朋友可以参考下，建议先看一下上一篇文章。2009-11-11
-
Winform控件SaveFileDialog用于保存文件
这篇文章主要为大家详细介绍了Winform SaveFileDialog保存文件对话框的相关资料，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-03-03
-
asp.net生成缩略图实现代码
此文件imgSmall.ashx专门用来生成图片的缩略图,可以减少服务器压力,降低网络流量,初学者必备2011-11-11
-
asp.net(c#)捕捉搜索引擎蜘蛛和机器人
结合这个你就可以写一个蜘蛛访问记录了，如何判断正常用户或者蜘蛛？可以粗略的这样来判断：通过判断用户的访问来源页面2008-08-08
-
基于asp.net下使用jquery实现ajax的解决方法
本文以最简单的方法为新手示范如何使用jquery实现ajax技术（所以本文是专为新手所写，老鸟勿喷，大神此处省略一万字）。至于什么是jquery什么是ajax，自己谷歌去2013-05-05
-
不可或缺的ASP.NET内置对象小结
这篇文章主要介绍了不可或缺的ASP.NET内置对象小结，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧2020-04-04
-
.net core2.0下使用Identity改用dapper存储数据(实例讲解)
下面小编就为大家分享一篇.net core2.0下使用Identity改用dapper存储数据的实例讲解，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧2017-11-11
-
.NET RulesEngine（规则引擎）的使用详解
来源gaodai.ma#com搞#代!码网这篇文章主要介绍了.NET RulesEngine（规则引擎）的使用详解，帮助大家更好的理解和学习使用.net技术，感兴趣的朋友可以了解下
2021-05-05
-
asp.net中ADO SQL数据库 笔记汇总 持续更新中
asp.net中ADO SQL数据库 笔记汇总 持续更新中，需要的朋友可以参考下2012-07-07
-
asp.net下检测SQL注入式攻击代码
防网站被攻击代码2009-09-09
最新评论