关于layui数据表格行监听工具实现的解决办法

关于layui数据表格行监听工具实现的解决办法

在用layui数据表格监听事件的时候,出现了点击按钮失效的情况,也就是监听事件失效

如图:在点击编辑或者删除按钮的时候没有反应

可能的原因

这是官方的代码

1.没有给table加上 lay-filter="" 容器属性。
2.table.on(‘tool(test)’, function(obj) ,test 是 table 原始容器的属性 lay-filter=“对应的值”。
3.我遇到的最离谱的错误,怪自己强迫症:
在有idea的时候,会出现这个警告,千万不要去点。。。。。。
在这里插入图片描述

bug天天有,头发天天少,哈哈哈哈哈哈哈嗝~~~~~~~~
  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 1
    评论
layui 数据表格中,删除实现可以通过以下步骤完成: 1. 首先需要给数据表格添加一个监听事件,监听删除操作: ``` table.on('tool(test)', function(obj){ var data = obj.data; if(obj.event === 'del'){ layer.confirm('真的删除么', function(index){ obj.del(); //删除对应(tr)的DOM结构,并更新缓存 layer.close(index); //向服务端发送删除指令 }); } else if(obj.event === 'edit'){ //编辑操作 } }); ``` 2. 在监听事件中,当点击删除按钮时,弹出确认框询问是否真的要删除该数据,如果确认删除,则调用 obj.del() 方法删除对应的 DOM 结构,并更新缓存。 3. 如果需要向服务端发送删除指令,可以在确认删除后,通过 ajax 请求向服务端发送删除请求。 完整代码示例: ``` <table class="layui-table" lay-data="{id:'test'}" lay-filter="test"> <thead> <tr> <th lay-data="{field:'id', width:80}">ID</th> <th lay-data="{field:'username', width:120}">用户名</th> <th lay-data="{field:'email', width:150}">邮箱</th> <th lay-data="{field:'sex', width:80, sort:true}">性别</th> <th lay-data="{field:'city', width:100}">城市</th> <th lay-data="{field:'sign', width:200}">签名</th> <th lay-data="{field:'experience', width:100, sort:true}">积分</th> <th lay-data="{field:'score', width:100, sort:true}">评分</th> <th lay-data="{field:'classify', width:100}">职业</th> <th lay-data="{field:'wealth', width:150, sort:true}">财富</th> <th lay-data="{fixed: 'right', width:165, align:'center', toolbar: '#barDemo'}"></th> </tr> </thead> <tbody> <tr> <td>1</td> <td>张三</td> <td>test@test.com</td> <td>男</td> <td>北京</td> <td>这是一段签名</td> <td>1000</td> <td>99</td> <td>工程师</td> <td>100000</td> <td><button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button><button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button></td> </tr> <tr> <td>2</td> <td>李四</td> <td>test@test.com</td> <td>女</td> <td>上海</td> <td>这是一段签名</td> <td>2000</td> <td>98</td> <td>设计师</td> <td>50000</td> <td><button class="layui-btn layui-btn-xs" lay-event="edit">编辑</button><button class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</button></td> </tr> </tbody> </table> <script type="text/html" id="barDemo"> <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> </script> <script> layui.use('table', function(){ var table = layui.table; //监听工具条 table.on('tool(test)', function(obj){ var data = obj.data; if(obj.event === 'del'){ layer.confirm('真的删除么', function(index){ obj.del(); //删除对应(tr)的DOM结构,并更新缓存 layer.close(index); //向服务端发送删除指令 }); } else if(obj.event === 'edit'){ //编辑操作 } }); }); </script> ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

失落的猫头鹰

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值