在处理很多行数据的时候, 我们也许希望能够显示处理的进度, 在 JQueryElement 3.2 版本中, Repeater 即实现了这一功能.

相对于前一 3.1.2 版本, Repeater 修改了模板中绑定的语法, 使模板更加的清晰明了, 恢复了去除的 Field 属性, 以为空数据时的新建操作提供依据.

本次的例子仍然是在前几个示例的基础上修改, 如果大家有不明白的可以参考, , , .

我们还是直接来看代码, 下面是 Repeater 的行模板:

1 
      
        2 
       
         3 
        
 4 #{id}
        
 5                 #{realname}
        
#{age}
        
#{skill}
 6 
        
编辑删除对话框
 7 
       
 8 
      

在 ItemTemplate 行模板中我们看到新的绑定方式: #{<字段名>}, 标签属性绑定方式: je-<标签属性名>="<绑定值>". 其中 je-checked="selected" 表示根据当前行是否选中生成对应的 checked 属性. je-οnclick="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-οnclick="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 是开源共享的代码, 可以在  页面下载 dll 或者是源代码.

目前 JQueryElement 最新版本为 3.2, 可以在上面的地址看到新版本改动的内容.

请到 的 JQueryElement 示例下载一节下载示例代码

实际过程演示:  , 建议全屏观看.