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 相关文章推荐
如何用javascript去掉字符串里的所有空格
Feb 08 Javascript
JQuery实现倒计时按钮的实现代码
Mar 23 Javascript
JavaScript中的私有/静态属性介绍
Jul 26 Javascript
JS+DIV+CSS实现仿表单下拉列表效果
Aug 18 Javascript
jQuery 1.9.1源码分析系列(十)事件系统之绑定事件
Nov 19 Javascript
在nginx上部署vue项目(history模式)的方法
Dec 28 Javascript
webpack+vue-cil中proxyTable处理跨域的方法
Jul 20 Javascript
JS实现随机生成10个手机号的方法示例
Dec 07 Javascript
小程序红包雨的实现示例
Feb 19 Javascript
详解js根据百度地图提供经纬度计算两点距离
May 13 Javascript
微信小程序如何实现radio单选框单击打勾和取消
Jan 21 Javascript
微信小程序单选框自定义赋值
May 26 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中Session的概念
2006/10/09 PHP
关于PHP模板Smarty的初级使用方法以及心得分享
2013/06/21 PHP
解析php5配置使用pdo
2013/07/03 PHP
PHP正则替换函数preg_replace和preg_replace_callback使用总结
2014/09/22 PHP
php版微信自动获取收货地址api用法示例
2016/09/22 PHP
PHP静态成员变量
2017/02/14 PHP
PHP中$GLOBALS['HTTP_RAW_POST_DATA']和$_POST的区别分析
2017/07/03 PHP
Laravel如何实现自动加载类
2019/10/14 PHP
php中使用array_filter()函数过滤数组实例讲解
2021/03/03 PHP
javascript 数组学习资料收集
2010/04/11 Javascript
文件编码导致jquery失效的解决方法
2013/06/26 Javascript
Jquery中ajax方法data参数的用法小结
2014/02/12 Javascript
简介JavaScript中valueOf()方法的使用
2015/06/05 Javascript
gameboy网页闯关游戏(riddle webgame)--仿微信聊天的前端页面设计和难点
2016/02/21 Javascript
jQuery1.9+中删除了live以后的替代方法
2016/06/17 Javascript
AngularJS页面带参跳转及参数解析操作示例
2017/06/28 Javascript
angular中不同的组件间传值与通信的方法
2017/11/04 Javascript
vue 组件的封装之基于axios的ajax请求方法
2018/08/11 Javascript
详解在Javascript中进行面向切面编程
2019/04/28 Javascript
微信小程序Page中data数据操作和函数调用方法
2019/05/08 Javascript
JavaScript 双向链表操作实例分析【创建、增加、查找、删除等】
2020/04/28 Javascript
vscode 调试 node.js的方法步骤
2020/09/15 Javascript
解决Vue项目中tff报错的问题
2020/10/21 Javascript
Python内置函数之filter map reduce介绍
2014/11/30 Python
python中的闭包用法实例详解
2015/05/05 Python
Python开发之快速搭建自动回复微信公众号功能
2016/04/22 Python
python 读写中文json的实例详解
2017/10/29 Python
python selenium自动上传有赞单号的操作方法
2018/07/05 Python
在python中获取div的文本内容并和想定结果进行对比详解
2019/01/02 Python
python使用Thread的setDaemon启动后台线程教程
2020/04/25 Python
荷兰时尚精品店:Labels Fashion
2020/03/22 全球购物
初入社会应届生求职信
2013/11/18 职场文书
中学劳技课教师的自我评价
2014/02/05 职场文书
2015年社区中秋节活动总结
2015/03/23 职场文书
2015年派出所工作总结
2015/04/24 职场文书
《巨人的花园》教学反思
2016/02/19 职场文书