在 Kendo UI Grid 中搜索所有列答案

【问题标题】：Search All Columns in KendoUI Grid在 Kendo UI Grid 中搜索所有列
【发布时间】：2012-12-05 23:05:23
【问题描述】：

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

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

        }

See js fiddle example

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

【问题讨论】：

我尝试使用逻辑运算符但是它不起作用...$("#grid").data("kendoGrid").dataSource.filter({ logic: "or", filters: [ {field: "ProductName", operator: "ne", value: "fee"}, {field: "ProductName", operator: "ne", value: "fi"} ] });

标签： jquery kendo-ui

【解决方案1】：

如果你想匹配两个条件之一，我认为你应该说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 更新到最新版本。

【讨论】：

【解决方案2】：

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

     $("#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 });
    });

【讨论】：

这正是我所做的，但现在我正在尝试过滤仅存在于数据源中的隐藏列，所以现在我可能不得不更改为另一种方法
伟大的工作 Mat.. 我也想从 Datatables 网格转移到 Kendo UI 网格，但是这个常见的搜索功能这些天一直在阻止我这样做。现在这可以帮助我完全过渡到 Kendo UI 网格。感谢您的工作

【解决方案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({});
    }

});

【讨论】：