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 相关文章推荐
计算世界完全对称日的js代码,粗糙版
Nov 04 Javascript
js判断变量是否未定义的代码
Mar 28 Javascript
JS不间断向上滚动效果代码
Dec 25 Javascript
使用原生js实现页面蒙灰(mask)效果示例代码
Jun 20 Javascript
Javascript闭包用法实例分析
Jan 23 Javascript
轻松使用jQuery双向select控件Bootstrap Dual Listbox
Dec 13 Javascript
JavaScript代码性能优化总结篇
May 15 Javascript
js判断登陆用户名及密码是否为空的简单实例
May 16 Javascript
jQuery使用zTree插件实现可拖拽的树示例
Sep 23 jQuery
如何抽象一个Vue公共组件
Oct 17 Javascript
Node4-5静态资源服务器实战以及优化压缩文件实例内容
Aug 29 Javascript
js使用文档就绪函数动态改变页面内容示例【innerHTML、innerText】
Nov 07 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制作静态网站的模板框架(三)
2006/10/09 PHP
PHP实现简单的新闻发布系统实例
2015/07/28 PHP
PHP使用缓存即时输出内容(output buffering)的方法
2015/08/03 PHP
Smarty日期时间操作方法示例
2016/11/15 PHP
PHP中Laravel 关联查询返回错误id的解决方法
2017/04/01 PHP
jquery获得下拉框值的代码
2011/08/13 Javascript
基于jquery的一个拖拽到指定区域内的效果
2011/09/21 Javascript
jQuery.extend 函数详解
2012/02/03 Javascript
JavaScript实现检查页面上的广告是否被AdBlock屏蔽了的方法
2014/11/03 Javascript
Bootstrap实现的经典栅格布局效果实例【附demo源码】
2017/03/30 Javascript
jquery平滑滚动到顶部插件使用详解
2017/05/08 jQuery
JS常见DOM节点操作示例【创建 ,插入,删除,复制,查找】
2018/05/14 Javascript
对mac下nodejs 更新到最新版本的最新方法(推荐)
2018/05/17 NodeJs
mock.js实现模拟生成假数据功能示例
2019/01/15 Javascript
利用Angular7开发一个Radio组件的全过程
2019/07/11 Javascript
jsonp格式前端发送和后台接受写法的代码详解
2019/11/07 Javascript
JavaScript实现轮播图片完整代码
2020/03/07 Javascript
iview实现图片上传功能
2020/06/29 Javascript
Vue项目前后端联调(使用proxyTable实现跨域方式)
2020/07/18 Javascript
原生js 实现表单验证功能
2021/02/08 Javascript
python返回昨天日期的方法
2015/05/13 Python
Python 专题六 局部变量、全局变量global、导入模块变量
2017/03/20 Python
vivo智能手机官方商城:vivo
2016/09/22 全球购物
英国高级百货公司:Harvey Nichols
2017/01/29 全球购物
Rodd & Gunn澳大利亚官网:新西兰男装品牌
2018/09/25 全球购物
BLACKMORES澳洲官网:澳大利亚排名第一的保健品牌
2018/09/27 全球购物
PHP解析URL是哪个函数?怎么用?
2013/05/09 面试题
大学本科毕业生的自我鉴定范文
2013/11/19 职场文书
银行见习期自我鉴定
2014/01/29 职场文书
中介业务员岗位职责
2014/04/09 职场文书
三八妇女节趣味活动方案
2014/08/23 职场文书
房屋租赁合同解除协议书
2014/10/11 职场文书
入股合作协议书
2014/10/12 职场文书
银行贷款收入证明
2014/10/17 职场文书
2015年留守儿童工作总结
2015/05/22 职场文书
2019关于垃圾分类处理的调查报告
2019/12/26 职场文书