首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

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+缓存选中项数据的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持三水点靠木。

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

- Author -

```...简单点

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
经常用到的JavasScript事件的翻译
Apr 09 Javascript
Javascript new关键字的玄机 以及其它
Aug 25 Javascript
使用JavaScript获取电池状态的方法
May 03 Javascript
jQuery插件Elastislide实现响应式的焦点图无缝滚动切换特效
Apr 12 Javascript
js实现非常简单的焦点图切换特效实例
May 07 Javascript
Javascript实现div层渐隐效果的方法
May 30 Javascript
JQuery实现超链接鼠标提示效果的方法
Jun 10 Javascript
简单实现JS对dom操作封装
Dec 02 Javascript
jQuery实现经典的网页3D轮播图封装功能【附源码下载】
Feb 15 jQuery
Vue实现多标签选择器
Nov 28 Javascript
解决Vue 刷新页面导航显示高亮位置不对问题
Dec 25 Javascript
微信小程序以7天为周期连续签到7天功能效果的示例代码
Aug 20 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
广告词(105) 意向书(73) 竞聘书(31) 担保书(46) 聘任书(31) 主持词(345) 承诺书(369) 公证书(45) 建议书(203) 委托书(259)
You might like
轻松入门: 煮好咖啡的七个诀窍
2021/03/03 冲泡冲煮
2.PHP入门
2006/10/09 PHP
php中base_convert()进制数字转换函数实例
2014/11/20 PHP
php表单提交实例讲解
2015/11/12 PHP
PHP在弹框中获取foreach中遍历的id值并传递给地址栏
2017/06/13 PHP
PHP多线程模拟实现秒杀抢单
2018/02/07 PHP
PHP+Redis事务解决高并发下商品超卖问题(推荐)
2020/08/03 PHP
JQUERY的属性选择符和自定义选择符使用方法（二）
2011/04/07 Javascript
高性能Javascript笔记 数据的存储与访问性能优化
2012/08/02 Javascript
JavaScript将字符串转换为整数的方法
2015/04/14 Javascript
node.js require() 源码解读
2015/12/13 Javascript
Bootstrap框架下下拉框select搜索功能
2020/03/26 Javascript
jquery网页日历显示控件calendar3.1使用详解
2016/11/24 Javascript
js仿iphone秒表功能 计算平均数
2017/01/11 Javascript
jQuery基本选择器和层次选择器学习使用
2017/02/27 Javascript
JavaScript验证知识整理
2017/03/24 Javascript
ES6入门教程之Iterator与for...of循环详解
2017/05/17 Javascript
Javascript实现从小到大的数组转换成二叉搜索树
2017/06/13 Javascript
使用vue中的v-for遍历二维数组的方法
2018/03/07 Javascript
封装 axios+promise通用请求函数操作
2020/08/11 Javascript
使用Python3编写抓取网页和只抓网页图片的脚本
2015/08/20 Python
用python实现的线程池实例代码
2018/01/06 Python
Numpy 改变数组维度的几种方法小结
2018/08/02 Python
python单向链表的基本实现与使用方法【定义、遍历、添加、删除、查找等】
2019/10/24 Python
python实现12306登录并保存cookie的方法示例
2019/12/17 Python
快速查找Python安装路径方法
2020/02/06 Python
基于PyInstaller各参数的含义说明
2021/03/04 Python
CSS3盒子模型详解
2013/04/24 HTML / CSS
丝芙兰加拿大官方网站：SEPHORA加拿大
2018/11/20 全球购物
2014年道德讲堂实施方案
2014/03/05 职场文书
《中国梦我的梦》大学生演讲稿
2014/08/20 职场文书
2014年校务公开工作总结
2014/12/18 职场文书
期末复习计划
2015/01/19 职场文书
2015幼儿园新学期寄语
2015/02/27 职场文书
农村结婚典礼主持词
2015/06/29 职场文书
土木工程生产实习心得体会
2016/01/22 职场文书