搜索KendoUI Grid中的所有列

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

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

参见js小提琴示例

我尝试在这里使用或逻辑运算符： jsfiddle.net但是我似乎无法让它工作….（请参阅或逻辑按钮）

Answer 1

如果你想匹配这两个条件中的一个，我认为你应该对fee 或 eq说if。

我稍微修改了你的小提琴来展示它。 如果在搜索框中键入，则将过滤与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更新到最新版本。

Answer 2

如果您不想担心列名，可以使用此代码。 它将适用于任何网格，并将搜索所有标记为可过滤的列，而不指定硬编码列名称。 此外，我添加了其他事件，以便如果有人要复制并粘贴搜索查询，则会调用该事件。 （这也需要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 }); }); 

Answer 3

OnaBai的答案不像dataTables那样工作数据表将空格视为字段和跨字段。 如果你输入“chef 36”，它就会显示没有结果dataTables搜索会显示productid为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({}); } });