layui中数据表格+分页+搜索+checkbox+缓存选中项数据的示例分析

这篇文章主要介绍了layui中数据表格+分页+搜索+checkbox+缓存选中项数据的示例分析，具有一定借鉴价值，感兴趣的朋友可以参考下，希望大家阅读完这篇文章之后大有收获，下面让小编带着大家一起了解一下。

创新互联专注于芦溪企业网站建设,成都响应式网站建设,商城网站制作。芦溪网站建设公司,为芦溪等地区提供建站服务。全流程按需求定制网站，专业设计，全程项目跟踪，创新互联专业和态度为您提供的服务

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

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

1.HTML 搜索输入框

2.HTML 搜索按钮


 
   搜索

3.HTML table表格

{{# 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)}}

{ 　　"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":"" }

/** * 获取报告列表 * *@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; }

@Override public List findReportList(Map mapParameter) { return reportDao.selectList("findReportList",mapParameter); } @Override public Integer findReportListCount(Map mapParameter) { return reportDao.selectOne("findReportCount",mapParameter); }

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}),"%")) ) ;

//实例 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+缓存选中项数据的示例分析”这篇文章对大家有帮助，同时也希望大家多多支持创新互联，关注创新互联行业资讯频道，更多相关知识等着你来学习!

分享名称：layui中数据表格+分页+搜索+checkbox+缓存选中项数据的示例分析
URL链接：http://cqcxhl.com/article/ipdcjd.html