1.前端代码
layui.use(['form', 'table','laypage'], function(){
var table = layui.table;
var form =layui.form;
var laypage = layui.laypage;
table.render({
elem: '#tb'
,url:'personManage/userManage'
,toolbar: '#toolbarDemo' //开启头部工具栏,并为其绑定左侧模板
, limit: 20
, limits: [20, 40, 60]
,defaultToolbar: ['filter', 'exports', 'print', { //自定义头部工具栏右侧图标。如无需自定义,去除该参数即可
title: '提示'
,layEvent: 'LAYTABLE_TIPS'
,icon: 'layui-icon-tips'
}]
,title: '用户数据表'
,parseData:function (res) {
console.log(res)
console.log(res.total)
return{
"code":res.code,
"msg": res.msg,
"count": res.total,
data: res.data
}
},count:'count'
,cols: [[
{type: 'checkbox', fixed: 'left'},
{field: 'id', title: '序号', width:'6%', fixed: 'left', align:'center',templet: function(res){
return '<div style="text-align: center">'+ res.LAY_INDEX+'</div>';
}}
,{field:'userid', title:'用户名', width:'10%',align:'center', fixed: 'left', /*unresize: true,*/ sort: true,templet: function(res){
console.log("数据表格内res:-------------->"+res.userid)
if(res.userid==null){
return "";
}else {
return '<div style="text-align: center">'+res.userid+'</div>'
}
}}
,{field:'username', title:'姓名',align:'center', width:'10%', edit: 'text',templet: function(res){
if(res.username==null){
return "";
}else {
return '<div style="text-align: center">'+res.username+'</div>'
}
}}
,{field:'userpwd', title:'密码',align:'center', width:'10%', edit: 'text',templet: function(res){
if(res.userpwd==null){
return "";
}else {
return '<div style="text-align: center">'+res.userpwd+'</div>'
}
}}
,{field:'sex', title:'性别',align:'center', width:'10%', edit: 'text',templet: function(res){
if(res.sex==null){
return "";
}else {
return '<div style="text-align: center">'+res.sex+'</div>'
}
}}
,{field:'userdept', title:'所在部门',align:'center', width:'10%', templet: function(res){
if(res.userdept==null){
return "";
}else{
return '<div style="text-align: center">'+res.userdept+'</div>'
}
}}
,{field:'userrole', title:'所属角色',align:'center', width:'10%', templet: function(res){
if(res.userrole==null){
return "";
}else{
return '
记录一次layui的启停用监听事件
最新推荐文章于 2024-05-14 09:38:54 发布
![](https://img-home.csdnimg.cn/images/20240711042549.png)