使用 jQuery Repeater 设置多行邮件为垃圾邮件并显示进度

又是很久不见了, 其实上周就做好了这个显示多行操作进度的例子, 只不过没有时间来整理, 今天就发给大家.

由于精力有限, 不能在多个博客中保证文章的同步, 可在如下地址查看最新内容, 请谅解:

http://code.google.com/p/zsharedcode/wiki/JERepeaterMulti

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

本文将详细的讲解如何在 Repeater 中进行多行操作和显示进度, 目录如下:

  * 准备

  * 设置 MultipleSelect 属性

  * 调用 toggleselect 函数

  * 调用 selectall 函数

  * 对多个行操作

  * 获取进度

准备

请先查看 30 分钟掌握无刷新 Repeater 或者准备一节的内容.

设置 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 方法, 显示了进度的消息. 关于如何显示消息, 可以参考 在 jQuery Repeater 进行验证更新等操作时提示消息.

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

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

实际过程演示: http://www.tudou.com/programs/view/ONIARMEopOE/, 建议全屏观看.