layui中数据表格+分页+搜索+checkbox+缓存选中项数据的示例分析

这篇文章主要介绍了layui中数据表格+分页+搜索+checkbox+缓存选中项数据的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

主要功能是使用数据表格, 做分页,做搜索, 还有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 " >  <button class="layui-btn" id="searchEmailCompany" data-type="reload">   <i class="layui-icon" ></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" >        <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":"" }

//效果:

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+缓存选中项数据的示例分析”这篇文章对大家有帮助，同时也希望大家多多支持亿速云，关注亿速云行业资讯频道，更多相关知识等着你来学习!