Kendo UI Grid搜索作为类型示例

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)捕获搜索框中的关键事件,对其进行限制并开始搜索"操作".

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进行评估(该死的快!).在这种情况下,模式(每列上预期的数据类型)也必须配置良好.