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 \" 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\":\"\"
}

//效果:

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

版权声明 1 本网站名称：偶像资源网
2 本站永久网址：https://www.ox520.com
3 本网站的文章部分内容可能来源于网络，仅供大家学习与参考，如有侵权，请联系站长 QQ593098775进行删除处理。
4 本站一切资源不代表本站立场，并不代表本站赞同其观点和对其真实性负责。
5 本站一律禁止以任何方式发布或转载任何违法的相关信息，访客发现请向站长举报
6 本站资源大多存储在云盘，如发现链接失效，请联系我们我们会第一时间更新。

THE END

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

请登录后发表评论