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 Select操作方法集合脚本之家特别版
May 17 Javascript
form表单中去掉默认的enter键提交并绑定js方法实现代码
Apr 01 Javascript
js中prototype用法详细介绍
Nov 14 Javascript
javascript制作的滑动图片菜单
May 15 Javascript
javascript判断网页是关闭还是刷新
Sep 12 Javascript
jQuery实现宽屏图片轮播实例教程
Nov 24 Javascript
使用jQuery制作浮动工具栏的实例分享
May 13 Javascript
如何在 Vue.js 中使用第三方js库
Apr 25 Javascript
vue之父子组件间通信实例讲解(props、$ref、$emit)
May 22 Javascript
Node.js中你不可不精的Stream(流)
Jun 08 Javascript
微信小程序列表时间戳转换实现过程解析
Oct 12 Javascript
一篇文章弄清楚Ajax请求的五个步骤
Mar 17 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脚本的10个技巧(6)
2006/10/09 PHP
php中定时计划任务的实现原理
2013/01/08 PHP
PHP时间戳 strtotime()使用方法和技巧
2013/10/29 PHP
VB中的RasEnumConnections函数返回632错误解决方法
2014/07/29 PHP
laravel清除视图缓存的代码
2019/10/23 PHP
PHP使用PDO 连接与连接管理操作实例分析
2020/04/21 PHP
javascript 鼠标滚轮事件
2009/04/09 Javascript
基于jquery的从一个页面跳转到另一个页面的指定位置的实现代码(带平滑移动的效果)
2011/05/24 Javascript
《JavaScript高级程序设计》阅读笔记(一) ECMAScript基础
2012/02/27 Javascript
jquery实现的带缩略图的焦点图片切换(自动播放/响应鼠标动作)
2013/01/23 Javascript
简洁Ajax函数处理(示例代码)
2013/11/15 Javascript
什么是cookie?js手动创建和存储cookie
2014/05/27 Javascript
基于jQuery Circlr插件实现产品图片360度旋转
2015/09/20 Javascript
JS中mouseover和mouseout多次触发问题如何解决
2016/06/06 Javascript
Vue + Webpack + Vue-loader学习教程之相关配置篇
2017/03/14 Javascript
深入理解Angular.JS中的Scope继承
2017/06/04 Javascript
浅谈关于angularJs中使用$.ajax的注意点
2017/08/12 Javascript
JavaScript 保护变量不被随意修改的实现代码
2017/09/27 Javascript
使用Bootstrap做一个朝代历史表
2019/12/10 Javascript
python编程开发之日期操作实例分析
2015/11/13 Python
Python基于ThreadingTCPServer创建多线程代理的方法示例
2018/01/11 Python
python实现用户答题功能
2018/01/17 Python
python中for用来遍历range函数的方法
2018/06/08 Python
对pandas中iloc,loc取数据差别及按条件取值的方法详解
2018/11/06 Python
Django使用AJAX调用自己写的API接口的方法
2019/03/06 Python
python获取linux系统信息的三种方法
2020/10/14 Python
python中操作文件的模块的方法总结
2021/02/04 Python
英国高级健康和美容产品零售商:Life and Looks
2019/08/01 全球购物
学习自我鉴定
2014/02/01 职场文书
2014年大学生预备党员思想汇报1000字
2014/09/13 职场文书
大学生职业生涯十年规划书范文
2014/09/17 职场文书
2015届本科毕业生自我鉴定
2014/09/27 职场文书
写给纪委的违纪检讨书
2015/05/05 职场文书
工作汇报材料难写?方法都在这里了!
2019/07/01 职场文书
Nginx的rewrite模块详解
2021/03/31 Servers
Python可视化神器pyecharts之绘制箱形图
2022/07/07 Python