Layui表格表头加搜索框需用templet渲染并手动绑定事件,2.8+才支持title中使用templet;监听输入应前端过滤table.cache后reload并重置分页,禁用排序或阻止冒泡解决聚焦问题。
表头单元格里加搜索框,本质是自定义 templet
layui 表格不支持直接在 cols 配置里写 <input>,必须用 templet 渲染表头(toolbar 或 title 位置都不行)。很多人试了在 title 里拼 html,结果发现渲染后被转义、事件绑定失效、输入框无法聚焦——问题就出在这里。
正确做法是:把表头单元格当成“可渲染区域”,用 templet 返回带 <input> 的字符串,并手动绑定事件。注意:Layui 2.8+ 才支持对 title 使用 templet;旧版本只能靠 DOM 操作硬塞,但稳定性差。
-
templet函数接收一个对象参数,其中data是列配置项,不是表格数据,别误用data.field去取值 - 输入框的
id或class必须唯一,否则多个列共用一个id会导致document.getElementById只拿到第一个 - 不要在
templet里写oninput内联事件,Layui 渲染时会剥离,得用layui.$(document).on('input', '.search-input-name', ...)代理
怎么让搜索框和表格数据联动(比如实时过滤)
表头加了输入框只是第一步,真正要生效,得监听输入、触发重载或前端过滤。Layui 没有内置“表头搜索”逻辑,一切得自己来。
推荐前端过滤(适合数据量 ≤ 1000 条),避免频繁请求。关键点在于:不能每次输入都调 table.reload(),那会重绘整个表格、丢失滚动位置、清空已选行;应该用 table.cache 拿原始数据,filter 后再用 table.render({ data: filtered }) 替换,但这样会丢掉分页状态——所以更稳妥的是只改 table.cache["id"],然后调 table.reload() 并传 page: { curr: 1 } 重置分页,同时加 done 回调恢复当前页码(如果需要)。
- 用
layui.$('.search-input-name').val()取值,别用原生value,因为 Layui 的 input 可能被美化或动态创建 - 模糊搜索建议用
String.prototype.includes(),不用正则,避免用户输特殊字符报错 - 空值处理要显式判断:
if (!keyword.trim()) return true,否则''会被当false导致全不显示
兼容性坑:Layui 2.7 和 2.8+ 的 templet 行为差异
Layui 2.7 不支持在 title 字段上使用 templet,强行写会静默失败;2.8+ 才正式开放。如果你升级了但没效果,先检查 layui.version,再确认是否用了 title: '姓名' + '<input class="layui-input search-input-name">' 这种写法——这是错的,必须走 templet 函数。
另一个常见问题是:表格初始化后,表头 DOM 已存在,但 templet 是在渲染时执行的,所以输入框的 focus、placeholder 等属性必须在 templet 返回的 HTML 字符串里写死,不能靠 JS 后补(因为渲染完才执行 templet)。
- 2.7 用户只能用变通法:初始化表格后,用
layui.$('.layui-table-header th').eq(1).append('<input>')手动插入,但需注意表格重绘(如排序、调整列宽)会清空它 - 2.8+ 中,
templet返回的字符串会被自动插入,但不会自动执行脚本,所有事件绑定必须在done回调或全局$(document).ready里做 - 如果用了
fixed: 'left'列,其表头是独立 DOM,templet仍有效,但 CSS 定位容易错位,建议加style="position: relative"包一层
为什么搜索框常被点击两次才聚焦?
这是 Layui 表格的默认行为:点击表头会触发排序,而输入框在表头内,第一次点击被排序拦截,第二次才落到 input 上。解决方法只有两个:禁用该列排序,或阻止事件冒泡。
禁用排序最简单:sort: false 加到列配置里;如果还要保留排序能力,就得在输入框上加 onclick="event.stopPropagation()",或者用 jQuery 绑定 .on('click', '.search-input-name', function(e){ e.stopPropagation(); })。
- 别用
return false,它会同时阻止默认行为和冒泡,可能导致 input 失去 focus 能力 - 如果用了 Layui 的
lay-event自定义工具栏,注意它也会捕获 click,得确保 input 不在lay-event元素内部 - 移动端测试时,iOS Safari 对
input的 focus 有延迟,建议加setTimeout(() => this.focus(), 0)强制触发
表头搜索看着简单,但涉及渲染时机、事件流、版本兼容、DOM 生命周期四个层面,漏掉任意一个,输入框就变成摆设。


















