layui中数据表格+分页+搜索+checkbox+缓存选中项数据的示例分析
这篇文章主要介绍了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
/** * 获取报告列表 * *@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
(2).Service
@Override public ListfindReportList(Map mapParameter) { return reportDao.selectList("findReportList",mapParameter); } @Override public Integer findReportListCount(Map mapParameter) { return reportDao.selectOne("findReportCount",mapParameter); }
(3).mybatis SQL
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+缓存选中项数据的示例分析”这篇文章对大家有帮助,同时也希望大家多多支持创新互联,关注创新互联行业资讯频道,更多相关知识等着你来学习!
当前名称:layui中数据表格+分页+搜索+checkbox+缓存选中项数据的示例分析
URL地址:http://scyanting.com/article/ipdcjd.html