17

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

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

        }

参见 js fiddle 示例

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

4

3 回答 3

16

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

于 2012-12-18T22:29:55.157 回答
4

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

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

});
于 2014-01-31T23:59:16.997 回答