在 Kendo UI Grid 中搜索所有列

Posted 2023-05-07

【中文标题】在 Kendo UI Grid 中搜索所有列

【英文标题】：Search All Columns in KendoUI 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" ] );

【参考方案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();
    

);