Question

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

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

        }

See js fiddle example

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

Answer 1

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

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({});
    }

});

搜索Kendo UI Grid中的所有列

2 个答案: