Layui表格怎么在右侧工具栏中添加一个刷新按钮

作者:袖梨 2026-06-15
layui table的toolbar需手动配置按钮并监听tool事件,用table.on('toolbar(filter)', callback)捕获lay-event,调table.reload()时传入obj.config.page.curr、where及initSort等保持状态。

layui table 的 toolbar 属性怎么配刷新按钮

直接在 table.render() 的配置里加 toolbar,值设为一个带按钮的字符串或 dom 节点即可。layui 不会自动绑定点击事件,刷新逻辑得自己写——这点最容易漏掉,结果按钮点了没反应。

常见错误现象:toolbar: '#refreshBtn' 但页面里没定义该 ID 元素;或者写了 toolbar: '<button class="layui-btn">刷新</button>' 却没监听 tool 事件。

  • 推荐用字符串模板,简洁可控:toolbar: '<div class="layui-btn-container"><button class="layui-btn layui-btn-primary layui-btn-sm" lay-event="refresh">↻ 刷新</button></div>'
  • lay-event 的值(这里是 refresh)必须和后续监听的事件名一致
  • 如果用 DOM 节点,确保该节点在 table.render() 执行前已存在于页面中,否则渲染失败

如何监听 toolbar 按钮点击并触发表格重载

必须通过 table.on('toolbar(filter)', callback) 监听,而不是给按钮写 onclick——因为 Layui 表格是动态渲染的,原生绑定会失效。

使用场景:点击刷新时,一般要保留当前页码、搜索条件、排序状态。直接调 table.reload() 最稳妥,别手动改 page.curr 或拼 URL。

  • 监听示例:
    table.on('toolbar(test)', function(obj){<br>  if(obj.event === 'refresh'){<br>    table.reload('test', {<br>      page: {curr: obj.config.page.curr}, // 保持当前页<br>      where: obj.config.where // 保持搜索参数<br>    });<br>  }<br>});
  • obj.config 是原始 render 配置的副本,里面存着当前分页、where 参数等关键信息,比手动维护变量更可靠
  • 别漏掉 obj.config.where,否则刷新后搜索条件丢了

刷新按钮图标不显示或样式错乱怎么办

Layui 默认不加载图标字体, 这种 Unicode 符号虽能用,但部分系统/浏览器渲染模糊;想用 <i class="layui-icon"></i> 就必须确保页面已引入 Layui 的 CSS 和字体文件。

性能影响不大,但兼容性容易出问题:老版本 IE 不支持某些 Unicode,而 layui-icon 类依赖 CSS 字体声明。

  • 检查是否漏引 layui.css,尤其用模块化方式加载时,layui.use(['table', 'icon']) 并不能自动加载图标 CSS
  • 如果只想要简洁刷新效果,用 (↻)比依赖字体更稳,代码里写成
  • 按钮加 layui-btn-sm 控制尺寸,避免和表头高度不匹配

为什么 reload 后排序/筛选状态丢失了

因为 table.reload() 默认不会继承原实例的排序字段和顺序,除非显式传进去。这是最常被忽略的一环——看着刷新了,点过排序的列又回默认状态。

可结合 obj.config.sortobj.config.order 拿到当前排序信息,再透传给 reload

  • 完整保态刷新示例:
    table.reload('test', {<br>  page: {curr: obj.config.page.curr},<br>  where: obj.config.where,<br>  initSort: {<br>    field: obj.config.sort,<br>    type: obj.config.order<br>  }<br>});
  • initSort 是 reload 的关键参数,不是 sort,拼错就无效
  • 如果表格启用了多列排序(multiSort: true),obj.config.sort 是数组,需额外处理
复杂点在于状态要从 obj.config 里“抠”出来再塞回去,而不是靠记忆或全局变量。少写一行 initSort,用户就会觉得刷新功能不完整。

相关文章

精彩推荐