Kendo ui 在剑道UI中，自定义列过滤器仅在每个列上有一个文本框，没有任何菜单、运算符和按钮

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

您将很难在常规行中执行此操作。改为使用标题，您可以放置自动完成或常规输入，在更改时触发与中的DropDownList类似的逻辑。DropDownList在工具栏模板中，但在列标题模板中也可以实现相同的功能。

看看这个JSBin，我认为它实现了您想要的功能

---

我们发现剑道没有任何完整的内置支持，因此通过扩展来定制剑道网格。我们为每一列添加了文本框，并实现了contains过滤器

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

     $("#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。我从jQueryDataTables插件切换到KendoUIGrid之后创建了这段代码。我喜欢剑道，但我真的错过了DataTables提供的全局搜索文本框。我在我所有的剑道网格上都包含了这个代码。同样，与您描述的不完全一样，这将是一个搜索框，用于搜索标记为可筛选的所有列

我修改了

G Siry

的答案。它不需要修改，适用于任何网格。只需用网格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")
        });
    });

var tr=$（“”）；
tr.appendTo（$）；
$（“#grid thead th”）。每个（函数（索引）{
var th=$（本）；
如果（第条数据（“字段”））{
tr.append（$（“”）；
}
其他的
tr.append（$（“”）；
});
tr.find（“输入”）.keyup（函数（）{
grid.dataSource.filter({
操作员：“包含”，
值：$（this）.val（），
字段：$（this.parent（“th”）.data（“字段”）
});
});

只需清除kendoAutoComplete配置

columns: [
            {
                field: 'Name', title: 'Name',
                filterable: {
                    cell: {
                        template: function (container) {
                            container.element.kendoAutoComplete()
                        },
                        showOperators: false
                    }
                }
            }
        ]