layui表格如何添加删除按钮并弹出确认框

陌宇同学_8794

陌宇同学_8794

2026-09-04

539人浏览

原创

删除按钮该用 templet;它支持列内 html 和 lay-event 事件,适合单行操作,而 toolbar 适用于顶部批量操作。

layui表格如何添加删除按钮并弹出确认框

删除按钮该用 templet 还是 toolbar?

用 templet。它能直接在列里写 HTML,配合 lay-event 触发事件,适合单行操作;toolbar 更适合顶部统一操作(如“批量删除”),不适合每行一个“删除”按钮。

常见错误是把按钮写成 onclick="delRow(...)",这会绕过 layui 的事件委托机制,导致点击无响应或重复绑定。

正确写法示例:

{field: 'id', title: '操作', align: 'center', templet: function(d) {
  return '<button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button>';
}}

监听器怎么写才触发得了?

table.on('tool(你的lay-filter值)') 必须在 table.render() 之后注册,且 filter 值要和表格的 lay-filter 属性完全一致(大小写、空格都不能错)。

容易漏掉的点:

  • 监听器写在 table.render() 前面 → 事件根本没挂上
  • filter 写成 'userTable',但实际表格是 lay-filter="usertable" → 匹配失败
  • 用了 on('click', ...) 替代 table.on → 不走 layui 行事件委托,obj 没有 data、tr 等关键属性

标准监听结构:

深蓝色网站后台管理系统layui框架模板-AdminPro
深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载
table.on('tool(userTable)', function(obj){
  if(obj.event === 'del') {
    layer.confirm('确认删除?', function(index){
      // 后续逻辑
      layer.close(index);
    });
  }
});

点击确认后,怎么安全删掉这一行?

别手动 $(obj.tr).remove(),也别只改数据源不更新视图——必须用 obj.del()。

obj.del() 会同时做三件事:从 DOM 删除 <tr>、从内部缓存 <code>layui.table.cache[xxx] 移除对应项、保持分页/排序状态不变。这是唯一推荐的删除方式。

但注意:如果表格启用了 url 加载(即后端分页),obj.del() 只删前端视图,后端数据还在。你得补上 AJAX 请求,并在成功后再调 obj.del():

if(obj.event === 'del') {
  layer.confirm('确认删除?', function(index){
    $.post('/api/delete', {id: obj.data.id}, function(res){
      if(res.code === 0) {
        obj.del(); // ✅ 成功后再删
      } else {
        layer.msg('删除失败');
      }
    });
  });
}

为什么删完刷新页面还看到那行?

因为 layui 表格默认会缓存原始数据(layui.table.cache[filter]),而 obj.del() 并不会自动清理这个缓存 —— 这是 2.6.x 到 2.8+ 版本的一个隐蔽差异。

如果你用的是 2.7.x 或更早版本,或者表格初始化时传了 data: [...](前端静态数据),就必须手动同步缓存:

  • 先通过 obj.tr.attr('data-index') 拿到当前行在缓存里的索引
  • 再从 layui.table.cache[filter] 中 splice 掉那一项

示例:

const cache = layui.table.cache['userTable'];
const index = obj.tr.attr('data-index');
if (cache && index !== undefined) {
  cache.splice(index, 1);
}

这个步骤在纯前端增删改场景下不能省;但在后端分页(url 配置)模式下可跳过——因为下次 reload 会全量拉新数据。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.11

2523

5

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

2023.10.09

5423

6

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

2024.03.19

6450

13

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

2024.03.22

6078

10

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

2024.05.22

863

5

ajax教程
ajax教程

php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

2023.06.14

2860

4

ajax中文乱码解决方法
ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.31

360

5

ajax传递中文乱码怎么办
ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.11.15

2693

5

ajax网站有哪些
ajax网站有哪些

使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.09.24

1161

6

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 12.9万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 11.1万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习