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闭包
Dec 14 Javascript
基于jquery扩展漂亮的下拉框可以二次修改
Nov 19 Javascript
js定时调用方法成功后并停止调用示例
Apr 08 Javascript
table行随鼠标移动变色示例
May 07 Javascript
JavaScript中的getMilliseconds()方法使用详解
Jun 10 Javascript
AngularJS页面传参的5种方式
Apr 01 Javascript
详细介绍RxJS在Angular中的应用
Sep 23 Javascript
Vue Router的懒加载路径的解决方法
Jun 21 Javascript
原生javascript实现连连看游戏
Jan 03 Javascript
JS实现根据数组对象的某一属性排序操作示例
Jan 14 Javascript
vue+element+Java实现批量删除功能
Apr 08 Javascript
es6函数之rest参数用法实例分析
Apr 18 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
Zend 输出产生XML解析错误
2009/03/03 PHP
ThinkPHP模板判断输出Defined标签用法详解
2014/06/30 PHP
php生成不重复随机数、数组的4种方法分享
2015/03/30 PHP
php文件上传的两种实现方法
2016/04/04 PHP
一些常用的JavaScript函数(json)附详细说明
2011/05/25 Javascript
JavaScript极简入门教程(三):数组
2014/10/25 Javascript
Linux下使用jq友好的打印JSON技巧分享
2014/11/18 Javascript
jQuery插件jRumble实现网页元素抖动
2015/06/05 Javascript
jQuery表单验证插件解析(推荐)
2016/07/21 Javascript
基于BootStrap栅格栏系统完成网站底部版权信息区
2016/12/23 Javascript
详解Vue2 SSR 缓存 Api 数据
2017/11/20 Javascript
Layui实现带查询条件的分页
2019/07/27 Javascript
Vue登录拦截 登录后继续跳转指定页面的操作
2020/08/04 Javascript
JQuery使用数组遍历跳出each循环
2020/09/01 jQuery
[04:13]2014DOTA2国际邀请赛 专访DC目前形势不容乐观
2014/07/12 DOTA
[06:24]DOTA2亚洲邀请赛小组赛第三日 TOP10精彩集锦
2015/02/01 DOTA
使用Pyrex来扩展和加速Python程序的教程
2015/04/13 Python
Python基于更相减损术实现求解最大公约数的方法
2018/04/04 Python
python如何生成网页验证码
2018/07/28 Python
在python中只选取列表中某一纵列的方法
2018/11/28 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
Python实现病毒仿真器的方法示例(附demo)
2020/02/19 Python
萨克斯第五大道精品百货店: Saks Fifth Avenue
2017/04/28 全球购物
Topshop美国官网:英国快速时尚品牌
2019/05/16 全球购物
施华洛世奇波兰官网:SWAROVSKI波兰
2019/06/18 全球购物
日语求职信范文
2013/12/17 职场文书
护士进修自我鉴定
2014/02/07 职场文书
大学生找工作求职信
2014/07/09 职场文书
科级干部群众路线教育实践活动对照检查材料思想汇报
2014/09/20 职场文书
防灾减灾宣传标语
2014/10/07 职场文书
汽车车尾标语大全
2015/08/11 职场文书
CSS 使用 resize 实现图片拖拽切换预览功能(强大功能)
2021/08/23 HTML / CSS
idea下配置tomcat避坑详解
2022/04/12 Servers
实现GO语言对数组切片去重
2022/04/20 Golang
分享node.js实现简单登录注册的具体代码
2022/04/26 NodeJs
python绘制云雨图raincloud plot
2022/08/05 Python