tp5+layui实现ajax批量删除

批量删除一般都会使用复选框,我们先来实现复选框的 全选和反选

• 按钮

<button class="layui-btn layui-btn-xs" id="selectAll">全选</button>
<button class="layui-btn layui-btn-xs" id="selectReserve">反选</button>

• 复选框 (value 为tp5循环的 id)

 <input lay-skin="primary" class="getid" name="checkBoxGroup" type="checkbox" value="{$vo.id}">

• jquery实现选中渲染 (依赖layui的 form 模块)

layui.use(['form'],
    function() {
    
          
        var form = layui.form;
        $ = layui.jquery;

        //全选
        $("#selectAll").click(function() {
    
    
            $(":checkbox[name='checkBoxGroup']").each(function() {
    
    
                $(this).prop("checked", true);
                form.render('checkbox');
            });
        });
        //反选
        $("#selectReserve").click(function() {
    
    
            $(":checkbox[name='checkBoxGroup']").each(function() {
    
    
                $(this).prop("checked", !$(this).prop("checked"));
                form.render('checkbox');
            });
        });
    });

• 批量删除函数 (将选中的 id 处理为逗号隔开的 字符串 传给后端)

//js删除数组最后一个元素
    function truncate(arr) {
    
    
        return arr.slice(0, -1);
    }
    /*-批量删除*/
    function delAll() {
    
    
        var str = '';
        $(":checkbox[name='checkBoxGroup']:checked").each(function() {
    
    
            str += $(this).val() + ",";
        });
        
        var arr = str.split(',');
        arr = truncate(arr); //删除数组最后一个元素
        var checkde_count=arr.length;
        if (arr.length == 0) {
    
    
            layer.msg('请至少选择一项');
            return false;
        }

        layer.confirm('确认要删除这  <b style="color:red;">'+checkde_count+'项</b> 吗？' + '( '+str+')',
            {
    
    btn: ['删除', '取消']},
          function(){
    
    
            $.post("/index.php/index/Admin/admin_all_del",    
                {
    
    data: str},
                function(res) {
    
    
                if (res.code > 0) {
    
    
                    layer.alert(res.msg, {
    
    
                        icon: 2
                    });
                } else {
    
    
                    layer.msg(res.msg);
                    setTimeout(function() {
    
    
                        window.location.reload();
                    },
                    1000);
               }
            },
            'json');
        });
    }

• tp后端处理

//批量删除
    public function admin_all_del(){
    
    
		//接收参数  
        $map = input();
        $data=$map['data'];
        $data=trim($data,',');
 
        $where = 'id in('.$data.')';  
   
        $list=Db::name('news')->where($where)->delete();
        if($list!==false) {
    
    
       	 $this->returnMsg(0, '成功删除'.$list.'项！');
        }else{
    
       
        $this->returnMsg(1, '删除失败');
        } 
       
	}