在做数据表格的时候遇到了很多坑, 今天整理一下方便以后使用.
主要功能是使用数据表格, 做分页,做搜索, 还有checkbox, 支持全选.
当选中一些数据的时候, 数据切换页面数据在切换回来后,选中状态就消失了, 我们希望切换回来的时候, 选中状态还能存在, 因此做了个缓存, 使checkbox 保持选中状态.代码如下:
1.HTML 搜索输入框
<form> <div> <input type="tel" autocomplete="off" placeholder="姓名/手机/身份证"> </div> </form>
2.HTML 搜索按钮
<div> <button data-type="reload"> <i></i> 搜索 </button> </div>
3.HTML table表格
<div> <div> <div> <section> <div> <div> <div> <table lay-filter="userTables"> </table> </div> </div> </div> </section> </div> </div> </div> </div>
4.HTML 时间格式转换
<script type="text/html"> {{# 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. 请求数据格式
//请求的数据格式