Layui中数据表格开启头部工具栏后点击按钮不刷新页面操作

最新推荐文章于 2025-03-19 10:41:14 发布

原创最新推荐文章于 2025-03-19 10:41:14 发布 · 4.1k 阅读

1 ·

CC 4.0 BY-SA版权

填坑笔记专栏收录该内容

7 篇文章

订阅专栏

在使用Layui头部工具栏时遇到页面刷新问题，特别是在操作隐藏子页面的表单时。通过将实例文档中的按钮标签修改为静态按钮，可以有效避免页面刷新，确保操作流程的连续性。

今天又碰到一个奇怪的问题。

用Layui头部工具栏实现某些功能的时候出现了刷新页面的情况，而且表单在是在隐藏的子页面中，操作时显示，但是点击工具栏后又回到了主页面。

处理办法为不要使用实例文档中的 <button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>

改为<input id="btn_getxz" type="button" value="添加选择" class="layui-btn layui-btn-sm" lay-event="getCheckData" />

使用静态按钮处理就可解决页面刷新问题

确定要放弃本次机会？

福利倒计时

: :

立减 ¥

普通VIP年卡可用

立即使用

SImble77

关注关注

2
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
分享

复制链接

分享到 QQ

分享到新浪微博

扫一扫
举报

举报

专栏目录

layui 表格删除数据后不更新以及返回页码问题

zcc的博客

01-22

1887

<table lay-filter="tasktimer" id="tasktimer"></table> <script type="text/html" id="barDemo2"> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"></a> </script> //方法级渲染 var tasktimer = t..

tip-14 layui筛选列不随页面刷新，json内包含函数转字符串

weixin_45698602的博客

07-07

443

layui筛选列不随页面刷新，json内包含函数转字符串

参与评论您还未登录，请先登录后发表或查看评论

Layui 设置按钮按下不刷新

m0_67187094的博客

05-17

476

提交

Layui数据表单执行完ajax函数执行修改操作后，表格中的数据不刷新

WEN_Windy的博客

09-16

1570

js代码：后台Controller层的查询函数中加多一个String类型的参数接收时间戳，如下图解决方法，在数据表格的url参数中加多一个一个时间戳参数，后台函数中使用String类型接收即可。 ...

layui table 修改页面值，不刷新页面

清叶的专栏

11-22

2493

