layui table 方法渲染 筛选重载和搜索重载实现
公司产品选用的技术栈包含了layui传送门，这是一个简洁大方地前端ui框架，上手简单，开源，长期维护，并且有社区FLY。
layui有许多问题，但是能被解决的问题都不算问题，只不过需要你仔细看文档，经常逛社区。
这里给大家介绍它的table模块，因为我在使用中遇到了许多问题，这里做汇总。
1、表格方法渲染（使用内置的ajax）
table模块最实用的功能就是避免我们ajax通信后还要依据解析数据手动生成并添加元素，简单来说，你只需要：
<form class="layui-form" action="">
<div class="form-select">
<select class="selectName" lay-filter="selectName">
<option value="0">所有用户</option>
<option value="1">VIP用户</option>
<option value="2">普通用户</option>
</select>
</div>
<div class="form-search">
<input type="text" placeholder="按用户名搜索" class="searchName">
<i class="searchBtn iconfont icon-fangdajing" alt=""></i>
</div>
<table id="user-table" class="layui-hide" lay-filter="user"></table>
<script type="text/html" id="table-bar">
<a lay-event="del">删除</a>|
<a lay-event="gotoPage">查看详情</a>
</script>
</form>
<script>
var userTable
var options = {
elem: '#user-table',
headers: {
'Authorization':token //通信中的token传递
},
page:true,//默认开启分页
request:{
'limitName':'pageSize' //分页每页条数默认字段改为pageSize
},
url: '/get_user_list',
cols: [[ // 表格的表头
{field:'username', title: '用户名'}
,{field:'nickname', title: '昵称', sort: true}
,{field:'login_time', title: '最近登录时间',sort:true} //开启排序
,{field:'login_ip', title: '最近登录IP', }
,{field:'log', title: '登录操作日志', sort: true}
,{field:'right', title: '操作', toolbar:"#table-bar"}
]],
parseData:function(res){
//这个函数非常实用，是2.4.0版本新增的，当后端返回的数据格式不符合layuitable需要的格式，用这个函数对返回的数据做处理，在2.4.0版本之前，只能通过修改table源码来解决这个问题
return {
code:res.status=='success'?0:1,
msg:res.status,
count:count, //总页数，用于分页
data:res.data.userList
}
}
}
layui.use('table',function(){
var lTable = layui.table;
userTable = lTable.render(options) //获取数据并渲染
})
</script>
2、表格中的事件
继续上面的代码
layui.use('table',function(){
var lTable = layui.table;
userTable = lTable.render(options)
table.on('tool(user)',function(obj){
console.log(obj) //你会看到obj包含了你所需要的所有数据
if(obj.event == 'del'){
layer.confirm('您确定要删除该用户：' + obj.data.username + '吗？', {
title:'删除用户',
btn: ['确定','取消']
}, function(index){
ajax().then(function(){
layer.close(index)
userTable.reload({
page:{
curr:1 //表格重载的时候将查询页数设为第一页
}
})
})
})
}else if(obj.event == 'gotoPage'){
location.href = '/userDeatil.html?userid=' + obj.data.id
}
})
})
3、表格中的搜索
$(document)
.on('click','.searchBtn',function () {
userTable.reload({
where:{
search_arg:$('.searchName').val().trim()
},
page:{
curr:1
}
})
});
.keyup(function(event){
if(event.keyCode == 13)
event.preventDefault()
$(".searchBtn").trigger("click");
});
4、下拉筛选
layui.use('form',function(){
var form = layui.form
form.on('select(selectName)', function(data)
userTable.reload({
where:{
role:data.value,
search_arg:$('#searchName').val().trim()
},
page:{
curr:1
}
})
})
})
好了，带有筛选和搜索的列表就做完了
需要注意的问题有一个，就是每次筛选和搜索的时候，都要将当前页设置为1，即从第一页开始搜索，因为table中有一个table.config.page.curr是全局维护的变量，在每一次table重载的时候，是默认把这个变量当做当前页传递给后台的，这将导致不可预测的错误或者返回的结果不是基于第一页的
你也可以对这个变量动态赋值：
var curr = userTable.config.page.curr
if(curr != 1) curr = 1
想要将搜索和筛选做联动，只需要在每次表格重载的时候将 role和search_arg都传递到where里就可以了，其他问题欢迎留言
