在KendoUI Grid中搜索所有列

我正在尝试为kendoUI网格创建一个搜索框。我已经能够开始基于一个字段进行搜索，但是我希望搜索框中的值能够搜索网格中的所有列。在KendoUI Grid中搜索所有列

function() { 
      grid.data("kendoGrid").dataSource.filter({ 
       field: "ProductName", 
       operator: "contains", 
       value: $('#category').val() 
      }); 

     }

See js fiddle example

我想在这里使用的或逻辑运算符：jsfiddle.net但我似乎无法得到它的工作......（见或逻辑按钮）

来源

2012-12-18 BlueBird

我尝试使用逻辑运算符但它不工作... $（ “＃电网”）的数据（ “kendoGrid”）dataSource.filter（{ 逻辑： “或”，过滤器： [ {field：“ProductName”，operator：“ne”，value：“fee”}， {field：“ProductName”，operator：“ne”，value：“fi”} ] }）; – BlueBird

我认为，你应该说eq到fee或eq到fi如果你想匹配两个条件之一。

我稍微修改了您的fiddle以显示它。如果您在搜索框中输入内容，则会过滤匹配ProductName列或QuantityPerUnit的记录。

//change event 
$("#category").keyup(function() { 
    var val = $('#category').val(); 
    $("#grid").data("kendoGrid").dataSource.filter({ 
     logic : "or", 
     filters: [ 
      { 
       field : "ProductName", 
       operator: "contains", 
       value : val 
      }, 
      { 
       field : "QuantityPerUnit", 
       operator: "contains", 
       value : val 
      } 
     ] 
    }); 
});

重要：我有更新的jQuery版本1.8.2使它工作，以防万一我已经更新KendoUI，还有，到最新版本。

来源

2012-12-18 22:29:55 OnaBai

如果您不想担心列名称，您可以改用此代码。它可以在任何网格上工作，并将搜索所有标记为可过滤的列，而无需指定硬编码的列名称。此外，我添加了其他事件，以便如果有人要复制并粘贴搜索查询，则会调用该事件。（这也需要jQuery 1.83或更高版本）。我从jQuery Datatables插件切换到Kendo UI Grid后创建了这段代码。我喜欢剑道，但真的错过了DataTables提供的全球搜索文本框。我在我所有的Kendo网格中包含这些代码。

 $("#category").on("keypress blur change", function() { 
     var filter = { logic: "or", filters: [] }; 
     $searchValue = $(this).val(); 
     if ($searchValue) { 
      $.each($("#grid").data("kendoGrid").columns, function(key, column) { 
       if(column.filterable) { 
        filter.filters.push({ field: column.field, operator:"contains", value:$searchValue}); 
       } 
      }); 
     } 
     $("#grid").data("kendoGrid").dataSource.query({ filter: filter }); 
    });

来源

2013-11-27 21:04:40 matwonk

这正是我所做的，但现在我正试图过滤隐藏的列，只存在于数据源中，所以现在我可能不得不改变为另一种方法 –

伟大的工作席..我想转移到Kendo UI网格以及来自Datatables网格，但这种常见的搜索功能阻止了我这么做。现在这可以帮助我完全转移到Kendo UI网格。感谢您的工作 –

OnaBai的答案并不像DataTables那样工作，数据表将空间视为跨领域。在小提琴中，如果您输入“厨师36”，则不显示结果数据表搜索将显示产品数量为5的行，因为它在一列中有厨师，在另一列中有36。正确的代码看起来像这样http://jsfiddle.net/Naka3/38/。

$("#category").keyup(function() { 
    var selecteditem = $('#category').val(); 
    var kgrid = $("#grid").data("kendoGrid"); 
    selecteditem = selecteditem.toUpperCase(); 
    var selectedArray = selecteditem.split(" "); 
    if (selecteditem) { 
     //kgrid.dataSource.filter({ field: "UserName", operator: "eq", value: selecteditem }); 
     var orfilter = { logic: "or", filters: [] }; 
     var andfilter = { logic: "and", filters: [] }; 
     $.each(selectedArray, function (i, v) { 
      if (v.trim() == "") { 
      } 
      else { 
       $.each(selectedArray, function (i, v1) { 
        if (v1.trim() == "") { 
        } 
        else { 
         orfilter.filters.push({ field: "ProductName", operator: "contains", value:v1 }, 
               { field: "QuantityPerUnit", operator: "contains", value:v1}); 
         andfilter.filters.push(orfilter); 
         orfilter = { logic: "or", filters: [] }; 
        } 

       }); 
      } 
     }); 
     kgrid.dataSource.filter(andfilter); 
    } 
    else { 
     kgrid.dataSource.filter({}); 
    } 

});

来源

2014-01-31 23:59:16

在KendoUI Grid中搜索所有列

回答

相关问题