Kendo UI新手求助：将表格首列checkboxDisplay表头替换为文本框

嘿，刚上手Kendo UI的话，这个需求其实很容易实现！你只需要利用Grid列配置里的headerTemplate属性，就能完全替换掉原来的checkboxDisplay表头文本，换成你需要的文本框。

具体修改步骤 #

1. 替换表头配置：在你定义Grid列的代码中，把第一列的title属性换成headerTemplate，在模板里直接写文本框的HTML代码。
2. 可选：调整样式适配表头：给文本框加个类，设置合适的宽度和内边距，让它和表头更贴合。
3. 可选：绑定文本框事件：如果需要对输入内容做处理，可以给文本框绑定事件。

修改后的代码示例 #

首先是Grid的列配置部分：

columns: [{
    field: "checkboxDisplay",
    // 用headerTemplate自定义表头为文本框
    headerTemplate: "<input type='text' placeholder='请输入内容' class='grid-header-input' />",
    template: "# if ('new' == 'new') { # <input id='checkIDGrid' type='checkbox' checked=true class=''> # }else{# <span class='oldEventArrow'></span> # } #"
    // 这里可以保留你原来的其他配置，比如width等
},
// 其他列的配置...
]

然后添加一点基础样式，让文本框更美观：

.grid-header-input {
    width: 90%;
    padding: 3px 6px;
    border: 1px solid #ddd;
    border-radius: 3px;
    box-sizing: border-box;
}

如果需要监听文本框的输入事件，比如做表格过滤，可以这样绑定：

// 监听表头文本框的输入
$(document).on('input', '.grid-header-input', function() {
    const inputVal = $(this).val().trim();
    // 这里可以根据输入值过滤Grid数据，示例如下：
    const grid = $("#yourGridId").data("kendoGrid");
    grid.dataSource.filter({
        logic: "or",
        filters: [
            // 假设你要根据某列过滤，比如和checkboxDisplay关联的字段
            { field: "targetFieldName", operator: "contains", value: inputVal }
        ]
    });
});

原理说明 #

Kendo UI Grid的headerTemplate属性允许你自定义表头的HTML结构，完全替代默认的文本标题。这样你可以在表头里放置任何HTML元素，不仅仅是文本框，按钮、下拉框这些都可以用同样的方式实现。

内容的提问来源于stack exchange，提问作者user9502376