• 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'=>'成功']);
            }
    
        }

  • 相关阅读:
    CentOS6.0 yum php mcrypt 扩展安装问题
    WordPress入门系列之基本设置
    ./configure 配置文件时出错checking for g++... no
    锐捷硬件防火墙
    CentOS 安装php mcrypt和mbstring的扩展
    (转)在asp.net 2.0中使用SqlBulkCopy类迁移数据
    正则表达式对象&&String对象
    SQL Server 和 SQLite 时间函数汇总
    FreeBSD下nginx并支持php配置详解
    从Ports安装MySQL
  • 原文地址:https://www.cnblogs.com/yehuisir/p/13602412.html
Copyright © 2020-2023  润新知