利用Layui 怎么批量删除数据表格

本篇文章为大家展示了利用Layui 怎么批量删除数据表格，内容简明扼要并且容易理解，绝对能使你眼前一亮，通过这篇文章的详细介绍希望你能有所收获。

layui数据表格批量删除

多条件搜索框：注样式自己写 <div class="demoTable" style="width: 968px;  margin:20px auto;color: #7185a2">     流水号：     <div class="layui-inline">      <input class="layui-input" name="FlowNumber" id="FlowNumber" autocomplete="off" >     </div>     账号：     <div class="layui-inline">      <input class="layui-input" name="UserName" id="UserName" autocomplete="off" >     </div>     咨询主题：     <div class="layui-inline">      <input class="layui-input" name="Topic" id="Topic" autocomplete="off" >     </div>     时间：     <div class="layui-inline">      <input class="layui-input" name="Time" id="Time" autocomplete="off" >     </div>     <button class="layui-btn" data-type="reload" >搜索</button>    </div> 删除按钮  <button class="layui-btn" data-type="getCheckData" >批量删除</button>  <table id="dataProject" class="layui-table" lay-filter="test"></table> <!--数据表格渲染-->

<script>  layui.use(['table','laydate'], function(){   var table = layui.table;     laydate = layui.laydate;   //第一个实例   laydate.render({    elem: '#Time'    ,theme: '#7185a2'   });   table.render({    elem: '#dataProject' //渲染dom    ,url: './json/servertheme.json' //数据接口    ,request:{     pageName: 'page' //页码的参数名称，默认：page     ,limitName: 'size' //每页数据量的参数名，默认：limit    }    ,response: {     statusName: 'code' //数据状态的字段名称，默认：code     ,statusCode: 0 //成功的状态码，默认：0     ,msgName: '' //状态信息的字段名称，默认：msg     ,countName: 'count' //数据总数的字段名称，默认：count     ,dataName: 'data' //数据列表的字段名称，默认：data    }    ,cols: [[ //表头 //    {field: 'projectId', title: 'ID', width:10}     {type: 'checkbox', fixed: 'left'}     ,{field: 'FlowNumber', title: '流水号', width:91}     ,{field: 'UserName', title: '账号',width:103}     ,{field: 'projectName', title: '咨询主题',width:146}     ,{field: 'projectShiXiang', title: '涉及事项',width:136}     ,{field: 'time', title: '咨询时间',width:140}     ,{field: 'state', title: '状态',width:87}     ,{field: 'operation', title: '操作',toolbar:'#barDemo',width:140}    ]]    ,page: { //支持传入 laypage 组件的所有参数（某些参数除外，如：jump/elem） - 详见文档     layout: [ 'prev', 'page', 'next', 'skip', 'count'] //自定义分页布局     ,groups: 3 //只显示 1 个连续页码     ,first: '首页' //不显示首页     ,last: '尾页' //不显示尾页     ,theme: '#7185a2'    }    ,id: 'testReload'    ,limit:6   });   table.on('tool(test)', function(obj) {//申报按钮    var data = obj.data;    var dataTitle =data.projectName;    if(obj.event ==="lookProject"){     var url='serverInfo.html'     //弹框部分     layer.open({      type: 2,      title:'查看——'+dataTitle,      shadeClose: true,      shade: 0.8,      offset:"100px",      move:false,      resize:false,      scrollbar:false,      area: ['700px', '150px'],      content:[url]     })    }else if(obj.event ==="del"){     var projectId = data.projectId;    }   })   var $ = layui.$, active = {   //注释：layui 搜索模块 Start    reload: function(){     var FlowNumber = $('#FlowNumber').val();     var UserName = $('#UserName').val();     var Topic = $('#Topic').val();     var Time = $('#Time').val();     table.reload('testReload', {      page: {       curr: 1      }      ,where: {         FlowNumber: FlowNumber        ,UserName: UserName        ,Topic: Topic        ,Time: Time      }     });    },  //注释：layui 搜索模块 End  //注释：layui 批量删除 Start    getCheckData:function(){     var checkStatus = table.checkStatus('testReload');// table.checkStatus是Layui中自带，id: 'testReload'可自定义     if(checkStatus.data.length==0){      parent.layer.msg('请先选择要删除的数据行！', {icon: 2});      return ;     }     var codeId= "";     for(var i=0;i<checkStatus.data.length;i++){      codeId += checkStatus.data[i].id+",";     }     parent.layer.msg('删除中...', {icon: 16,shade: 0.3,time:5000}); //    注释：把删除接口替换成url,http:///www.baidu.com只是案例地址   layer.confirm("您确定要删除吗？"+codeId,function(){      $.ajax({       type:"POST",       url: './json/servertheme.json',       data:{"id":codeId},       success:function (data) {        layer.closeAll('loading');        if(data.code==1){         parent.layer.msg('删除成功！', {icon: 1,time:2000,shade:0.2});         location.reload(true);        }else{         parent.layer.msg('删除失败！', {icon: 2,time:3000,shade:0.2});        }       }      })     })   };    //注释：layui 批量删除 End   //通用按钮   $('.layui-btn').on('click', function(){    var type = $(this).data('type');    active[type] ? active[type].call(this) : '';   });  }); </script>

layui是什么

layui是一款采用自身模块规范编写的前端UI框架，它遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，适合新手，并且它还提供了丰富的内置模块，他们皆可通过模块化的方式按需加载，从核心代码到API的每一处细节都经过精心雕琢，非常适合界面的快速开发，能够作为PC网页端后台系统与前台界面的速成开发方案。

上述内容就是利用Layui 怎么批量删除数据表格，你们学到知识或技能了吗？如果还想学到更多技能或者丰富自己的知识储备，欢迎关注亿速云行业资讯频道。