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，取值  转换为Numbervar 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.jsif(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.jsids.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 缓存选中项数据
在做数据表格的时候遇到了很多坑, 今天整理一下方便以后使用. 主要功能是使用数据表格, 做分页,做搜索, 还有checkbox, 支持全选. 当选中一些数据的时候, 数据切换页面数据在切换回来后, ...
layui 数据表格的搜索分页功能的实现
最近在使用layui+larave做项目,需要使用到table的分页+搜索的功能,一开始没有什么思路,从网上找了几个,用在自己这里并不正确,不知是自己有哪里写错了,还是这几个是不正确,下面是自己亲自试 ...
php数据表格的重载,layui数据表格实现重载数据表格功能(搜索功能）
layui数据表格实现重载数据表格功能,以搜索功能为例加载数据表格实现搜索功能和数据表格重载全部代码加载数据表格按照layui官方文档示例 HTML部分 JavaScript部分 var t ...
layui数据表格（一：基础篇，数据展示、分页组件、表格内嵌表单和图片）
表格展示神器之一:layui表格前言:在写后台管理系统中使用最多的就是表格数据展示了,使用表格组件能提高大量的开发效率,目前主流的数据表格组件有bootstrap table.layui table ...
Layui数据表格分页通过两种方法实现
SSM框架+Layui框架实现数据表格分页效果图如下所示: 具体实现方法: 方法一:(基于前台进行分页) 实现思路:主要是后台将全部数据返回到前台,之后前台通过Layui的parseData函数来实现 ...
layui数据表格接口_layui数据表格实现重载数据表格功能(搜索功能）
layui数据表格实现重载数据表格功能,以搜索功能为例加载数据表格实现搜索功能和数据表格重载全部代码加载数据表格按照layui官方文档示例 HTML部分 JavaScript部分 var t ...
layui数据表格搜索php代码,layui实现显示数据表格和搜索功能示例
本文实例讲述了layui实现显示数据表格和搜索功能.分享给大家供大家参考,具体如下: 搜索 layui.use('table', function(){ var table = layui.table ...
layui数据表格实现重载数据表格功能(搜索功能）
这篇文章主要介绍了layui数据表格实现重载数据表格功能,以搜索功能为例进行讲解,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 layui数据表格实现重载数据表格功能,以搜索功能为例加载数据表格 ...
layui数据表格分页无法正常显示
layui数据表格分页无法正常显示应该先利用layui table中的parseData方法手动将数据切片分页,代码如下,要点是parseData: function(res){}中的方法,对从ur ...