本文将详细的讲解如何在 Repeater 中进行多行操作和显示进度,首先,请到 Download 下载资源 的 JQueryElement 示例下载一节下载示例代码。实现效果如下图所示:

  使用jQuery Repeater设置多行垃圾邮件

  准备

  请先查看 30 分钟掌握无刷新 Repeater (http://www.cnblogs.com/zoyobar/archive/2011/09/14/JE_11.html)或者准备一节的内容.

  设置 MultipleSelect 属性

  Repeater 的 MultipleSelect 属性表示是否可以选中多个行, 默认为 true. 如果设置为 false, 则同时只能有一行处于选中状态.

  调用 toggleselect 函数

  在 Repeater 的行模板中, 将 je-onclick 设置为 toggleselect, 可以为当前行切换选中状态:

< ItemTemplate >
    
< tr >
        
< td >
            
< input type = " checkbox " je - checked = " selected " je - onclick = " toggleselect,false " />
        
</ td >
    
</ tr >
</ ItemTemplate >

   上面的代码中, toggleselect 后跟随了一个布尔类型的参数, 该参数默认为 true, 表示取消前一行的选中状态, 而这里设置为 false, 表示可以选中多个行. 这里并不和 MultipleSelect 属性冲突.

  此外, 也可以对某一行调用 select, unselect 函数, 分别选中, 取消选中一行.

  调用 selectall 函数

  通常, 在尾模板中, 会添加全选按钮:

< FooterTemplate >
    
< tfoot >
    
< tr >
        
< td colspan = " 4 " >
        
< a href = " # " je - onclick = " selectall " > 全选 </ a >
        
< a href = " # " je - onclick = " unselectall " > 全不选 </ a >
        
< a href = " # " je - onclick = " toggleselectall " > 反选 </ a >  
         </ td >
    
</ tr >
    
</ tfoot >
</ FooterTemplate >

   将 je-onclick 设置为 selectall, 则在点击该链接时, 将选中所有的行.

  此外, 也可以设置为 unselectall, toggleselectall, 分别表示取消选中所有的行, 切换所有行的选中状态.

  对多个行操作

  Repeater 支持使用 removeselected 和 customselected 函数来进行多行的操作:

< je:Repeater ID = " emailRepeater " runat = " server " Selector = " '#list' "     CustomAsync - Url = " webservice.asmx "     CustomAsync - MethodName = " CustomEMail "     ...     >
< FooterTemplate >
     < tfoot >
     < tr >
         < td colspan = " 4 " >
         < a href = " # " je - onclick = " customselected,'spam' " > 选中的都是垃圾 </ a >
         < a href = " # " je - onclick = " customselected,'unspam' " > 选中的不是垃圾 </ a >
         </ td >
     </ tr >
     </ tfoot >
</ FooterTemplate >
</ je:Repeater >

   在上面的示例中, 调用了 customselected 来对选中的行来执行自定义操作, 自定义操作的名称是 spam, unspam. 自定义操作将调用 webservice.asmx 的 CustomEMail 方法:

[WebMethod]
[ScriptMethod]
public SortedDictionary < string , object > CustomEMail ( int id, string no, bool isspam, string command )
{
    this.Context.Response.Cache.SetNoStore ( );
     if ( command == " spam " )
    {
        isspam
= true ;
        Thread.Sleep ( 1000 );
    }
    
else if ( command == " unspam " )
    {
        isspam = false ;
        Thread.Sleep (
1000 );
    }
    
else if ( command == " togglespam " )
        isspam
= !isspam;
     // 返回 JSON
}

   在 CustomEMail 方法中, 使用了 Thread 类的 Sleep 方法来延长执行的时间, 这样才可以在页面上看到执行的进度.

  获取进度

  可以将 SubStepping 属性设置为获取进度的 javascript 函数:

< je:Repeater ID = " emailRepeater " runat = " server " Selector = " '#list' " PageSize = " 5 " IsVariable = " true "  
   ...
    CustomAsync - Url = " webservice.asmx "  
   CustomAsync - MethodName = " CustomEMail "
    PreSubStep = "
    function(pe, e){
        pb.progressbar('option', 'value', 0).show();
    } 
    " SubStepping = "
    function(pe, e){
        pb.progressbar('option', 'value', (100 * e.substep.completed / e.substep.count));
        emailRepeater.__repeater('showtip', '完成 ' + e.substep.completed + ' 个');
    }
     " SubStepped = "  
   function(pe, e){
        pb.hide(); 
   }     " >
</ je:Repeater >

   在 SubStepping 中, 参数 e 拥有一个名为 substep 的属性, 而 substep 的 count 属性表示总行数, completed 属性表示已经完成的行数. 此外, 通过 repeater 的 showtip 方法, 显示了进度的消息. 关于如何显示消息, 可以参考 [JERepeaterShowTip Repeater 消息提示].

  PreSubStep 表示多行操作开始之前, SubStepped 表示多行操作结束之后.

  JQueryElement 是开源共享的代码, 可以在 http://code.google.com/p/zsharedcode/wiki/Download 页面下载 dll 或者是源代码.

  实际过程演示: http://www.tudou.com/programs/view/ONIARMEopOE/