一、点击单元格更新数据 table.on('tool(tbEvent)', function(obj) { var data = obj.data,layEvent = obj.event; var $this = $(this); layer.open({ title: '设置状态', type: 1,shade: false, maxmin: true, shade: 0.5,anim: 1,skin: 'layer-ext-myskin', ar...

解决Layui表格头部工具栏事件绑定失效，上传文件按钮失效问题

shenzhou_yh的博客

09-14

5105

背景最近使用了layui的前端框架，也在慢慢适应中，好多功能都已经封装得很实用，遇到不会的功能，看看官网的demo的文档，都还是可以解决的，毕竟咱们的模仿能力还是可以的。记录一下昨天遇到的一个问题，就是我想在表格的头部工具栏，增加一个文件上传的接口，用于数据的批量导入，就简单的写了一个按钮，使用upload组件实现了功能，但是奇怪的事情发生了，第一次上传成功之后，页面不刷新，再次点击第二次的话，是无法上传文件，想后台发出请求的，最后排查的原因是，按钮上面的事件乜有被渲染，到时上传组件无法与指定的按钮进行

layui自定义工具栏的方法

10-16

总的来说，layui自定义工具栏的方法允许开发者自由设计表格头部的操作区域，结合layui提供的事件系统，可以轻松实现各种交互功能，极大地增强了表格的可扩展性和实用性。通过学习和实践这些知识，你可以更好地利用...

layui 表格重载导致表头工具栏失效【一】

hj1993的博客

05-03

1178

layui 数据表格重载后，表头的工具栏按钮点击失效，不能二次点击，必须刷新整个页面才能生效！

Flask+LayUI开发手记（一）：LayUI表格的前端数据分页展现

java15655057970的博客

12-23

1264

因为，一次把数据全传到前端的模式，意味着系统内出现两套数据，一套前端缓冲数据，一套后端原本数据，如果功能中需要增删改数据，如何保持前后端数据的一致性，就成了控制上的大问题。前端数据分页，即一次性提取后台数据到前端，由前端实现全部的分页数据处理控制，后端数据分页，即前端展示分页操作栏，所有的分页操作均提交到后端进行数据请求，由后端生成分页数据传给前端。开始做无外乎就是用户、角色、权限编辑，记录都很少，用不上分页，等做日志显示时一下就看出错误了，分页设的16条，怎么系统在一个页面把全部100多条数据都展示了。

LayUI upload上传按钮二次点击无效

最新发布

专治八阿哥的孟老师

03-19

552

当我把上传按钮放在表格头部工具栏之后，每次表格刷新之后，即table.reload()之后，上传按钮点击无效。这个问题因该是和table的toolbar绑定有关，和上传本身无关。测试的时候发现即使不上传，点击查询或者修改之后reload表格，都会使上传按钮的事件失效。这里需要注意的是头部工具栏的按钮不能是绑定upload的按钮，不然触发click()时会有一个无限递归，导致报错。解决的方式是将upload绑定到一个隐藏按钮上，在头部工具栏中触发这个按钮的click事件。版本layui 2.6.8。

LayUI一行代码解决同一菜单或菜单选项卡重复点击不刷新问题

AnNong

11-09

2149

一、layui菜单及选项卡只有第一次点击会刷新，重复点击是从cache中读取，实际生产环境中这种方式显得很累赘。在layui的底层js,也就是admin.js中找到监听tab切换的tabChange方法,添加如下配置即可完美解决: P.tabsBody(e).children("iframe").attr("src", P.tabsBody(e).children("iframe").at...

在不刷新的情况下动态添加表格行

管子（zero）的杂乱空间

12-08

1285

<script type="text/javascript"src="

layui的button点击刷新页面的问题

weixin_40548105的博客

11-24

481

该按钮点击提交form表单的时候会刷新当前页面，加上 type=“button” 后就不会了。

解决layui的table组件更新数据后每行toolbar工具栏不更新的问题

MicroAnswer的博客

11-02

9005

修复layui中表格行更新后对应的toolbar不更新的问题。

layui 添加数据后表格不自动刷新

Wendz的博客

03-06

9646

如果添加数据后表格不自动刷新，但是手动刷新后，新添加的数据会正常显示，页面报错如图，查看table.render中是否有id属性，如果有，删除该属性。 ...

layui点击编辑后不需要刷新

书山有路_邓

08-26

551

1.覆盖调方法 2.直接改之前的方法 form.on("submit(sub)", function (data) { var url_path = '/' + $(this).data('module') + '/' + $(this).data('controller') + '/save' console.log('=======================================') console.log('===

layui阻止刷新form，避免清空用户刚填写的数据

weixin_45303757的博客

12-05

1370

layui中form表单提交失败，阻止刷新form，避免清空用户刚填写的数据用户提交时经校验，数据库已经有完全相同的数据，因此添加失败，但是不关闭弹窗，也不刷新form，不清空用户刚填写的数据 //表单提交事件 form.on('submit(btnSubmit)', function (data) { //校验已存在重复数据阻止刷新form，阻止清空用户刚填写的数据 function stopDefault( e ) { //阻止默认浏览

layui的下拉框没有刷新数据一行代码解决

搬砖团团长

08-19

318

form.render(); //更新全部

Layui框架弹出框form表单中单选按钮状态不刷新

雾林小妖的博客

11-27

929

在使用Layui的弹框的时候，无法修改弹框中form表单单选按钮radio的状态。

layui表格的头部工具栏事件如何获取被点击的按钮元素

06-03

在 layui表格的头部工具栏中，可以通过监听 toolbar 事件来获取被点击的按钮元素。具体实现步骤如下： 1. 在表格渲染时，通过 toolbar 参数配置头部工具栏按钮的 HTML 代码，例如： ```javascript layui.table....