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" style="height:30px;border:1px solid #7185a2">
   </div>
   账号：
   <div class="layui-inline">
    <input class="layui-input" name="UserName" id="UserName" autocomplete="off" style="height:30px;border:1px solid #7185a2">
   </div>
   咨询主题：
   <div class="layui-inline">
    <input class="layui-input" name="Topic" id="Topic" autocomplete="off" style="height:30px;border:1px solid #7185a2">
   </div>
   时间：
   <div class="layui-inline">
    <input class="layui-input" name="Time" id="Time" autocomplete="off" style="height:30px;border:1px solid #7185a2">
   </div>

<button class="layui-btn" data-type="reload" style="height:30px;background:#7185a2;line-height:30px;">搜索</button>

</div>
删除按钮
<button class="layui-btn" data-type="getCheckData" style="background:#7185a2">批量删除</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>

来源：https://blog.csdn.net/u014012093/article/details/83341850