Layui 数据表格批量删除和多条件搜索的实例


Posted in Javascript onSeptember 04, 2019

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>

以上这篇Layui 数据表格批量删除和多条件搜索的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery页面滚动浮动层智能定位实例代码
Aug 23 Javascript
JavaScript使用二分查找算法在数组中查找数据的方法
Apr 07 Javascript
js实现完美兼容各大浏览器的人民币大小写相互转换
Oct 29 Javascript
jquery+json实现数据二级联动的方法
Nov 28 Javascript
jQuery过滤特殊字符及JS字符串转为数字
May 26 Javascript
jQuery获取file控件中图片的宽高与大小
Aug 04 Javascript
js实现点击图片自动提交action的简单方法
Oct 16 Javascript
微信小程序 欢迎界面开发的实例详解
Nov 30 Javascript
Javascript ES6中数据类型Symbol的使用详解
May 02 Javascript
vue使用技巧及vue项目中遇到的问题
Jun 04 Javascript
Nuxt.js实战和配置详解
Aug 05 Javascript
浅谈JS中this在各个场景下的指向
Aug 14 Javascript
解决layui表格的表头不滚动的问题
Sep 04 #Javascript
解决layui数据表格table的横向滚动条显示问题
Sep 04 #Javascript
微信小程序tab切换可滑动切换导航栏跟随滚动实现代码
Sep 04 #Javascript
微信小程序JS加载esmap地图的实例详解
Sep 04 #Javascript
深入浅出vue图片路径的实现
Sep 04 #Javascript
webpack 如何解析代码模块路径的实现
Sep 04 #Javascript
layui使用button按钮 点击出现弹层 弹层中加载表单的实例
Sep 04 #Javascript
You might like
php计算数组不为空元素个数的方法
2014/01/27 PHP
zf框架的registry(注册表)使用示例
2014/03/13 PHP
php设计模式之简单工厂模式详解
2014/09/04 PHP
微信公众平台开发教程⑤ 微信扫码支付模式介绍
2019/04/10 PHP
laravel http 自定义公共验证和响应的方法
2019/09/29 PHP
Laravel 5.5 异常处理 &amp; 错误日志的解决
2019/10/17 PHP
使弱类型的语言JavaScript变强势
2009/06/22 Javascript
JavaScript与DropDownList 区别分析
2010/01/01 Javascript
JavaScript中实现块作用域的方法
2010/04/01 Javascript
js获取url参数代码实例分享(JS操作URL)
2013/12/13 Javascript
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
2014/04/03 Javascript
JavaScript实现仿淘宝商品购买数量的增减效果
2016/01/22 Javascript
jQuery轮播图效果精简版完整示例
2016/09/04 Javascript
Angular4 反向代理Details实践
2018/05/30 Javascript
详解vue服务端渲染浏览器端缓存(keep-alive)
2018/10/12 Javascript
详解JavaScript的this指向和绑定
2020/09/08 Javascript
vue3.0中友好使用antdv示例详解
2021/01/05 Vue.js
[44:41]Fnatic vs Liquid 2018国际邀请赛小组赛BO2 第二场 8.16
2018/08/17 DOTA
Python3基础之基本运算符概述
2014/08/13 Python
在Python的Flask框架中使用模版的入门教程
2015/04/20 Python
Python多线程爬虫简单示例
2016/03/04 Python
python在线编译器的简单原理及简单实现代码
2018/02/02 Python
python爬虫刷访问量 2019 7月
2019/08/01 Python
Python+Tensorflow+CNN实现车牌识别的示例代码
2019/10/11 Python
解决tensorflow训练时内存持续增加并占满的问题
2020/01/19 Python
多个版本的python共存时使用pip的正确做法
2020/10/26 Python
在IE6系列等老式浏览器中使用HTML5的新标签实现方案
2012/12/25 HTML / CSS
澳洲在线厨具商店:Kitchen Style
2018/05/05 全球购物
Gtech官方网站:地毯清洁器、吸尘器及园艺设备
2018/05/23 全球购物
销售部主管岗位职责
2013/12/18 职场文书
销售总经理岗位职责
2014/03/15 职场文书
学生违纪检讨书200字
2014/10/21 职场文书
八达岭长城导游词
2015/01/30 职场文书
2015年政协委员工作总结
2015/05/20 职场文书
团队合作精神学习心得体会
2016/01/19 职场文书
Nginx 安装SSL证书完成HTTPS部署
2022/04/28 Servers