layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法


Posted in Javascript onSeptember 21, 2019

在做数据表格的时候遇到了很多坑, 今天整理一下方便以后使用.

主要功能是使用数据表格, 做分页,做搜索, 还有checkbox, 支持全选.

当选中一些数据的时候, 数据切换页面数据在切换回来后,选中状态就消失了, 我们希望切换回来的时候, 选中状态还能存在, 因此做了个缓存, 使checkbox 保持选中状态.代码如下:

1.HTML 搜索输入框

<form class="layui-form">
 <div class="layui-input-inline">
  <input type="tel" name="searContent" autocomplete="off"
    placeholder="姓名/手机/身份证" class="layui-input">
 </div>
</form>

2.HTML 搜索按钮

<div class="layui-input-inline " style="width: 90px">
 <button class="layui-btn" id="searchEmailCompany" data-type="reload">
  <i class="layui-icon" style="font-size: 20px; ">?</i> 搜索
 </button>
</div>

3.HTML table表格

<div class="yys-fluid yys-wrapper">
  <div class="layui-row lay-col-space20">
   <div class="layui-cos-xs12 layui-col-sm12 layui-col-md12 layui-col-lg12">
    <section class="yys-body animated rotateInDownLeft">
     <div class="yys-body-content clearfix changepwd">
      <div class="layui-col-lg12 layui-col-md10 layui-col-sm12 layui-col-xs12" style="width:100%">
       <div class="user-tables">
        <table id="userTables" lay-filter="userTables"> </table>
       </div>
      </div>
     </div>
    </section>
   </div>
  </div>
 </div>
</div>

4.HTML 时间格式转换

<script type="text/html" id="TimeTpl">
 {{#
 var parseDate= function(date){
 if(date){
 var t=new Date(date);
 return t.getFullYear()+"-"+(t.getMonth()+1)+"-"+t.getDate()+" "+t.getHours()+":"+t.getMinutes();
 }
 }
 }}
 {{parseDate(d.updateTime)}}
</script>

5. js 功能设定

