在 jQuery Repeater 中检索过滤数据

在很多时候, 我们都会用到搜索的功能, 这次将向大家介绍 Repeater 如何设置检索数据.

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

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

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

本文将详细的讲解如何在 Repeater 中检索数据信息, 目录如下:

  * 准备

  * 设置 FilterTemplate

  * 设置 FilterField 和 FilterFieldDefault

  * 调用 setfilter 和 filter 函数

准备

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

设置 FilterTemplate

在 Repeater 的 FilterTemplate 属性中, 包含用于填写搜索条件的元素, 比如文本框, 日期框等. 此外, 也可以包含搜索按钮:

<je:Repeater ID="productList" runat="server"        ...    >

    <FilterTemplate>
        <tr>
            <td>
                <input type="text" size="10"
                    je-id="productname"
                    je-value="productname"/>
            </td>
            <td>
                <input type="text" size="5"
                    je-id="model"
                    je-value="model"/>
            </td>
            <td>
                <input type="text" size="4"
                    je-id="price1"
                    je-value="price1"/>
                -
                <input type="text" size="4"
                    je-id="price2"
                    je-value="price2"/>
            </td>
            <td>
                <input type="text" size="3"
                    je-id="amount"
                    je-value="amount"/>
            </td>
            <td>
                <input type="text" size="10"
je-datepicker="dateFormat='yy-mm-dd';changeMonth=true;changeYear=true"
                    je-id="manufactureDate1"
                    je-value="manufactureDate1"/>
                -
                <input
je-datepicker="dateFormat='yy-mm-dd';changeMonth=true;changeYear=true"
                    type="text" size="10"
                    je-id="manufactureDate2"
                    je-value="manufactureDate2"/>
            </td>
        </tr>
        <tr je-class="{highlight}">
            <td colspan="5" align="right">
                <span je-button=";" onclick="javascript:clearCondition();">清空</span>
                <span je-button=";" je-onclick="filter">搜索</span>
            </td>
        </tr>
    </FilterTemplate>

</je:Repeater>

代码中, 使用了 input 元素来添加文本框和日期框, 通过 je-id 来与 FilterField 属性中的搜索字段关联, je-value 则是表示使用指定搜索条件来初始化.

上面还使用了 je-datepicker 创建日期框, 至于如何使用 je-<jQueryUI 插件名> 创建更多 jQueryUI 插件, 可以参考 在 jquery repeater 中添加设置日期,下拉,复选框等控件.

通过 je-button 和 je-onclick, 创建了用于搜索的按钮, je-onclick 被指定为 filter, 也就是将执行 repeater 的 filter 方法, 可以参考 30 分钟掌握无刷新 Repeater 的特殊绑定一节.

设置 FilterField 和 FilterFieldDefault

在 FilterField 中设置的字段名, 将作为参数传递给服务器端的方法:

<je:Repeater ID="productList" runat="server"
    FilterField="['productname','price1','price2']"
    FilterFieldDefault="['',-1,-1]"
    FillAsync-Url="product.asmx"
    FillAsync-MethodName="GetProductList">

    <FilterTemplate>
        <tr>
            <td>
                <input type="text" size="10"
                    je-id="productname" je-value="productname"/>
            </td>

            <td>
                <input type="text" size="4"
                    je-id="price1" je-value="price1"/>
                -
                <input type="text" size="4"
                    je-id="price2" je-value="price2"/>
            </td>

        </tr>
    </FilterTemplate>

</je:Repeater>

代码中, 通过 FilterField 设置了 3 个用于搜索的字段 productname, price1, price2, 并通过 FilterFieldDefault 来设置这些搜索条件的默认值, 因此服务器端方法 GetProductList 可以采用如下的形式:

public SortedDictionary<string, object> GetProductList (
    int pageindex, int pagesize,
    string productname, float price1, float price2 )
{

        if ( price1 != -1 )
            ...

        if ( price2 != -1 )
            ...

}

如果 price1 和 price2 等于 -1, 则表示用户没有设置关于价格的搜索条件. 至于服务器端返回数据的格式, 请参考 30 分钟掌握无刷新 Repeater 的请求/返回数据的格式一节.

调用 setfilter 和 filter 函数

经过上面简单的设置, 已经可以通过 FilterTemplate 中的搜索按钮来检索数据, 此外, 还可以使用另一个方法:

<input id="myproductname" type="text" size="10"/>

<je:Button ID="cmdSearch" runat="server" Label="搜索 2" Click="
function(){
    productList.__repeater('setfilter', 'productname', $('#myproductname').val());
    productList.__repeater('filter');
}
">
</je:Button>

上面的示例中, id 为 myproductname 的文本框用来输入搜索的产品名称, 而在按钮的 Click 事件中, 调用 repeater 的 setfilter 方法来将 myproductname 中的值设置到 repeater 的过滤条件中, 调用 filter 方法来检索数据.

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

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