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  时间格式转换

5. js  功能设定

 

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 mapParameter = new HashedMap();
    mapParameter.put("page", (page-1)*10);
    mapParameter.put("limit", limit);
    mapParameter.put("searContent", searContent);
    try {
        List vReports=reportService.findReportList(mapParameter);
       Integer count=reportService.findReportListCount(mapParameter);
        Map 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 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){       
                   //数据中有不存在于不在缓存中则加入缓存中    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){                    
                       ids.push(table_data[i].id);                
                   }
              }else{           
                  //单选中的数据加入缓存中
                   ids.push(id);                 
                  }           
        }    
      //取消选中    
      }else{
          //id==0便是全选按钮
          if(id==0){
              //循环当前页面所有数据
              for(var i=0;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;
        }
    }
}

 

转载于:https://www.cnblogs.com/yysbolg/p/8805959.html