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