Question

我想在键入网格上方的输入字段期间在Kendo UI中搜索datagrid。

我该怎么做？

感谢您的任何建议。

以下是列的示例：

   $("#grid").kendoGrid({
            dataSource: dataPacket,
            filterable: true,
            pageSize: 10,
            pageable: true,
            sortable: true,
            reorderable: true,
            resizable: true,
            columnMenu: true,
            height: 550,
            toolbar: ["create", "save", "cancel"],
            columns: ["id", 
                      "username", 
                      "name",
                      "surname", 
                      "email", 
                      {
                          field :"created", 
                          title : "Created at",
                          format: "{0:M/d/yyyy}",
                          parseFormats: ["dd-MM-yyyy"],
                          type: "date"
                      },

Answer 1

Kendo让这件事变得非常简单，我们需要创建一个过滤器并将其传递给DataSource。 http://docs.telerik.com/kendo-ui/api/framework/datasource#methods-filter

但是，这个问题必须分为两个不同的任务：

a）在搜索框中捕获关键事件，限制，然后开始搜索＆＃34;操作＆＃34;。

b）构建过滤器并将其传递给DataSource。

因此，为了限制键盘事件，我们需要超时。或者使用underscorejs的节流功能。为什么？我们不想在每个按键上触发搜索操作。在最后一次击键后，只有250毫秒（这个数字取决于你）。

以下是您的示例HTML

<input type="text" id="search" />

这是您的示例脚本。我把所有内容都包装成一个自我调用函数，因为你不想创建一个声明全局变量的混乱。

(function($, kendo){

    // ID of the timeout "timer" created in the last key-press
    var timeout = 0;

    // Our search function 
    var performSearch = function(){

        // Our filter, an empty array mean "no filter"
        var filter = [];

        // Get the DataSource
        var dataSource = $('#grid').data('kendoGrid').dataSource;

        // Get and clean the search text.
        var searchText = $.trim($('#search').val());

        // Build the filter in case the user actually enter some text in the search field
        if(searchText){

            // In this case I wanna make a multiple column search so the filter that I want to apply will be an array of filters, with an OR logic. 
            filter.push({
                logic: 'or',
                filters:[
                    { field: 'username', operator: 'contains', value: searchText },
                    { field: 'name', operator: 'contains', value: searchText },
                    { field: 'surname', operator: 'contains', value: searchText },
                    { field: 'email', operator: 'contains', value: searchText }
                ]                  
            });               
        }

        // Apply the filter.
        dataSource.filter(filter); 
    };

    // Bind all the keyboard events that we wanna listen to the search field.
    $('#search').on('keyup, keypress, change, blur', function(){

          clearTimeout(timeout);
          timeout = setTimeout(performSearch, 250);
    });

})(window.jQuery, window.kendo);

底线：确保使用正确的DataSource配置。

如果您配置了 serverFiltering = true ，则此过滤逻辑将成为您的Ajax请求的一部分，因此您的服务器必须在服务器端解释并执行过滤。

如果你配置 serverFiltering = false ，所有这些过滤逻辑都将在客户端使用JavaScript进行评估（该死的快！）。在这种情况下，架构（每列上预期的数据类型）也必须配置良好。

Kendo UI Grid搜索作为类型示例

1 个答案: