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

首页

前端开发

热心网友

转载

2026-04-28

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

配置刷新按钮，其实就是在 table.render() 的 toolbar 属性里，塞进去一个按钮的 HTML 字符串或者 DOM 节点。听起来简单，但这里有个关键点：Layui 只负责帮你把这个按钮画出来，至于点击之后要干什么，它可不管。你得自己把事件监听和刷新逻辑补上，否则按钮就是个摆设，点了也没反应——这是新手最容易踩的坑。

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

常见的翻车现场有两种：一是配置了 toolbar: '#refreshBtn'，结果页面里根本找不到这个 ID 的元素；二是直接写了个 toolbar: ''，按钮倒是出来了，却忘了给它绑定事件。

推荐做法：直接用字符串模板，既清晰又好控制。比如这样写：
```
toolbar: '
'
```
这里有个细节：lay-event="refresh" 里的这个 refresh 值，必须和后面监听事件时判断的名字一模一样，对不上号就白搭。
如果非要用 DOM 节点，务必确保在调用 table.render() 之前，这个节点已经实实在在地躺在页面里了，不然渲染会直接失败。

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

按钮配置好了，接下来就是让它“活”起来。记住，必须通过 table.on('toolbar(filter)', callback) 这个方式来监听点击，千万别图省事给按钮写原生的 onclick。因为 Layui 的表格是动态渲染的，原生绑定在动态内容上基本会失效。

那么，点击刷新时，我们通常希望保留什么？无非是当前在第几页、之前输入了什么搜索条件、以及表格是不是按某列排序了。最稳妥的办法就是调用 table.reload()，把当前的状态信息传进去，而不是自己去手动修改 page.curr 或者重新拼接请求参数。

监听代码示例：

table.on('toolbar(test)', function(obj){
  if(obj.event === 'refresh'){
    table.reload('test', {
      page: {curr: obj.config.page.curr}, // 保持当前页
      where: obj.config.where // 保持搜索参数
    });
  }
});

这里的 obj.config 是个宝藏，它保存了表格初始渲染时的配置副本，当前的分页信息、查询条件都在里面。用它比你自己去维护一堆全局变量要可靠得多。
特别提醒：obj.config.where 这个参数别忘了传，否则一刷新，用户刚才输入的搜索条件就全没了，体验非常糟糕。

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

按钮功能有了，样式又可能出问题。Layui 默认并不会主动加载它的图标字体文件，所以如果你直接用 ↻ 这样的 Unicode 符号，虽然大部分时候能显示，但在某些系统或浏览器里可能会显得模糊。如果想用标准的  图标，那就必须确保页面上已经引入了 Layui 的 CSS 和对应的字体文件。

这事儿对性能倒没太大影响，但兼容性上容易出岔子。比如一些老版本的 IE 对 Unicode 字符支持不好，而 layui-icon 这个类又完全依赖 CSS 里的字体声明。

首先检查：有没有遗漏引入 layui.css？尤其是采用模块化方式加载时，即便你写了 layui.use(['table', 'icon'])，它也不会自动帮你加载图标所需的 CSS。
一个更稳的建议：如果只是追求一个简洁的刷新标识，直接使用 ↻（在代码里写成 ↻）反而比依赖外部字体文件更保险，兼容性更好。
样式协调：给按钮加上 layui-btn-sm 这个类来控制大小，确保它和表格头部的其他元素高度匹配，看起来更协调。

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

这是另一个高频问题：明明点了刷新，数据也重新加载了，但之前排好序的列怎么又变回默认状态了？原因在于，table.reload() 方法默认并不会自动继承表格当前的排序状态，除非你明确告诉它。

解决方案就是从 obj.config 这个“百宝箱”里，把当前的排序字段（sort）和排序方式（order）拿出来，再通过特定的参数传回给 reload 方法。

完整的、能保持所有状态的刷新示例：

table.reload('test', {
  page: {curr: obj.config.page.curr},
  where: obj.config.where,
  initSort: {
    field: obj.config.sort,
    type: obj.config.order
  }
});

这里有个关键参数名：用来设置排序状态的是 initSort，不是 sort，写错了就无效。
另外，如果表格开启了多列排序功能（即配置了 multiSort: true），那么 obj.config.sort 会是一个数组，需要你进行额外的处理来适配。

说到底，实现一个“完美”的刷新按钮，其复杂性就在于状态的持久化。你需要从 obj.config 里精准地提取出当前的各种状态（页码、查询条件、排序），然后在重载时原封不动地塞回去。这个过程依赖的是框架提供的实时配置快照，而不是靠开发者的记忆或者额外的全局变量。少写一行 initSort，用户感知到的，就是一个功能不完整的刷新。

来源:https://www.php.cn/faq/2380534.html

免责声明：游乐网为非赢利性网站，所展示的游戏/软件/文章内容均来自于互联网或第三方用户上传分享，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系youleyoucom@outlook.com。

上一篇：CSS变量如何与JS动态交互_通过setProperty实时修改变量值下一篇：如何通过 history.scrollRestoration 手动控制长页面刷新后是否强制回顶