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

jsData 的 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://www.jsdata.org