首页
所有分类
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 相关文章推荐
关于实现代码语法标亮 dp.SyntaxHighlighter
Feb 02 Javascript
对xmlHttp对象的理解
Jan 17 Javascript
js点击页面其它地方将某个显示的DIV隐藏
Jul 12 Javascript
Jquery validation remote 验证的缓存问题解决方法
Mar 25 Javascript
jQuery实现可展开合拢的手风琴面板菜单
Sep 15 Javascript
JS+CSS实现带小三角指引的滑动门效果
Sep 22 Javascript
jQuery实现页面顶部显示的进度条效果完整实例
Dec 09 Javascript
jQuery回调方法使用示例
Jun 26 jQuery
详解vue express启动数据服务
Jul 05 Javascript
详解使用nvm安装node.js
Jul 18 Javascript
详解如何在项目中使用jest测试react native组件
Feb 09 Javascript
小程序兼容安卓和IOS数据处理问题及坑
Sep 18 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
保养(1) KDKA(1) 广播(8) 无线电(12) 立体声(1) Harman Kardon(1) 电台频率(32) 长波(3) 收音机(62) 短波(8)
You might like
php文件操作实例代码
2012/05/10 PHP
PHP爆绝对路径方法收集整理
2012/09/17 PHP
PHP编写简单的App接口
2016/08/28 PHP
PHP删除数组中指定值的元素常用方法实例分析【4种方法】
2018/08/21 PHP
PHP htmlspecialchars() 函数实例代码及用法大全
2018/09/18 PHP
laravel 实现上传图片到本地和前台访问示例
2019/10/21 PHP
ie6下png图片背景不透明的解决办法使用js实现
2013/01/11 Javascript
Javascript Web Slider 焦点图示例源码
2013/10/10 Javascript
jQuery 快速结束当前正在执行的动画
2013/11/20 Javascript
JS的encodeURI和java的URLDecoder.decode使用介绍
2014/05/08 Javascript
浅谈bootstrap源码分析之scrollspy(滚动侦听)
2016/06/06 Javascript
jQuery获取元素父节点的方法
2016/06/21 Javascript
实例讲解JavaScript中call、apply、bind方法的异同
2016/09/13 Javascript
easyui导出excel无法弹出下载框的快速解决方法
2016/11/10 Javascript
详解webpack 入门总结和实践(按需异步加载，css单独打包，生成多个入口文件)
2017/06/20 Javascript
jQuery 禁止表单用户名、密码自动填充功能
2017/10/30 jQuery
Element-ui tree组件自定义节点使用方法代码详解
2018/09/17 Javascript
Vue.js更改调试地址端口号的实例
2018/09/19 Javascript
JS获取当前时间戳方法解析
2020/08/29 Javascript
Python常用随机数与随机字符串方法实例
2015/04/09 Python
Python PyQt5实现的简易计算器功能示例
2017/08/23 Python
python3 实现一行输入,空格隔开的示例
2018/11/14 Python
python抖音表白程序源代码
2019/04/07 Python
python实现微信机器人： 登录微信、消息接收、自动回复功能
2019/04/29 Python
Python字典常见操作实例小结【定义、添加、删除、遍历】
2019/10/25 Python
python使用pip安装SciPy、SymPy、matplotlib教程
2019/11/20 Python
Python Handler处理器和自定义Opener原理详解
2020/03/05 Python
使用django自带的user做外键的方法
2020/11/30 Python
纯CSS3实现Material Design效果
2017/03/09 HTML / CSS
canvas 下载二维码和图片加水印的方法
2018/03/21 HTML / CSS
Expedia英国：全球最大的在线旅游公司
2017/09/07 全球购物
意大利包包和行李箱销售网站：Bagaglio.it
2021/03/02 全球购物
美术专业学生个人自我评价
2013/09/19 职场文书
家庭贫困证明书（3篇）
2014/09/15 职场文书
《秋思》教学反思
2016/02/23 职场文书
Python基于Tkinter开发一个爬取B站直播弹幕的工具
2021/05/06 Python