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