1

在 Kendo UI 中，我想要自定义列过滤器，每列只有一个文本框，没有任何菜单、运算符和按钮。当用户在文本框中输入内容时，我必须在服务器端执行“包含”过滤器。最简单的方法是什么？

4

6 回答 6

3

看看这个 JSBin，我认为它实现了你想要的功能 http://jsbin.com/equwes/1/edit

于 2013-02-07T21:59:55.073 回答
0

这与您描述的不完全一样，但是如果您愿意，可以在网格上方或网格上的工具栏模板中添加一个搜索框，您可以使用以下代码：

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

其中 txtSearch 是您正在使用的搜索输入的 ID。我从 jQuery Datatables 插件切换到 Kendo UI Grid 后创建了这段代码。我喜欢 Kendo，但真的很怀念 DataTables 提供的全局搜索文本框。我在我所有的剑道网格中都包含了这个代码。同样，与您所描述的不完全一样，这将是一个搜索框，它将搜索所有标记为可过滤的列。

于 2013-11-27T21:18:27.640 回答
0

您将很难在常规行中执行此操作。改用标头，您可以放置​​ AutoComplete 或常规输入，这些输入在更改时会触发与此演示中的 DropDownList 类似的逻辑。DropDownList 在 ToolBar 模板中，但在列标题模板中也可以实现。

于 2012-12-21T22:27:34.123 回答
0

我们发现 Kendo 没有任何完整的内置支持，因此通过扩展自定义了 kendo 网格。我们为每一列添加了文本框并实现了包含过滤器。

于 2013-08-24T06:53:32.300 回答
0

我已经修改G Siry了答案。它不需要修改并且适用于任何网格。只需替换#grid为您的网格 ID：

    var tr = $("<tr/>");
    tr.appendTo($("#grid thead"));
    $("#grid thead th").each(function (index) {
        var th = $(this);
        if (th.data("field")) {
            tr.append($("<th data-field='" + th.data("field") + "' class='k-header'><input class='k-textbox' /></th>"));
        }
        else
            tr.append($("<th/>"));
    });
    tr.find("input").keyup(function () {
        grid.dataSource.filter({
            operator: "contains",
            value: $(this).val(),
            field: $(this).parent("th").data("field")
        });
    });
于 2014-02-17T11:39:39.753 回答
0

只需要清除 kendoAutoComplete 配置

columns: [
            {
                field: 'Name', title: 'Name',
                filterable: {
                    cell: {
                        template: function (container) {
                            container.element.kendoAutoComplete()
                        },
                        showOperators: false
                    }
                }
            }
        ]
于 2016-03-09T20:54:53.097 回答