Layui批量刪除

監聽復選框 監聽點擊事件

• 兩個按鈕放在<script>中

<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container demoTable">
    <button class="layui-btn layui-btn-sm" lay-event="add" ><i class="layui-icon layui-icon-add-circle-fine" style="font-size:20px;font-weight:bold"></i> 新增班級</button>
    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchdel" data-type="getCheckData"><i class="layui-icon layui-icon-delete" style="font-size:20px;"></i> 批量刪除</button>
  </div>
</script>

在生成表格的js中 使用了toolbar:"#toolbarDemo",使按鈕加載到表格上

 

 

 

• JS實現批量刪除(首先開啟復選框監聽，接着監聽點擊，active中獲取選中數據，通過遍歷數據，將班級id存儲在delList數組中，通過var strify = JSON.stringify(delList);將數組轉為JSON字符串)

//批量刪除
     active = {
                getCheckData: function(){ //獲取選中數據
                    var checkStatus = table.checkStatus('tableAll')
                    ,checkData = checkStatus.data,
                    delList=[];
                     
                     for (var i = 0; i < checkData.length; i++) {
                        delList.push(checkData[i].classid);
                     }
                     var strify = JSON.stringify(delList);
                    console.log(strify);
                    $.ajax({
                        url:"../../ClassesDeleteBatchServlet",
                        dataType:'json',
                        data:{
                            datas:strify
                        },
                        type:'post',
                        success:function(data){
                            if (data == 0) {
                                layer.msg('刪除失敗！',{icon:5,offset:"auto",time:2000});//提示框
                            }else{
                                layer.msg('刪除成功！',{icon:6,offset:"auto",time:2000});//提示框
                            }
                            
                            setTimeout(function(){
                                location.reload();//重新加載頁面表格
                            }, 2100);
                        }
                    })
                }    
             };
        //監聽點擊
       $('.demoTable .layui-btn').on('click', function(){
             var type = $(this).data('type');
             active[type] ? active[type].call(this) : '';
         });
      //監聽表格復選框選擇
          table.on('checkbox(table1)', function(obj){
              console.log(obj);
          })

轉載：https://blog.csdn.net/qq_41154522/article/details/99683490

 

-------------------------------------------------------------自己項目--------------------------------------------------------------------------

<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getCheckData">獲取選中行數據</button>
    <button class="layui-btn layui-btn-sm" lay-event="getCheckLength">獲取選中數目</button>
    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="batchdel" data-type="getCheckData"><i class="layui-icon layui-icon-delete" style="font-size:20px;"></i> 批量刪除</button>
  </div>
</script>

//頭工具欄事件

table.on('toolbar(test)', function(obj){

    var checkStatus = table.checkStatus(obj.config.id);
    switch(obj.event){
        case 'getCheckData':
            var data = checkStatus.data;
            layer.alert(JSON.stringify(data));
            break;
        case 'getCheckLength':
            var data = checkStatus.data;
            layer.msg('選中了：'+ data.length + ' 個');
            break;
        case 'isAll':
            layer.msg(checkStatus.isAll ? '全選': '未全選');
            break;
            //全部刪除
        case 'batchdel':
           
                checkData = checkStatus.data;
                delList=[];

            for (var i = 0; i < checkData.length; i++) {
                delList.push(checkData[i].id);
            }

            if(delList == ''){
                layer.alert('請選擇刪除項');return;
            }
            
            layer.confirm('確定批量刪除嗎？', function(index){
                layer.close(index);
                $.ajax({
                    type:'post',
                    dataType:'json',
                    url:"{:url('comment/send_comment_del_many')}",
                    data:{ids:delList},
                    success:function (res) {
                        if (res.status == 200) {
                            layer.msg(res.msg,{time:1000},function () {
                                window.location.href="{:url('comment/send_comment')}";
                            })
                        } else {
                            layer.msg('失敗', {icon: 2, time: 1000});
                        }
                    }
                });

            });
            break;

        //自定義頭工具欄右側圖標 - 提示
        case 'LAYTABLE_TIPS':
            layer.alert('這是工具欄右側自定義的一個圖標按鈕');
            break;
    }
});

    public function send_comment_del_many()
    {
        if($this->request->isPost()){

            $arrDate  =$this->request->param('ids');
//            dump($arrDate);die;
            foreach ($arrDate as $k => $v){
                Db::name('ht_send_comment')->where('id',$v)->delete();
            }
            return json(['status'=>200,'msg'=>'成功']);
        }

    }