jQueryUI Repeater 显示批处理行进度

在处理很多行数据的时候, 我们也许希望能够显示处理的进度, 在 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, 可以在上面的地址看到新版本改动的内容.

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

实际过程演示: http://www.tudou.com/programs/view/A8jdVD6HYFY/ , 建议全屏观看.