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 相关文章推荐
让GoogleCode的SVN下的HTML文件在FireFox下正常显示.
May 25 Javascript
鼠标右击事件代码(asp.net后台)
Jan 27 Javascript
JS文本框追加多个下拉框的值的简单实例
Jul 12 Javascript
innerHTML,outerHTML,innerText,outerText的用法及区别解析
Dec 16 Javascript
JavaScript获取路径设计源码
May 22 Javascript
js显示文本框提示文字的方法
May 07 Javascript
javascript实现查找数组中最大值方法汇总
Feb 13 Javascript
浅析Javascript ES6新增值比较函数Object.is
Aug 24 Javascript
jquery mobile移动端幻灯片滑动切换效果
Apr 15 Javascript
浅谈vue的踩坑路
Aug 31 Javascript
详解VUE中常用的几种import(模块、文件)引入方式
Jul 03 Javascript
js实现小星星游戏
Mar 23 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
NO3第三帝国留言簿制作过程
2006/10/09 PHP
PHP中simplexml_load_string函数使用说明
2011/01/01 PHP
php中将html中的br换行符转换为文本输入中的换行符
2013/03/26 PHP
php新浪微博登录接口用法实例
2014/12/23 PHP
php验证邮箱和ip地址最简单方法汇总
2015/10/30 PHP
jQuery解决iframe高度自适应代码
2009/12/20 Javascript
HTML中的setCapture和releaseCapture使用介绍
2012/03/21 Javascript
js算法中的排序、数组去重详细概述
2013/10/14 Javascript
JS实现简洁、全兼容的拖动层实例
2015/05/13 Javascript
js实现仿微博滚动显示信息的效果
2015/12/21 Javascript
js实现鼠标左右移动,图片也跟着移动效果
2017/01/25 Javascript
vue.js实例todoList项目
2017/07/07 Javascript
AngularJS上传文件的示例代码
2018/11/10 Javascript
vue-cli history模式实现tomcat部署报404的解决方式
2019/09/06 Javascript
javascript开发实现贪吃蛇游戏
2020/07/31 Javascript
在Angular项目使用socket.io实现通信的方法
2021/01/05 Javascript
Python魔术方法详解
2015/02/14 Python
Python采集代理ip并判断是否可用和定时更新的方法
2018/05/07 Python
Python判断字符串是否为字母或者数字(浮点数)的多种方法
2018/08/03 Python
python把1变成01的步骤总结
2019/02/27 Python
python pandas利用fillna方法实现部分自动填充功能
2020/03/16 Python
解决python的空格和tab混淆而报错的问题
2021/02/26 Python
css3 线性渐变和径向渐变示例附图
2014/04/08 HTML / CSS
怀俄明州飞钓:Platte River Fly Shop
2017/12/28 全球购物
必须要使用游标的SQL语句有那些
2012/05/07 面试题
网络维护管理员的自我评价分享
2013/11/11 职场文书
求职信模板怎么做
2014/01/26 职场文书
教师岗位聘任书范文
2014/03/29 职场文书
国际贸易毕业生求职信
2014/07/20 职场文书
教师作风整顿个人剖析材料
2014/10/10 职场文书
市委常委会班子党的群众路线教育实践活动整改方案
2014/10/25 职场文书
学习党章的体会
2014/11/07 职场文书
质检员岗位职责
2015/02/03 职场文书
2015年团队工作总结范文
2015/05/04 职场文书
MySQL不使用order by实现排名的三种思路总结
2021/06/02 MySQL
避坑之 JavaScript 中的toFixed()和正则表达式
2022/04/19 Javascript