layui数据表格简单使用：
其中关于后台的数据操作都忽略了：其实基本构好前端，提供接口了，后台就一步一步实现即可：我的一般是从controller->service接口->service实现->mapper接口->mapper.xml数据库操作（mybatis的话）
1.html页面，需要标明table的ID
table的：
<table id="userList" lay-filter="userList"></table>
工具列的：
<script type="text/html" id="userBar">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="detail">查看</button>
<button class="layui-btn layui-btn-sm" lay-event="edit">编辑</button>
<button class="layui-btn layui-btn-danger layui-btn-sm" lay-event="changeStu">删除</button>
</div>
</script>
其中lay-event 是用来监听事件的，同table一样，绑定是靠#id
2.js则是控制数据和列内容
要关联到table 其中首先要layui.use([],function(){
let xx=layui.xx;
表格渲染则是：table.render({
其中就是各种属性
elem：“#userList” 必填的关联html中的table 的 #id
id：则是用来多次渲染，所定位的table
,url: ‘/meiman/admin/api/memberList’ //数据接口，相应后台组装返回的数据（但是格式可能会不是json，就需要解析parseData:function（））
where：可以做动态筛选数据的条件
page：true开启分页
text：数据加载失败的显示
cols[[//等等常用属性：注意：这里必须是 [[{},{}…]] 类型的格式
{filed：返回数据字段名，title：列头，width，sort，fixed，aligin，toolbar："#userBar"},
{…}
]]
//如果你想重新规定返回的数据格式，那么可以借助 response 参数，如:
,response: {
statusName: ‘status’ //规定数据状态的字段名称，默认：code
,statusCode: 200 //规定成功的状态码，默认：0
,msgName: ‘hint’ //规定状态信息的字段名称，默认：msg
,countName: ‘total’ //规定数据总数的字段名称，默认：count
,dataName: ‘rows’ //规定数据列表的字段名称，默认：data
}
,parseData: function(res){ //res 后台组装原始返回的数据
return {
“code”: res.status, //解析接口状态
“msg”: res.message, //解析提示文本
“count”: res.total, //解析数据长度
“data”: res.data.item //解析数据列表，后台返回的item应该解析出来是 [{},{}…] 这样的数组类型
},
done: function(){//可用来控制显示文本等操作参数可传res（接口返回的信息）, curr（得到当前页码）, 只有一 个done：function,再函数里面分别做处理就ok，多个done，就只有最后一个生效。
count(总数据条数)
//如果是异步请求数据方式，res即为你接口返回的信息。
//如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
KaTeX parse error: Expected '}', got 'EOF' at end of input: … if((this).text()‘1’){
KaTeX parse error: Expected 'EOF', got '}' at position 43: … }̲else if((this).text()‘2’){
$(this).text(“冻结”)
}
})
}
各种详细属性可见：https://www.layui.com/doc/modules/table.html#use
$(function () {
let uname="";
layui.use(['form','layer','table','jquery'],function () {
let form=layui.form,
layer=layui.layer,
table=layui.table,
$ = layui.jquery;
table.render({
elem:'#userList'
,id:'userList'
,url: '/meiman/admin/api/memberList' //数据接口
,where:{'uname':uname}
,page: true //开启分页
,text:"数据加载失败"
,cols: [[ //表头
{checkbox:true,width:'50',fixed: 'left'}//单选框
,{field: 'id', title: 'ID', width:80, sort: true, fixed: 'left'}
,{field: 'uname', title: '用户名', width:200}
,{field: 'role', title: '角色', width:200}
,{field: 'stu', title: '状态', width:200}
,{field: 'toolBar', title: '操作', align:'center',width:200,toolbar:'#userBar'}//工具列
]]
,response:{statusCode:"1000"}
,parseData:function (res) {
return{
"code":res.code,
"msg":res.msg,
"count":res.data.count,
"data":res.data.list
};
},
done: function(){//只有一个done：function,再函数里面分别做处理就ok，多个done，就只有最后一个生效。
//如果是异步请求数据方式，res即为你接口返回的信息。
//如果是直接赋值的方式，res即为：{data: [], count: 99} data为当前页数据、count为数据总长度
$("[data-field='stu']").children().each(function () {
if($(this).text()=='1'){
$(this).text("启用")
}else if($(this).text()=='2'){
$(this).text("冻结")
}
})
}
});
})
});
3.样式基本ok，可以添加一些监听事件了
当然代码不全，这里只写的table主要部分，像table外部的搜索框，批量删除，添加就正常事件监听就行
这里主要是针对，1.table的渲染（利用了搜索框的from提交）2.和操作列工具栏的事件监听
4.搜索监听：其中html中的 name=”uname“属性和js里的 uname =data.field.uname 相对应
lay-submit lay-filter=“search” 和js的submit(search) 对应
html.
<form class="layui-form xbs" action="" >
<div class="layui-form-pane">
<div class="layui-form-item" style="display: inline-block;">
<div class="layui-input-inline">
<input type="text" name="uname" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
<div class="layui-input-inline" style="width:80px">
<button class="layui-btn" lay-submit lay-filter="search"><i class="layui-icon"></i></button>
</div>
</div>
</div>
</form>
js.
//搜索
form.on('submit(search)',function (data) {
uname =data.field.uname;
table.reload('userList',{
where: {'uname':uname}
});
return false;
});
5.批量删除。
html。
<button class="layui-btn layui-btn-danger delAll"><i class="layui-icon"></i>批量删除</button>
js。主要是监听table中的checkbox
//批量删除
$(".delAll").click(function () {
let checkStatus = table.checkStatus('userList'),//监听复选框的选中事件，关联的是js中渲染table的id
data = checkStatus.data,
ids = "";
if (data.length>0){
for(let i=0;i<data.length;i++){
ids+=data[i].id+",";
}
ids=ids.substring(0,ids.length-1);
layer.confirm('确定删除选中用户？',{icon:3,title:'提示信息'},function () {
$.get('/meiman/admin/api/delAll',{ids:ids},function (res) {
layer.msg("删除了："+ids);
if(res.code=1000){
layer.msg('删除成功！',{icon:6,time:1000},function () {
location.href='/meiman/admin/member';
})
}
else {
layer.msg('删除失败！',{icon:5,time:1000},function () {
location.href='/meiman/admin/member';
})
}
})
})
}
});
6.工具列的监听及操作
js
//工具列操作
table.on('tool(userList)',function (obj) {
let data = obj.data;
switch(obj.event){
case 'detail':
layer.msg('查看');
break;
case 'edit':
window.location.href="memberUpdate?id="+data.id;//跳某个页面，并且传递当前行的id，供后台查询
break;
case 'changeStu':
layer.confirm('确定修改'+data.uname+"的状态？",{icon:3,title:"提示信息"},function (index) {
$.post("/meiman/admin/api/ChangeStuById",{stu:data.stu,id:data.id},function (res) {
if(res.code ==='1000' ){
top.layer.msg("用户状态更改成功！");
window.location.href="/meiman/admin/member";
layer.close(index);
}
else {top.layer.msg("用户状态设置失败！");}
})
});
break;
}
});
7.好吧，layui表格暂时使用到这。。。一些基本监听能够处理，数据/参数能够获取/传递/显示就暂时ok了
扫一扫
807
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
