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

---

« 
» 

---