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

327人浏览 / 0人评论

如果, 有不明白的问题, 请先阅读 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 中添加 value="#{}" 来设置文本框的值, 而使用 je-id="" 可以让 repeater 在更新或新建行时, 知道该文本框的值对应了该字段.
下拉框
下拉框可用于一些枚举值的编辑, 限制字段只能在指定的值中选择.

复制代码代码如下:

<br>多行文本框直接将字段绑定为 textarea 的内容. <br>复选框 <br>复选框经常会用于编辑布尔类型的字段, 比如: <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="27324" class="copybut" id="copybut27324" .="doCopy('code27324')"><u>复制代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code27324"> <br><input je-id="" type="checkbox" <br>je-checked="<布尔值, 可以是绑定字段或者一个表达式>" /> <br><je:Repeater ID="pictureRepeater" runat="server" <br>... > <br> <br> <br> <br> <br>
</div> <br>上面的代码中, input 元素中设置 type 为 checkbox, 并通过 je-checked 绑定了布尔类型的 sex 字段. sex 为 true, 则复选框处于选中的状态. <br>jQueryUI 插件 <br>在模板中使用 je-="=;" 的语法来创建 jQueryUI 插件, 其中的属性名和属性值可以参考 http://jqueryui.com. <br>jQueryUI 日期框 <br>日期框用于绑定编辑日期类型的字段: <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="66845" class="copybut" id="copybut66845" .="doCopy('code66845')"><u>复制代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code66845"> <br><input je-id="" je-datepicker="=;" <br>type="text" value="<日期值>" /> <br><je:Repeater ID="pictureRepeater" runat="server" <br>... > <br> <br><input je-id="birthday" je-datepicker="dateFormat='yy-mm-dd'" <br>type="text" <br>value="#{birthday,jQuery.panzer.formatDate(#,'yyyy-MM-dd')}" /> <br> <br> <br>
</div> <br>代码中 dateFormat 属性设置了日期框的日期格式, 可以设置更多的属性, 多个属性使用 ; 号分隔即可. 日期框的值绑定为字段 birthday, 不过日期使用了 jQuery.panzer.formatDate 函数来格式化日期的输出, 而这里的格式化形式类似于 .NET. <br>jQueryUI 按钮 <br>按钮通常用于执行一些命令: <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="48282" class="copybut" id="copybut48282" .="doCopy('code48282')"><u>复制代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code48282"> <br><span je-button="=;" je-onclick="<行为名>"></span> <br><je:Repeater ID="pictureRepeater" runat="server" <br>... > <br><span je-button="label='保存';" je-.="update"></span> <br> <br>
</div> <br>可以使用 span 元素来作为按钮, 也可以使用 input 元素. 在属性中 label 作为按钮的文本, 也可以将文本直接作为 span 元素的内容. 而常用的行为有 beginedit, endedit, update, insert, remove, next, prev, goto. <br>分别对应了 开始编辑, 取消编辑, 更新, 新建, 删除, 下一页, 上一页, 跳转行为. <br>jQueryUI 自动匹配 <br>jQueryUI 的 autocomplete 插件可以在用户输入文字时, 自动匹配到相应的条目: <br><div class="codetitle">
<span><a style="CURSOR: pointer" data="30528" class="copybut" id="copybut30528" .="doCopy('code30528')"><u>复制代码</u></a></span> 代码如下:</div>
<div class="codebody" id="code30528"> <br><input je-id="" je-autocomplete="=;" <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> <br>
</div> <br>autocomplete 的 source 属性为用于匹配的条目的数组. <br><p style="PADDING-LEFT: 30px"><span style="FONT-SIZE: 13px"><span style="FONT-SIZE: 13px"><strong>JQueryElement </strong>是开源共享的代码, 可以在 <a href="http://code.google.com/p/zsharedcode/wiki/Download">http://code.google.com/p/zsharedcode/wiki/Download</a> 页面下载 dll 或者是源代码.</span></span></p>
<p style="PADDING-LEFT: 30px"><span style="FONT-SIZE: 13px"><strong>实际过程演示:</strong> <a href="http://www.tudou.com/programs/view/jiuV1nkeWNo/">http://www.tudou.com/programs/view/jiuV1nkeWNo/</a>, 建议全屏观看.</span></p>
<div id="MySignature">欢迎访问 panzer 开源项目, http://zsharedcode.googlecode.com/ , 其中包含了 IEBrowser 控制 WebBrowser 执行各种 js 和 jQuery 脚本以及录制功能 和 jQueryUI 的 Asp.net 控件 JQueryElement.</div>