<script>
 var $ = null;
 layui.use(["jquery", "upload", "form", "table", "layer", "element", "laydate"], function () {
  $ = layui.jquery;
  var element = layui.element,
   layer = layui.layer,
   upload = layui.upload,
   form = layui.form,
   laydate = layui.laydate,
   table = layui.table;
  //记录选中的数据:做缓存使用,作为参数传递给后台,然后生成pdf ,压缩
  var ids =new Array();
  //当前表格中的全部数据:在表格的checkbox全选的时候没有得到数据, 因此用全局存放变量
  var table_data=new Array();
  

 var a = table.render({
   elem: "#userTables",
   skin: 'line', //行边框风格
   cols: [[
    {checkbox: true, width: 60, fixed: true},
    {type: 'numbers', title: '序号', width: '40'},
    {
     field: "name",
     width: 80,
     title: "姓名",
     align: "left"
    }, {
     field: "phone",
     width: 120,
     title: "电话",
     align: "left"
    }, {
     field: "identificationNuber",
     width: 170,
     title: "身份证号码",
     align: "left"
    }, {
     field: "updateTime",
     width: 140,
     title: "更新时间",
     align: "left",
     templet: '#TimeTpl'
    }, {
     title: "常用操作",
     width: 200,
     align: "left",
     toolbar: "#userbar",
     fixed: "right"
    }]],
   url: "/user/getReportList",
//   data: userData,
   page: { //分页设定
    layout: ['count', 'prev', 'page', 'next'] //自定义分页布局
    , curr: 1 //设定初始在第 1 页
    , limit: 10//每页多少数据
    , groups: 5 //只显示 5 个连续页码
   },
   even: true
   ,done: function(res, curr, count){
    //数据表格加载完成时调用此函数
    //如果是异步请求数据方式,res即为你接口返回的信息。
    //如果是直接赋值的方式,res即为:{data: [], count: 99} data为当前页数据、count为数据总长度

     //设置全部数据到全局变量
     table_data=res.data;
 
     //在缓存中找到id ,然后设置data表格中的选中状态
     //循环所有数据,找出对应关系,设置checkbox选中状态
     for(var i=0;i< res.data.length;i++){
      for (var j = 0; j < ids.length; j++) {
       //数据id和要勾选的id相同时checkbox选中
       if(res.data[i].id == ids[j])
       {
        //这里才是真正的有效勾选
        res.data[i]["LAY_CHECKED"]='true';
        //找到对应数据改变勾选样式,呈现出选中效果
        var index= res.data[i]['LAY_TABLE_INDEX'];
        $('.layui-table-fixed-l tr[data-index=' + index + '] input[type="checkbox"]').prop('checked', true);
        $('.layui-table-fixed-l tr[data-index=' + index + '] input[type="checkbox"]').next().addClass('layui-form-checked');
       }
      }
     }
     //设置全选checkbox的选中状态,只有改变LAY_CHECKED的值, table.checkStatus才能抓取到选中的状态
     var checkStatus = table.checkStatus('my-table');
     if(checkStatus.isAll){
      $(' .layui-table-header th[data-field="0"] input[type="checkbox"]').prop('checked', true);
      $('.layui-table-header th[data-field="0"] input[type="checkbox"]').next().addClass('layui-form-checked');
     }
    //得到所有数据
    console.log(res);
    //得到当前页码
    console.log(curr);
    //得到数据总量
    console.log(count);
   }
  });

  //复选框选中监听,将选中的id 设置到缓存数组,或者删除缓存数组
  table.on('checkbox(userTables)', function (obj) {
   if(obj.checked==true){
    if(obj.type=='one'){
     ids.push(obj.data.id);
    }else{
     for(var i=0;i<table_data.length;i++){
      ids.push(table_data[i].id);
     }
    }
   }else{
    if(obj.type=='one'){
     for(var i=0;i<ids.length;i++){
      if(ids[i]==obj.data.id){
       ids.remove(i);
      }
     }
    }else{
     for(var i=0;i<ids.length;i++){
      for(var j=0;j<table_data.length;j++){
       if(ids[i]==table_data[j].id){
        ids.remove(i);
       }
      }
     }
    }
   }
  });

  //搜索加载--数据表格重载
  var $ = layui.$, active = {
   reload: function () {
    //执行重载
    table.reload('userTables', {
     page: {
      curr: 1 //重新从第 1 页开始
     }
     , where: {
      searContent: $("input[name=searContent]").val()
     }
    });
   }
  };


  $('#searchEmailCompany').on('click', function () {
   ids=new Array();
   var type = $(this).data('type');
   active[type] ? active[type].call(this) : '';
  });
  element.init();
 });

//删除数组自定义函数
 Array.prototype.remove=function(dx)
 {
  if(isNaN(dx)||dx>this.length){return false;}
  for(var i=0,n=0;i<this.length;i++)
  {
   if(this[i]!=this[dx])
   {
    this[n++]=this[i]
   }
  }
  this.length-=1
 }
</script>

6. 请求数据格式

//请求的数据格式

