JData 使用教程 过滤数据

JData 使用教程（七） 过滤数据

JData 的 GridView 控件并没有集成搜索的功能，因为要实现搜索功能，必须创建搜索条件输入框和按钮。如下图所示：

 

 

服务端代码和前面介绍的基本一致，我们主要来看一下客户端代码，客户端代码如下：

 

代码

   
     

    
      
    
      Sys.onReady(
    
      function
    
      () {

 
    
      var
    
       dataSource 
    
      =
    
       
    
      new
    
       JData.WebServiceDataSource(
    
      "
    
      ../Services/NorthwindService.asmx
    
      "
    
      , 
    
      "
    
      GetOrders
    
      "
    
      , 
    
      "
    
      InsertOrder
    
      "
    
      , 
    
      '
    
      UpdateOrder
    
      '
    
      );
 dataSource.set_selector(
    
      "
    
      OrderID, OrderDate,RequiredDate, EmployeeID
    
      "
    
      );

 
    
      var
    
       employees 
    
      =
    
       
    
      new
    
       JData.WebServiceDataSource(
    
      "
    
      ../Services/NorthwindService.asmx
    
      "
    
      , 
    
      "
    
      GetEmployees
    
      "
    
      );
 employees.set_selector(
    
      "
    
      FirstName + \
    
      "
    
       \
    
      "
    
       + LastName as Name, EmployeeID
    
      "
    
      );
 employees.set_enableCache(
    
      true
    
      );

 
    
      var
    
       col1 
    
      =
    
       
    
      new
    
       JData.BoundField(
    
      '
    
      OrderID
    
      '
    
      , 
    
      null
    
      , 
    
      '
    
      120px
    
      '
    
      , 
    
      null
    
      , 
    
      true
    
      );
 
    
      var
    
       col2 
    
      =
    
       
    
      new
    
       JData.DropDownListField(
    
      '
    
      EmployeeID
    
      '
    
      , 
    
      null
    
      , 
    
      '
    
      120px
    
      '
    
      , 
    
      null
    
      );
 col2.set_dataSource(employees);
 col2.set_displayMember(
    
      "
    
      Name
    
      "
    
      );
 col2.set_valueMember(
    
      "
    
      EmployeeID
    
      "
    
      );

 
    
      var
    
       col3 
    
      =
    
       
    
      new
    
       JData.DateTimeField(
    
      '
    
      OrderDate
    
      '
    
      , 
    
      null
    
      , 
    
      '
    
      120px
    
      '
    
      , 
    
      '
    
      112px
    
      '
    
      );
 
    
      var
    
       col4 
    
      =
    
       
    
      new
    
       JData.DateTimeField(
    
      '
    
      RequiredDate
    
      '
    
      , 
    
      null
    
      , 
    
      '
    
      120px
    
      '
    
      , 
    
      '
    
      112px
    
      '
    
      );
 
    
      var
    
       col5 
    
      =
    
       
    
      new
    
       JData.CommandField();
 col5.set_showInsertButton(
    
      true
    
      );
 col5.set_showCancleButton(
    
      true
    
      );
 col5.set_showEditButton(
    
      true
    
      );
 col5.get_itemStyle().set_width(
    
      '
    
      90px
    
      '
    
      );

 
    
      var
    
       gridView 
    
      =
    
       
    
      new
    
       JData.GridView($get(
    
      '
    
      gridView
    
      '
    
      ));
 gridView.set_dataSource(dataSource);
 gridView.set_columns([col1, col2, col3, col4, col5]); 
    
      //
    
      col5
    
      

    
       gridView.set_allowPaging(
    
      true
    
      );
 gridView.set_pageSize(
    
      15
    
      );
 gridView.set_caption(
    
      '
    
      Insert Data In Line
    
      '
    
      );
 JData.JQueryUIStyle(gridView);
 gridView.initialize();

 $($get(
    
      '
    
      txtBegin
    
      '
    
      )).datepicker({ showButtonPanel: 
    
      true
    
      , duration: 
    
      ''
    
      , dateFormat: 
    
      '
    
      yy-mm-dd
    
      '
    
       });
 $($get(
    
      '
    
      txtEnd
    
      '
    
      )).datepicker({ showButtonPanel: 
    
      true
    
      , duration: 
    
      ''
    
      , dateFormat: 
    
      '
    
      yy-mm-dd
    
      '
    
       });
 $addHandler($get(
    
      '
    
      btnFilter
    
      '
    
      ), 
    
      '
    
      click
    
      '
    
      , 
    
      function
    
      () {
 
    
      if
    
       ($get(
    
      '
    
      txtBegin
    
      '
    
      ).value 
    
      ==
    
       
    
      ''
    
      ) {
 alert(
    
      '
    
      Please input the order begin date.
    
      '
    
      );
 
    
      return
    
      ;
 }
 
    
      if
    
       ($get(
    
      '
    
      txtEnd
    
      '
    
      ).value 
    
      ==
    
       
    
      ''
    
      ) {
 alert(
    
      '
    
      Please input the order end date.
    
      '
    
      );
 
    
      return
    
      ;
 }
 dataSource.set_filter(String.format(
    
      '
    
      OrderDate.Value >= "{0}" && OrderDate.Value <= "{1}" 
    
      '
    
      , $get(
    
      '
    
      txtBegin
    
      '
    
      ).value, $get(
    
      '
    
      txtEnd
    
      '
    
      ).value));
 gridView.dataBind();
 });
});
   
     

 

我们要关注的是这一小段：

  
    

   
     
   
     dataSource.set_filter(String.format(
   
     '
   
     OrderDate.Value >= "{0}" && OrderDate.Value <= "{1}" 
   
     '
   
     , 
  
    
  
    

   
      $get(
   
     '
   
     txtBegin
   
     '
   
     ).value, $get(
   
     '
   
     txtEnd
   
     '
   
     ).value)); 
  
    
  
    

   
     gridView.dataBind();
  
    

 

这一小段实现的功能就是对 dataSource 设置过滤过件，并重新进行绑定。相信对 Asp.Net 熟悉的朋友都能很好理解。不过要注意的是，使用日期类型的时候要将它转换为字符串。

 

完整代码下载以及演示，请访问 http://jdata.alinq.org