if ($ != jQuery) {
	$ = jQuery.noConflict();
}
var isLogined = false;
var cb_blogId = 83668;
var cb_entryId = 2222368;
var cb_blogApp = "zoyobar";
var cb_blogUserGuid = "33b6fe82-de38-e011-ac81-842b2b196315";
var cb_entryCreatedDate = '2011/10/24 11:36:00';
<div class="art_xg">
您可能感兴趣的文章:
<ul>
<li><a href="/article/7071.htm" title="datePicker――日期选择控件（with jquery）" target="_blank">datePicker――日期选择控件（with jquery）</a></li>
<li><a href="/article/20625.htm" title="基于jQuery的日期选择控件" target="_blank">基于jQuery的日期选择控件</a></li>
<li><a href="/article/28907.htm" title="基于jquery的web页面日期格式化插件" target="_blank">基于jquery的web页面日期格式化插件</a></li>
<li><a href="/article/42932.htm" title="jquery 日期控件datepicker属性详细解析" target="_blank">jquery 日期控件datepicker属性详细解析</a></li>
<li><a href="/article/49731.htm" title="JQuery EasyUI 日期控件如何控制日期选择区间" target="_blank">JQuery EasyUI 日期控件如何控制日期选择区间</a></li>
<li><a href="/article/62080.htm" title="jQuery实现简单的日期输入格式化控件" target="_blank">jQuery实现简单的日期输入格式化控件</a></li>
</ul>
</div>
<div class="clearfix">
<span id="art_bot" class="jbTestPos"></span>
</div>
                </div>
            </div>

<div class="recommend-panel">
                <h4 class="right-card-title">相关文章</h4>
                <div class="card-deck">
                    <div class="card ll-panel">
                        <a class="recommend-panel-link" href="/article/100387.html">
                            <div class="recommend-panel-top">
                                <img src="/theme/calmly/static/temporary-img/list-image1.jpg" class="img-fluid" alt="">
                            </div>
                            <div class="recommend-panel-bottom">
                                如何有效避免设计作品“空”？
                            </div>
                        </a>
                    </div>
                    <div class="card ll-panel">
                        <a class="recommend-panel-link" href="/article/100387.html">
                            <div class="recommend-panel-top">
                                <img src="/theme/calmly/static/temporary-img/list-image2.jpg" class="img-fluid" alt="">
                            </div>
                            <div class="recommend-panel-bottom">
                                高点击率钻展，设计环节…
                            </div>
                        </a>
                    </div>
                    <div class="card ll-panel">
                        <a class="recommend-panel-link" href="/article/100387.html">
                            <div class="recommend-panel-top">
                                <img src="/theme/calmly/static/temporary-img/list-image3.jpg" class="img-fluid" alt="">
                            </div>
                            <div class="recommend-panel-bottom">
                                无敌配色技巧（一）
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <div class="comment">

全部评论

晴天下起了小雨

2017-10-01 18:00

很喜欢，果断关注了

wjmyly7336064

2017-10-01 18:00

相当实用，赞美了

橘大佬

2017-10-01 18:00

就是有些细节再到位点就好了…

微信公众号

关注微信公众号获取更多VSCode编程信息，定时发布干货文章