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