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

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

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

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

  * 准备

  * 设置 FilterTemplate

  * 设置 FilterField 和 FilterFieldDefault

  * 调用 setfilter 和 filter 函数

准备

请先查看 或者准备一节的内容.

设置 FilterTemplate

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

      
         
          
          
                        - 
          
          
                        - 
            
       清空 
       搜索   
       
     

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

上面还使用了 je-datepicker 创建日期框, 至于如何使用 je-<jQueryUI 插件名> 创建更多 jQueryUI 插件, 可以参考 .

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

设置 FilterField 和 FilterFieldDefault

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

      
         
          
                        - 
          
       
     

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

public SortedDictionary
     
       GetProductList ( int pageindex, int pagesize, string productname, float price1, float price2 ) {
   if ( price1 != -1 )             ... if ( price2 != -1 )             ... }
     

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

调用 setfilter 和 filter 函数

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

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

JQueryElement 是开源共享的代码, 可以在 页面下载 dll 或者是源代码.

实际过程演示: , 建议全屏观看.