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