{
"code":0,

"count":39,

"data":[


{



"id":57,



"insertTime":1513578156000,



"leaguerId":65,



"phone":"1356***98907",



"status":0,



"updateTime":1513578156000,



"uuid":"7c94e354-cd87-4ea7-bccf-2e115e1cbc49"


},


{



"id":56,



"identificationNuber":"652101**3*",



"insertTime":1513578013000,



"leaguerId":60,



"name":"周*谨",



"phone":"135**907",



"status":0,



"updateTime":1513578037000,



"uuid":"ed91fac6-56f8-4771-aa79-32863a27bf6f"


},


{



"id":55,



"identificationNuber":"42098**",



"insertTime":1513576647000,



"leaguerId":60,



"name":"董*",



"phone":"1356**8908",



"status":0,



"updateTime":1513576729000,



"uuid":"62d58c68-b49f-44f4-b5a3-e8ea629b5d32"


},


{



"id":54,



"identificationNuber":"6501**",



"insertTime":1513576558000,



"leaguerId":60,



"name":"*光",



"phone":"158009**059",



"status":0,



"updateTime":1513576590000,



"uuid":"a65e3880-f44c-44cb-9f78-f7d7bbacee86"


},



{



"id":53,



"identificationNuber":"310114**",



"insertTime":1513576261000,



"leaguerId":60,



"name":"吴*雯",



"phone":"137**5261",



"status":0,



"updateTime":1513576294000,



"uuid":"6a0766f1-da1d-4c55-8bd5-5dd7a6ad7cd3"


},


{



"id":52,



"identificationNuber":"3201**",



"insertTime":1513574849000,



"leaguerId":65,



"name":"*骏",



"phone":"186**9521",



"status":0,



"updateTime":1513574998000,



"uuid":"89f1fddf-d3c2-4a3b-8a13-c501bdb8e22c"


},



{



"id":51,



"insertTime":1513562761000,



"leaguerId":63,



"phone":"15655**110",



"status":0,



"updateTime":1513562761000,



"uuid":"f4a3b875-d15c-423b-836b-9123cde96000"


},


{



"id":49,



"identificationNuber":"4210**",



"insertTime":1513561354000,



"leaguerId":63,



"name":"余*",



"phone":"1527**4673",



"status":0,



"updateTime":1513561843000,



"uuid":"b38a8660-bf74-41b9-b01f-6e79189327a3"


},


{



"id":50,



"insertTime":1513561498000,



"leaguerId":63,



"phone":"186**59965",



"status":0,



"updateTime":1513561498000,



"uuid":"445cd1dc-bd75-4a4e-933d-646e9823647a"


},


{



"id":48,



"insertTime":1513516215000,



"leaguerId":63,



"phone":"1356**8907",



"status":0,



"updateTime":1513516215000,



"uuid":"706851f6-9243-4ea9-97eb-fc8e12c42c77"


}

],

"msg":""
}

//效果:

layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法

7.后台java

(1).controller

/**
 * 获取报告列表
 *
 *@return
 */
@RequestMapping(value = "/getReportList", method = {RequestMethod.GET})
@ResponseBody
public Map getReportList( Integer page , Integer limit ,String searContent) {
 logger.info("获取报告列表");
 if (SecurityUtils.getSubject().isAuthenticated() == false) {
  logger.error("未登录");
  return null;
 }
 System.out.println(searContent);
 Map<Object, Object> mapParameter = new HashedMap();
 mapParameter.put("page", (page-1)*10);
 mapParameter.put("limit", limit);
 mapParameter.put("searContent", searContent);
 try {
  List<Report> vReports=reportService.findReportList(mapParameter);
  Integer count=reportService.findReportListCount(mapParameter);
  Map<Object, Object> map = new HashedMap();
  map.put("code", 0);
  map.put("msg", "");
  map.put("count", count);
  map.put("data", vReports);
  return map;
 } catch (Exception e) {
  logger.error("获取报告列表 错误",e);
 }
 logger.error("获取报告列表");
 return null;
}

(2).Service

@Override
public List<Report> findReportList(Map mapParameter) {
 return reportDao.selectList("findReportList",mapParameter);
}
@Override
public Integer findReportListCount(Map mapParameter) {
 return reportDao.selectOne("findReportCount",mapParameter);
}

(3).mybatis SQL

