layui table 多行删除(id获取)

<button class="layui-btn layui-btn-danger" data-type="getid" οnclick="delAll()">删除所有选中行</button>

js:

table.on('checkbox(table)', function(obj){
    var data = obj.data;
});
layui.jquery, active = {
    getid: function () {
        var arr = [];
        var checkStatus = table.checkStatus('tableid')
            , data = checkStatus.data;
        for (var i = 0; i < data.length; i++) {    //循环筛选出id
            arr.push(data[i].id);
        }
        $("#ids").val(arr);
    }
}
$('.layui-btn').on('click', function(){
    var type = $(this).data('type');
    active[type] ? active[type].call(this) : '';
});
function delAll(){
        layer.confirm('确定删除吗?', {btn: ['确定删除', '取消']}, function (index) {
            var a1 = $("#ids").val(); //取得已获取的ids
            $.ajax({  
        .......       
            });
        });

}

  • 1
    点赞
  • 10
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
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 批量删除的实现方法。如果您还有其他问题,请随时提出。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

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

余额充值