搜索在KendoUI网所有列(Search All Columns in KendoUI Grid)

我试图创建一个kendoUI网格中的搜索框。 我已经能够得到做基于一个字段的搜索，但是我想在我的搜索框中的值来搜索网格中的所有列的开始。

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

        }

见JS例如小提琴

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

Answer 1:

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

从来就稍加修改你的小提琴表现出来。 如果你在搜索框中键入您将筛选匹配任何记录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的数据表插件切换到剑道UI电网。 我喜欢剑道，但真的错过由数据表提供的全局搜索文本框。 我包括我所有的剑道电网这段代码。

     $("#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的像数据表的答案不工作确实数据表把空格作为和整个领域。 如果您键入的小提琴“厨师36”，它没有显示结果数据表搜索将显示，有5个产品ID，因为它有厨师在一列和另一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({});
    }

});

文章来源: Search All Columns in KendoUI Grid