jQueryUI Repeater 显示批处理行进度 - JQueryElement [9]
在处理很多行数据的时候, 我们也许希望能够显示处理的进度, 在 JQueryElement 3.2 版本中, Repeater 即实现了这一功能.
相对于前一 3.1.2 版本, Repeater 修改了模板中绑定的语法, 使模板更加的清晰明了, 恢复了去除的 Field 属性, 以为空数据时的新建操作提供依据.
本次的例子仍然是在前几个示例的基础上修改, 如果大家有不明白的可以参考, Repeater 无刷新获取分页数据, Repeater 无刷新删除 新建 更新数据, Repeater 以不同色彩显示各种状态的行.
我们还是直接来看代码, 下面是 Repeater 的行模板:
1 <ItemTemplate>
2 <ul je-class="{state}-item">
3 <li>
4 <input type="checkbox" je-checked="selected" je-onclick="toggleselect"/>#{id}</li><li>
5 #{realname}</li><li>#{age}</li><li>#{skill}</li>
6 <li><a href="#" je-onclick="beginedit">编辑</a><a href="#" je-onclick="remove">删除</a><a href="#" je-onclick="custom,dialog">对话框</a></li>
7 </ul>
8 </ItemTemplate>
在 ItemTemplate 行模板中我们看到新的绑定方式: #{<字段名>}, 标签属性绑定方式: je-<标签属性名>="<绑定值>". 其中 je-checked="selected" 表示根据当前行是否选中生成对应的 checked 属性. je-onclick="toggleselect" 表示点击检查框切换行的选中状态. 而模板中其他的代码和原来的没有太大变化.
当然, 3.2 中模板语法还有其他的改动, 大家可以下载示例代码或者观看视频.
现在, 我们已经可以通过点击检查框来选中某一行, 接下来, 我们来添加一个按钮来进行全选的功能.
1 <je:Button ID="cmdSelectAll" runat="server" ElementType="Span" Label="全选" Click="
2 function(){ studentRepeater.__repeater('selectall'); }
3 ">
4 </je:Button>
在上面的按钮中, 我们为他的 Click 事件编写了脚本, 在脚本中, 我们调用 repeater 的 selectall 方法来选中所有的行, 在选中所有行后, 页面也会刷新, 检查框也会选中.
除了全选, 我们还可以执行 unselectall, toggleselectall, removeselected 方法来不选和反选所有行, 删除选中的行.
最后, 我们为 Repeater 编写 SubStepping 事件, 在事件的 e 参数中, substep 中就包含了进度信息, count 表示需要执行的行数, completed 表示已经执行完毕的行数.
1 SubStepping="
2 function(tag, e){
3 $('#message').text('共 ' + e.substep.count.toString() + ' 个, 完成了 ' + e.substep.completed.toString() + ' 个');
4 }
5 "
这样, 我们在选中一些行之后, 点击删除选中的按钮, 就可以显示删除的进度, 添加删除按钮的过程没有讲述.
在视频中, 我还演示了如何弹出对话框来编辑行, 在这里稍微看下代码.
1 <je:Dialog ID="editDialog" runat="server" IsVariable="true" Title="修改学生信息" AutoOpen="false"
2 Resizable="false" Buttons="
3 {
4 '确定': function(){
5 studentRepeater.__repeater('setrow', new Number($('#edit_index').val()), { realname: $('#edit_name').val(), age: $('#edit_age').val(), skill: $('#edit_skill').val() }, true);
6 studentRepeater.__repeater('update', new Number($('#edit_index').val()));
7 editDialog.dialog('close');
8 },
9 '取消': function(){
10 editDialog.dialog('close');
11 }
12 }">
13 <ContentTemplate>
14 <input id="edit_index" type="hidden"/>
15 序号: <span id="edit_id"></span>
16 <br />
17 <br />
18 姓名:
19 <input id="edit_name" type="text"/><br />
20 <br />
21 年龄:
22 <input id="edit_age" type="text"/><br />
23 <br />
24 特长:
25 <input id="edit_skill" type="text"/><br />
26 <br />
27 </ContentTemplate>
28 </je:Dialog>
在对话框的内容模板中, 我们有三个文本框来显示和修改学生的信息, 在 Dialog 的 Buttons 属性中, 我们为对话框添加两个按钮, 在确定按钮中, 我们首先调用 repeater 的 setrow 方法, 将修改的信息设置到 repeater 中, 然后使用 update 方法更新修改的行, 其中 edit_index 隐藏值保存的是行的索引.
刚才的 ItemTemplate 中, 我们有一个对话框按钮, 并有个一个 je-onclick="custom,dialog" 属性, 他表示在点击时, 我们执行 repeater 的 custom 方法并传递 dialog 作为参数. 这样我们只需要处理 PreCustom 事件将对话框弹出即可, 代码如下:
1 PreCustom="
2 function(tag, e){
3
4 if(e.command == 'dialog'){
5 $('#edit_index').val(e.index);
6
7 $('#edit_id').text(e.row.id);
8 $('#edit_name').val(e.row.realname);
9 $('#edit_age').val(e.row.age);
10 $('#edit_skill').val(e.row.skill);
11 editDialog.dialog('open');
12 return false; }
13 }
14 "
我们判断如果 custom 方法的参数为 dialog, 那么我们将当前行的值传递给对话框中的文本框和隐藏值, 然后显示对话框, 并返回 false, 以停止执行 custom.
这样, 我们就完成了弹出对话框修改行的信息.
3.2版本的改动就给大家说到这里了.
JQueryElement 是开源共享的代码, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 页面下载 dll 或者是源代码.
目前 JQueryElement 最新版本为 3.2, 可以在上面的地址看到新版本改动的内容.
请到 Download 下载资源 的 JQueryElement 示例下载一节下载示例代码
实际过程演示: http://www.tudou.com/programs/view/A8jdVD6HYFY/ , 建议全屏观看.
