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;
}
}
}
版权声明： 本文有 ```...裥簞點 发表于 bloghome博客
转载声明： 可自由转载、引用，但需要属名作者且注明文章出处。
文章链接： https://www.bloghome.com.cn/user/yysblog
layui 数据表格+分页+搜索+checkbox+缓存选中项数据的更多相关文章
- SPA项目开发之动态树+数据表格+分页
SPA项目开发之动态树+数据表格+分页 动态生成NavMenu导航菜单(只支持2级菜单) <el-menu key="" index=""> < ...
- JavaScript- 获得TreeView CheckBox里选中项的值
获得TreeView CheckBox里选中项的值,对JSDOM控制还不是很熟,感觉不太容易.试了很多次终于成功了. 代码如下 <body> <form id="form1 ...
- layui-table-column-select（layui数据表格可搜索下拉框select）
layuiTableColumnSelect 在layui table的基础上对表格列进行扩展:点击单元格显示可搜索下拉列表. 码云地址:https://gitee.com/yangqianlong9 ...
- layui动态数据表格-分页
数据结构 $list = [ [,'], [,] ]; $json[; $json['; $json[; $json['data'] = $list; return json($json); 代码: ...
- 关于easyui-datagrid数据表格, 分页取出数据
在制作数据表格的时候有一个这样的属性, pagination是否显示分页列表, 分页显示的时候需要分别从数据库中取数据, 每页显示几行, 即只从数据库取出几行数据来显示, 具体代码如下 1, 显示页面 ...
- checkbox将选中的数据提交到后台
在项目中有些地方需要批量添加的数据,在这里使用到checkbox比较方便一些. 例如:我需要将多个包添加到同一个地区的 主要的前端代码: 这个是用来放checkbox的. <div id=&qu ...
- layui数据表格分页加载动画,自己定义加载动画,"加载中..."
记录思路,仅供参考 在表格渲染完成后,在done回调函数中给分页动态加点击事件, 关闭"加载中..."动画也是在 done回调函数中关闭 这是我实现的思路,记录给大家参考. , d ...
- layui问题之渲染数据表格时，只显示10条数据
通过ajax请求的数据,console.log()有30条数据,实际上只显示10条, 原因是没有设置limit table.render({ elem: '#report-collection' , ...
- bootstrap table checkbox获得选中得数据
var idlist = $('#table').bootstrapTable('getAllSelections'); for (var i = 0; i < idlist.lengt ...
随机推荐
- Git使用01
git 工作区:当前编辑的区域 缓存区:add 之后的区域 本地仓库:commit之后的区域 远程仓库:远程的区域 git init 初始化 git status 查看git的状态 git add 将 ...
- Javascript高级编程学习笔记（2）—— Script标签
script标签 js在浏览器中的使用,肯定会涉及到script标签. 那么script标签有哪些属性呢? 1.async:异步加载(不让页面等待该脚本的加载执行,异步加载页面的其他部分) 2.cha ...
- VMware Tools安装教程
安装依赖: sudo yum install eject 步骤: 确保 Linux 虚拟机已打开电源. 如果正在运行 GUI 界面,请打开命令 shell. 注意:以 root 用户身份登录,或使用 ...
- javascript Navigator对象属性和方法
Navigator对象 Navigator 对象包含的属性描述了正在使用的浏览器.可以使用这些属性进行平台专用的配置.虽然这个对象的名称显而易见 的是 Netscape 的 Navigator 的浏览 ...
- gitlab服务部署及使用
一.什么是gitlib Gitlab 是一个基于Git实现的在线代码仓库托管软件,你可以用Gitlab自己搭建一个类似于Github一样的系统平台,一般搭建gitlab私服就是用在公司的内部 Gitl ...
- python之进程（multiprocess）
有人说测试学习多进程(或多线程)有啥用?额告诉你很有用,特别是在自己写性能测试工具时就可以用到,而且非常方便 这里只介绍非常简单的多进程模块(multiprocessing.Process) 代码如下 ...
- numpy中pad函数的常用方法
一.参数解释 ndarray = numpy.pad(array, pad_width, mode, **kwargs) array为要填补的数组 pad_width是在各维度的各个方向上想要填补的长 ...
- 从零开始学 Web 之 CSS3（七）多列布局，伸缩布局
大家好,这里是「 从零开始学 Web 系列教程 」,并在下列地址同步更新...... github:https://github.com/Daotin/Web 微信公众号:Web前端之巅 博客园:ht ...
- AcceptEx与完成端口（IOCP）结合实例
前言 在windows平台下实现高性能网络服务器,iocp(完成端口)是唯一选择.编写网络服务器面临的问题有:1 快速接收客户端的连接.2 快速收发数据.3 快速处理数据.本文主要解决第一个问题. A ...
- 【杂谈】Starter Template
Spring Boot 项目与普通项目在包管理上的差别主要差别就是,Spring Boot在包管理上用了starter template,你应该经常看到xxx-starter这类的dependency ...