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

简介:

本文将详细的讲解如何在 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/










本文转自 wws5201985 51CTO博客,原文链接:http://blog.51cto.com/wws5201985/735610,如需转载请自行联系原作者
目录
相关文章
|
2月前
|
JavaScript
jquery给轮播图的第一张设置class样式
jquery给轮播图的第一张设置class样式
10 0
|
4月前
|
JavaScript 索引
jquery操作select(取值,设置选中)
jquery操作select(取值,设置选中)
|
5月前
|
JavaScript
jQuery中如何来获取和设置属性?
jQuery中如何来获取和设置属性?
30 0
|
6月前
|
JavaScript
jquery给元素设置属性
jquery给元素设置属性
|
6月前
|
JavaScript
jQuery 设置内容和属性
jQuery 设置内容和属性
|
8月前
|
JavaScript
jQuery val(); input 获取与设置默认输入内容
jQuery val(); input 获取与设置默认输入内容
43 0
|
9月前
|
JavaScript 索引
jquery 获取或设置radio单选框选中值的方法
jquery 获取或设置radio单选框选中值的方法
470 0
|
JavaScript
jQuery 设置
jQuery 设置
65 0
|
JavaScript
jquery给轮播图的第一张设置class样式
jquery给轮播图的第一张设置class样式
86 0
|
JavaScript
怎么设置jQuery中的事件和动画
怎么设置jQuery中的事件和动画