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

在做数据表格的时候遇到了很多坑, 今天整理一下方便以后使用.

主要功能是使用数据表格, 做分页,做搜索, 还有checkbox, 支持全选.

当选中一些数据的时候, 数据切换页面数据在切换回来后,选中状态就消失了, 我们希望切换回来的时候, 选中状态还能存在, 因此做了个缓存, 使checkbox 保持选中状态.代码如下:

1.HTML 搜索输入框

2.HTML 搜索按钮

 
   搜索
 

3.HTML table表格

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

@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 * FROM report where status=0
  
   and (
   (name LIKE concat(concat("%",#{searContent}),"%"))
   or (phone LIKE concat(concat("%",#{searContent}),"%"))
   or (identification_nuber LIKE concat(concat("%",#{searContent}),"%"))
   )
  
  ORDER BY update_time DESC limit #{page} , #{limit};
 
 

  select COUNT(*) FROM report where status=0
 
  and (
  (name LIKE concat(concat("%",#{searContent}),"%"))
  or (phone LIKE concat(concat("%",#{searContent}),"%"))
  or (identification_nuber LIKE concat(concat("%",#{searContent}),"%"))
  )
 
  ;
 

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

以上这篇layui 数据表格+分页+搜索+checkbox+缓存选中项数据的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持考高分网。