<!-- 查询所有报告列表 -->
 <select id="findReportList" resultMap="BaseResultMap" parameterType="java.util.Map">
  select * FROM report where status=0
  <if test="searContent!=null ">
   and (
   (name LIKE concat(concat("%",#{searContent}),"%"))
   or (phone LIKE concat(concat("%",#{searContent}),"%"))
   or (identification_nuber LIKE concat(concat("%",#{searContent}),"%"))
   )
  </if>
  ORDER BY update_time DESC limit #{page} , #{limit};
 </select>
 <!-- 查询所有报告列表 总数 -->
<select id="findReportCount" resultType="java.lang.Integer" parameterType="java.util.Map">
  select COUNT(*) FROM report where status=0
 <if test="searContent!=null ">
  and (
  (name LIKE concat(concat("%",#{searContent}),"%"))
  or (phone LIKE concat(concat("%",#{searContent}),"%"))
  or (identification_nuber LIKE concat(concat("%",#{searContent}),"%"))
  )
 </if>
  ;
 </select>

BUG网友解决方案(未测):

//实例
  layui.use(['table','form'], function(){

    var form = layui.form; 
//form监听checkbox事件
  form.on('checkbox', function(obj){ 
  //当前元素
  var data = $(obj.elem);
  //遍历父级tr,取第一个,然后查找第二个td,取值 转换为Number
  var id = Number(data.parents('tr').first().find('td').eq(1).text());
   //选中or未选中
  var check = obj.elem.checked; 
   //复选框状态
  // var checkStatus = table.checkStatus('users');
  //如果选中
  if(check==true){    
  //如果缓存数组存在值
   if(ids.length>0){    
   //id==0便是全选按钮
   if(id==0){  
    //循环当前页面所有数据
    for(var i=0;i<table_data.length;i++){  
     //数据中有不存在于不在缓存中则加入缓存中 isInArray该方法来自common.js
    if(isInArray(ids,table_data[i].id)==false){
      ids.push(table_data[i].id); 
     }
    }    
   }else{
    //单选中的数据不在缓存中则加入缓存中
    if(isInArray(ids,id)==false){
     ids.push(id); 
    }
   }
  //如果缓存数组不存在值 表示第一次添加
  }else{  
   //id==0便是全选按钮
    if(id==0){   
     //循环当前页面所有数据直接加入缓存
     for(var i=0;i<table_data.length;i++){     
      ids.push(table_data[i].id);    
     }
    }else{   
     //单选中的数据加入缓存中
     ids.push(id);     
     }   
  } 
  //取消选中 
  }else{
   //id==0便是全选按钮
   if(id==0){
    //循环当前页面所有数据
    for(var i=0;i<table_data.length;i++){  
     //如果有数据存在与缓存中则删除
     if(isInArray(ids,table_data[i].id)==true){
      //removeByValue该方法来自common.js
      ids.removeByValue(table_data[i].id); 
     }
     }
   }else{
    //如果单选中的数据存在与缓存中则删除
    if(isInArray(ids,id)==true){
     ids.removeByValue(id);
     }
   } 
  }
 }); 

})

//判断数组中是否存在元素 arr数组 value需判断的元素
function isInArray(arr, value) {
 for (var i = 0; i < arr.length; i++) {
  if (value === arr[i]) {
   return true;
  }
 }

 return false;
}

// 数组对象增加删除方法 数组.removeByValue(需删除的值)即可调用
Array.prototype.removeByValue = function(val) {
 for (var i = 0; i < this.length; i++) {
  if (this[i] == val) {
   this.splice(i, 1);
   break;
  }
 }
}

以上这篇layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
JQuery 插件制作实践 xMarquee插件V1.0
Apr 02 Javascript
Jquery之Ajax运用 学习运用篇
Sep 26 Javascript
jQuery点缩略图弹出层显示大图片
Feb 13 Javascript
概述VUE2.0不可忽视的很多变化
Sep 25 Javascript
ajax图片上传,图片异步上传,更新实例
Dec 30 Javascript
微信小程序 Tab页切换更新数据
Jan 05 Javascript
Vue.js基础知识小结
Jan 13 Javascript
JS去除字符串中空格的方法
Feb 14 Javascript
原生js实现简单的焦点图效果实例
Dec 14 Javascript
在vue.js中使用JSZip实现在前端解压文件的方法
Sep 05 Javascript
小程序页面动态配置实现方法
Feb 05 Javascript
javascript中闭包closure的深入讲解
Mar 03 Javascript
Vue插件之滑动验证码
Sep 21 #Javascript
Layui tree 下拉菜单树的实例代码
Sep 21 #Javascript
layui 图片上传+表单提交+ Spring MVC的实例
Sep 21 #Javascript
layui layer select 选择被遮挡的解决方法
Sep 21 #Javascript
layui table 表格模板按钮的实例代码
Sep 21 #Javascript
js实现图片3D轮播效果
Sep 21 #Javascript
layui table动态表头 改变表格头部 重新加载表格的方法
Sep 21 #Javascript
You might like
锁定年轻人的双倍活力 星巴克推出星倍醇即饮浓咖啡
2021/03/03 咖啡文化
优化使用mysql存储session的php代码
2008/01/10 PHP
PHP 面向对象 final类与final方法
2010/05/05 PHP
Yii操作数据库实现动态获取表名的方法
2016/03/29 PHP
浅谈php使用curl模拟多线程发送请求
2019/03/08 PHP
php计数排序算法的实现代码(附四个实例代码)
2020/03/31 PHP
jquery图片轮播插件仿支付宝2013版全屏图片幻灯片
2014/04/03 Javascript
jQuery学习笔记之jQuery构建函数的7种方法
2014/06/03 Javascript
javascript工厂方式定义对象
2014/12/26 Javascript
纯javascript制作日历控件
2015/07/17 Javascript
js获取当前日期时间及其它日期操作汇总
2016/03/08 Javascript
WebApi+Bootstrap+KnockoutJs打造单页面程序
2016/05/16 Javascript
浅谈时钟的生成(js手写简洁代码)
2016/08/20 Javascript
promise处理多个相互依赖的异步请求(实例讲解)
2017/08/03 Javascript
Vue Transition实现类原生组件跳转过渡动画的示例
2017/08/19 Javascript
使用Fullpage插件快速开发整屏翻页的页面
2017/09/13 Javascript
JS脚本加载后执行相应回调函数的操作方法
2018/02/28 Javascript
vue2.0 element-ui中el-select选择器无法显示选中的内容(解决方法)
2018/08/24 Javascript
JS实现盒子跟着鼠标移动及键盘方向键控制盒子移动效果示例
2019/01/29 Javascript
详解element-ui中el-select的默认选择项问题
2019/08/02 Javascript
nodejs语言实现验证码生成功能的示例代码
2019/10/13 NodeJs
详解如何在Javascript中使用Object.freeze()
2020/10/18 Javascript
简单介绍Python的Tornado框架中的协程异步实现原理
2015/04/23 Python
实例讲解Python中global语句下全局变量的值的修改
2016/06/16 Python
python运用pygame库实现双人弹球小游戏
2019/11/25 Python
解决json中ensure_ascii=False的问题
2020/04/03 Python
Python通用唯一标识符uuid模块使用案例
2020/09/10 Python
pandas apply使用多列计算生成新的列实现示例
2021/02/24 Python
美国从事品牌鞋类零售的连锁店:Famous Footwear
2016/08/25 全球购物
HolidayLettings英国:预订最好的度假公寓、别墅和自助式住宿
2019/08/27 全球购物
.NET是怎么支持多种语言的
2015/02/24 面试题
班班通项目实施方案
2014/02/25 职场文书
2015年财政局工作总结
2015/05/21 职场文书
2015年学校团委工作总结
2015/05/26 职场文书
2016年万圣节活动总结
2016/04/05 职场文书
Android使用EventBus发送消息,Fragment中接收消息的方法会执行多次
2022/04/24 Java/Android