layui table 是一款基于
layui框架开发的表格插件，它提供了很多实用的功能，包括批量
删除。具体实现方法如下：
1. 在HTML页面中，定义一个表格，并且给表格添加一个id，如下所示：
```
<
table id="demo" lay-filter="test"></
table>
```
2. 在JS文件中，通过
layui.
table.render() 方法渲染表格，并且设置一些属性，如下所示：
```
layui.use('
table', function(){
var
table =
layui.
table;
//渲染表格
table.render({
elem: '#demo',
url: '/demo/
table/user/', //
数据接口
page: true, //开启分页
cols: [[ //表头
{type: 'checkbox'},
{field: 'id', title: 'ID', width:80, sort: true},
{field: 'username', title: '用户名', width:120},
{field: 'email', title: '邮箱', width:150},
{field: 'sex', title: '性别', width:80, sort: true},
{field: 'city', title: '城市', width:100},
{field: 'sign', title: '签名', width: 200},
{field: 'experience', title: '积分', width: 80, sort: true},
{field: 'score', title: '评分', width: 80, sort: true},
{field: 'classify', title: '职业', width: 100},
{field: 'wealth', title: '财富', width: 135, sort: true},
{fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
]]
});
});
```
3. 定义一个工具条模板，通过 checkbox 来选择需要
删除的
数据项，如下所示：
```
<script type="text/html" id="barDemo">
<a class="
layui-btn
layui-btn-danger
layui-btn-xs" lay-event="del">
删除</a>
</script>
```
4. 绑定工具条事件，通过
layui.
table.on() 方法监听事件，如下所示：
```
layui.use('
table', function(){
var
table =
layui.
table;
//监听工具条
table.on('tool(test)', function(obj){
var data = obj.data; //获取当前
行数据
var layEvent = obj.event; //获取lay-event对应的值
if(layEvent === 'del'){ //
删除
layer.confirm('真的
删除行么', function(index){
obj.del(); //
删除对应
行（tr）的DOM结构，并更新缓存
layer.close(index);
//向服务端发送
删除指令
});
}
});
});
```
5. 定义一个批量
删除按钮，通过
layui.
table.on() 方法监听按钮事件，并获取选中的
数据项进
行删除操作，如下所示：
```
layui.use('
table', function(){
var
table =
layui.
table;
//监听表格复选框选择
table.on('checkbox(test)', function(obj){
console.log(obj)
});
//监听工具条
table.on('tool(test)', function(obj){
var data = obj.data; //获取当前
行数据
var layEvent = obj.event; //获取lay-event对应的值
if(layEvent === 'del'){ //
删除
layer.confirm('真的
删除行么', function(index){
obj.del(); //
删除对应
行（tr）的DOM结构，并更新缓存
layer.close(index);
//向服务端发送
删除指令
});
}
});
//批量
删除按钮事件监听
$('#btnDelete').click(function(){
var checkStatus =
table.checkStatus('demo'); //获取选中
行数据
var data = checkStatus.data;
if(data.length > 0){
layer.confirm('真的
删除选中的
数据么？', function(index){
$.ajax({
url : '/demo/
table/delete/',
type : "POST",
data : {
data : JSON.stringify(data)
},
success : function(data) {
if (data.code == 0) {
layer.msg("
删除成功", {
icon : 6,
time : 1000
}, function() {
table.reload("demo");
});
} else {
layer.msg(data.msg, {
icon : 5,
time : 1000
});
}
}
});
layer.close(index);
});
}else{
layer.msg("请选择需要
删除的
数据");
}
});
});
```
以上就是
layui table 批量
删除的实现方法。如果您还有其他问题，请随时提出。
5847
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
