layui数据表格分页搜索检验盒缓存选中项数据的方法

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

主要功能是使用数据表格，做分页，做搜索，还有复选框，支持全选。

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

1.超文本标记语言搜索输入框

form class=' layui-form ' div class=' layui-input-inline ' input type=' tel ' name=' SearContent ' autocomplete=' off ' placeholder='姓名/手机/身份证class='layui-input' /div/form2 .超文本标记语言搜索按钮

div class=' layui-input-inline ' style=' width : 90px ' button class=' layui-BTN ' id=' search email company ' data-type=' reload ' I class=' layui-icon ' style=' font-size : 20px；'/i搜索/button/div3 .超文本标记语言表格表格

div class=' yys-fluid yys-wrapper ' div class=' layui-row lay-col-space 20 ' div class=' layui-cos-xs12 layui-col-sm12 layui-col-md12 ' section class=' yys-body动画rotateInDownLeft ' div class=' yys-body-content clear fix change pwd ' div class=' layui-col-lg12 layui-col-md10 layui-col-sm12 lay超文本标记语言时间格式转换

脚本类型=' text/html ' id=' time TPL ' { # var parseDate=function(Date){ if(Date){ var t=new Date(Date)}；返回t . getfullyear()'-'(t . getmonth()1)'-' t . getdate()' t . gethours()' : ' t . getminutes()；} } } } { {解析日期(d . updatetime)} }/脚本5 .射流研究…功能设定

脚本var $=nulllayui.use(['jquery '，' upload '，' form '，' table '，' layer '，' element '，' laydate']，function(){ $=layui。jqueryvar element=layui.element，layer=layui.layer，upload=layui.upload，form=layui.form，laydate=layui.laydate，layer=layui.layer记录选中的数据：做缓存使用，作为参数传递给后台，然后生成pdf，压缩var id=new Array()；//当前表格中的全部数据：在表格的检验盒全选的时候没有得到数据，因此用全局存放变量var table _ data=new Array()；var a=表。渲染({ elem : ' # UserTables '，skin: 'line '，//行边框风格cols: [[ {checkbox: true，width: 60，fixed: true，{type: 'numbers '，title: '序号，宽度： '40'}，{ field: 'name '，宽度： 80，标题： '姓名，align: 'left' }，{ field: 'phone '，width: 120，title: '电话，对齐： '左}，{字段： '识别符块'，宽度： 170，标题： '身份证号码，align: 'left' }，{ field: 'updateTime '，width: 140，title: '更新时间，align: '左侧，templet: ' # TimeTpl ' }，{ title: '常用操作，width: 200，align: 'left '，toolbar: '#userbar '，fixed: 'right' }]，url: '/user/getReportList '，//data: userData，第：页{ //分页设定layout: ['count '，' prev '，' page '，' next'] //自定义分页布局，curr: 1 /设定初始在第一页，limit: 10/每页多少数据s组3360 5/只显示5个连续页码}，even: true，done:函数(res，curr，count){ //数据表格加载完成时调用此函数//如果是异步请求数据方式，res即为你接口返回的信息。

//如果是直接赋值的方式，res即为：{data: []，count: 99}数据为当前页数据、计数为数据总长度//设置全部数据到全局变量表_数据=res.data//在缓存中找到id，然后设置数据表格中的选中状态//循环所有数据，找出对应关系，设置检验盒选中状态for(var I=0；一、资源数据。长度；I){ for(var j=0；j ids.lengthj ) { //数据编号和要勾选的编号相同时检验盒选中if(res.data[i]).id==ids[j]) { //这里才是真正的有效勾选RES . data[I][' LAY _ CHECK ']=' true '；//找到对应数据改变勾选样式，呈现出选中效果var INDEX=RES . data[I][' LAY _ TABLE _ INDEX ']；$('.layui-table-fixed-l tr[data-index=' index ']输入[type='checkbox']').prop('checked '，true)；$('.layui-table-fixed-l tr[data-index=' index ']输入[type='checkbox']').下一个()。addCLaSS(' layui-form-checked ')；} } } //设置全选检验盒的选中状态，只有改变LAY_CHECKED的值，table.checkStatus才能抓取到选中的状态var CheckStatus=table。check STatus(' my-table ')；if(checkStatus.isAll){ $(').layui-table-header th[data-field=' 0 ']输入[type=' checkbox ']').prop('checked '，true)；$('.layui-table-header th[data-field=' 0 ']输入[type=' checkbox ']').下一个()。addCLaSS(' layui-form-checked ')；} //得到所有数据控制台。日志(RES)；//得到当前页码控制台。日志(当前)；//得到数据总量console.log(计数);} });//复选框选中监听，将选中的编号设置到缓存数组，或者删除缓存数组table.on('checkbox(userTables)'，function(obj){ if(obj。选中==true){ if(obj。type==' one '){ ids。推动(物体。数据。id)；} else { for(var I=0；可编辑的数据.长度i ){ ids.push(table_data[i]).id)；} } } else { if(obj。type==' one '){ for(var I=0；iids . lengthi){ if(id[I]==obj。数据。id){ ids。去掉(一)；} } } else { for(var I=0；iids . lengthi){ for(var j=0；jtable _ data . length j){ if(ids[I]==table _ data[j].id){ ids。去掉(一)；} } } } } });//搜索加载-数据表格重载var $=layui .$，active={ reload : function(){//执行重载table.reload('userTables '，{ page: { curr: 1 //重新从第一页开始},其中： { sear contents : $(' input[name=sear content]').val()} })；} };$('#searchEmailCompany ').on('click ')，function(){ ids=new Array()；定义变量类型=$(这个).数据(“type”)；活动[类型]?活动[类型]。拨打（此):"";});元素。init()；});//删除数组自定义函数数组。原型。remove=function(dx){ if(ISnan(dx)| | dxt this。长度){ return false} for(var i=0，n=0；长度；我){如果（这个[我]!=this[dx]){ this[n]=this[I]} } this。长度-=1 }/脚本6 .请求数据格式

//请求的数据格式

{'code':0，' count':39，' data':[{'id':57，' insertTime':1513578156000，' leaguerId':65，' phone':'1356***98907，' status ' :0，' updateTime ' :1513578156000，' uu周*谨，' phone':'135**907 '，' status':0 '，' updateTime':1513578037000 '，' uuid ' : ' ed 91 fac 6-56 F8-4771-aa79-32863 a 27 bf6f ' }，{ ' id ' :55 '，' identificationNuber ' 3360 ' 42098 * * '，' insertTime董*、电话' :'1356**8908 '、状态' :0 '、更新时间' :1513576729000 '、uuid ' : ' 62d 58 c 68-b49f-44 F4-b5a 3-e8ea 629 b5 d 32 ' }、{'id':54 '、identificationNuber ' 3360 ' 6501 ，'插入时间光，' phone':'158009**059 '，' status':0，' updateTime':1513576590000，' uuid ' : ' a 65e 3880-f44c-44cb-9f 78-f7d 7 BBA ce86 ' }，{'id':53，' identificationNuber ' 3360 ' 310114 * * '，' insertTime吴*雯，' phone':'137**5261 '，' status':0，' updateTime':1513576294000，' uuid ' : ' 6a 0766 f1-da1d-4c 55-8 BD 5-5d D7 a6 ad 7 cd3 ' }，{'id':52，' identificationNuber ' 3360 ' 3201 * * ，'插入时间骏，' phone':'186**9521 '，' status':0，' updateTime':1513574998000 '，' uuid ' : ' 89f 1 fddf-D3 C2-4a 3 B- 8a 13-c 501 BDB 8e 22c ' }，{'id':51，' insertTime':1513562761000，' leaguerId '余*、phone':'1527**4673 '、status':0 '、updateTime':1513561843000 '、uuid ' : ' b38 a 8660-bf74-41 B9-b01f-6e 79189327 a3 ' }、{'id':50 '、insert time ' :1515效果：

7.后台爪哇岛

(1).控制器

/** * 获取报告列表* *@return */@RequestMapping(值='/getReportList '，方法={RequestMethod .GET })@ ResponseBodypublic Map getReportList(整数页，整数限制，字符串搜索内容){ logger.info('获取报告列表');if (SecurityUtils.getSubject().isAuthenticated()==false){ logger。错误(“”未登录');返回null}系统。出去。println(SearContent)；MapObject，Object mapParameter=new Hashedmap()；mapParameter.put('page '，(page-1)* 10)；mapParameter.put('limit '，limit)；mapParameter.put('searContent '，SearContent)；请尝试{ list report VReports=report service。查找报告列表(MapParameter)；整数计数=ReportServiCe。findReportListCount(MapParameter)；MapObject，Object map=new Hashedmap()；map.put('code '，0)；map.put('msg '，' ')；map.put('count '，count)；map.put('data '，VReports)；返回地图；} catch(异常e) { logger.error('获取报告列表错误，e)；} logger.error('获取报告列表');返回null}(2)。服务

@ overrided public list report find report list(Map参数){ return reportdao。选择列表(“查找报告列表”，映射参数)；} @ overrided public Integer find report listcount(Map参数){ return reportdao。选择一个(“查找报告计数”，映射参数)；}(3).模糊查询

！-查询所有报告列表-选择id=' FindReportList ' resultMap=' BaseResultMap '参数TYPe=' Java。乌提尔。“映射”选择*自报告其中如果test='searContent！=null和((名称LIKE concat(concat("% "、#{searContent})、" % ")或(phone LIKE concat(concat("% "、#{searContent})、" % ")或(identity _ nuber LIKE concat(concat(" % "、#{searContent})、" % ")))))/if ORder BY update _ time desc限制# { page }、# { limit }；/select！-查询所有报告列表总数-选择id=' FindReportCOunt '结果类型=' Java。朗。整数'参数类型=' Java。乌提尔。“地图”选择计数(*)自报表，其中如果test='searContent！=null和((名称LIKE concat(concat("% "、#{searContent})、" % ")或(phone LIKE concat(concat("% "、#{searContent})、" % ")或(identity _ nuber LIKE concat(concat(" % "，#{searContent})，" % ")))/if；/selectBUG网友解决方案（未测):

//实例layui.use(['table '，' form']，function(){ var form=layui。形式；//表单监听检验盒事件form.on('checkbox '，function(obj){ //当前元素定义变量数据=$(obj。elem)；//遍历父级tr，取第一个，然后查找第二个td，取值转换为数字变量id=数字（数据。父母(' tr ').第一个()。查找(' td ').等式(1)。text())；//选中或者未选中var check=obj。艾伦。已检查；//复选框状态//var CheckStatus=table。CheckStatus('用户')；//如果选中if(check==true){ //如果缓存数组存在值if(ids.length0){ //id==0便是全选按钮if(id==0){ //循环当前页面所有数据for(var I=0；可编辑_ data.lengthi ){ //数据中有不存在于不在缓存中则加入缓存中isInArray该方法来自常见。js if(IsInarray(id，table_data[i]).id==false){ ids。push(table _ data[I]).id)；} } }else{ //单选中的数据不在缓存中则加入缓存中if(IsInarray(id，id)==false){ ids。push(id)；} } //如果缓存数组不存在值表示第一次添加}else{ //id==0便是全选按钮if(id==0){ //循环当前页面所有数据直接加入缓存for(var I=0；可编辑的数据.长度i ){ ids.push(table_data[i]).id)；} }else{ //单选中的数据加入缓存中身份证。push(id)；} } //取消选中}else{ //id==0便是全选按钮if(id==0){ //循环当前页面所有数据for(var I=0；可编辑_ data.lengthi ){ //如果有数据存在与缓存中则删除if(IsInarray(id，table_data[i]).id==true){//removeByValue该方法来自常见。js ids。removebyvalue(table _ data[I]).id)；} } }else{ //如果单选中的数据存在与缓存中则删除if(IsInarray(id，id)==true){ ids。removeByValue(id)；} } } });})//判断数组中是否存在元素到达)数组价值需判断的元素函数is array(arr，value){ for(var I=0；一、长度；I){ if(value===arr[I]){ return true；} }返回false}//数组对象增加删除方法数组. removeByValue(需删除的值)即可调用数组。原型。removebyvalue=function(val){ for(var I=0；我这个长度；I){ if(this[I]==val){ this。拼接(，1)；打破；} }}以上这篇获得数据表格分页搜索检验盒缓存选中项数据的方法就是小编分享给大家的全部内容了，希望能给大家一个参考，也希望大家多多支持我们。