使用 jQuery Repeater 将多行电子邮件标记为垃圾邮件并显示进度

原始文章可以在这里找到。

简介/目录

由于时间有限，无法保证多篇博文的同步。您可以在以下地址查看最新内容，敬请谅解

• http://zoyobar.blogspot.com/2011/12/using-jquery-repeater-to-mark-multi.html

请在下载 jQueryElement的 JQueryElement 演示下载部分下载示例代码，目录是 /repeater/Default.aspx。

本文将详细解释如何在 Repeater 控件中对多行执行操作并显示进度； 目录如下

• 准备
• MultipleSelect 属性
• toggleselect 方法
• selectall 方法
• 对多行执行操作
• 获取进度

准备

请查看 30 分钟掌握 ASP.NET jQuery Repeater中的准备部分。

MultipleSelect 属性

属性 MultipleSelect 指示您是否可以在 Repeater 中选择多行，默认为 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，您可以选择多行。

此外，您可以调用方法 select 和 unselect 来选择或取消选择一行。

selectall 方法

通常，我们将在页脚模板中添加 select all 按钮

<FooterTemplate>
 <tfoot>
 <tr>
  <td colspan="4">
  <a href="#" je-onclick="selectall">Select all</a>
  <a href="#" je-onclick="unselectall">Unselect all</a>
  <a href="#" je-onclick="toggleselectall">Toggle all</a>
  </td>
 </tr>
 </tfoot>
</FooterTemplate>

将 je-onclick 设置为 selectall，当您单击此链接时，所有行都将被选中。

此外，您还可以将 je-onclick 设置为 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'">Mark spam</a>
  <a href="#" je-onclick="customselected,'unspam'">Not spam</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;

 // Return 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',
   'Completed ' + e.substep.completed);
 }
 " SubStepped="
 function(pe, e){
  pb.hide();
 }
 ">
</je:Repeater>

在 SubStepping 中，参数 e 具有一个名为 substep 的属性，substep 的 count 属性表示总行数，completed 属性表示已完成的行数。 此外，通过 repeater 的 showtip 方法，我们显示进度消息。 关于如何显示消息，您可以参考在 jQuery Repeater 中验证或更新时显示消息。

PreSubStep 是启动前的事件，SubStepped 是操作结束后的事件。