在处理很多行数据的时候, 我们也许希望能够显示处理的进度, 在 JQueryElement 3.2 版本中, Repeater 即实现了这一功能.相对于前一 3.1.2 版本, Repeater 修改了模板中绑定的语法, 使模板更加的清晰明了, 恢复了去除的 Field 属性, 以为空数据时的新建操作提供依据.本次的例子仍然是在前几个示例的基础上修改, 如果大家有不明白的可以参考, Repeater 无刷新获取分页数据, Repeater 无刷新删除 新建 更新数据, Repeater 以不同色彩显示各种状态的行.我们还是直接来看代码, 下面是 Repeater 的行模板:

1 
2     

3         

4             #{id}

5                 #{realname}
#{age}
#{skill}
6         

  

7     
8 

在 ItemTemplate 行模板中我们看到新的绑定方式: #{}, 标签属性绑定方式: je-="". 其中 je-checked="selected" 表示根据当前行是否选中生成对应的 checked 属性. je-onclick="toggleselect" 表示点击检查框切换行的选中状态. 而模板中其他的代码和原来的没有太大变化.当然, 3.2 中模板语法还有其他的改动, 大家可以下载示例代码或者观看视频.现在, 我们已经可以通过点击检查框来选中某一行, 接下来, 我们来添加一个按钮来进行全选的功能.

1 
4 

在上面的按钮中, 我们为他的 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 

13     
14         
15         序号: 
16         

17         

18         姓名:
19         

20         

21         年龄:
22         

23         

24         特长:
25         

26         

27     
28 

在对话框的内容模板中, 我们有三个文本框来显示和修改学生的信息, 在 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/ , 建议全屏观看.