<div class="searchDiv">
<div class="layui-btn-group searchDiv" style="float:left;margin-right:150px;">
<button class="layui-btn" data-type="addUser">
<i class="fa fa-home fa-lg" style="margin-right:5px;"></i>添加用户
</button>
</div>
<div class="searchDiv" style="margin-right:0px;" >
用户名:
<div class="layui-inline">
<input class="layui-input" name="name" id="name" autocomplete="off">
</div>
手机号:
<div class="layui-inline">
<input class="layui-input" name="mobile" id="mobile" autocomplete="off" maxlength=11
placeholder="请输入数字" onkeyup="this.value=this.value.replace(/\D/g,'')">
</div>
<button class="layui-btn" data-type="reload">搜索</button>
<button class="layui-btn" data-type="reSet">重置</button>
</div>
</div>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="getCheckData">获取选中行数据</button>
<button class="layui-btn layui-btn-sm" lay-event="getCheckLength">获取选中数目</button>
<button class="layui-btn layui-btn-sm" lay-event="isAll">验证是否全选</button>
</div>
</script>
<table class="layui-table" lay-data="{url:'<%=path%>/user/userList', page:true,toolbar:'#toolbarDemo',
defaultToolbar:['filter'], id:'userTab'}" lay-filter="userTabFilter">
<thead>
<tr>
<th lay-data="{type: 'radio', fixed: 'left'}"></th>
<th lay-data="{field:'userId',width:120, fixed: true}">登录名</th>
<th lay-data="{field:'name',}">用户名</th>
<th lay-data="{field:'mobile', }">手机号</th>
<th lay-data="{field:'email', }">邮箱</th>
<th lay-data="{field:'status', width:80 , templet:'#statusTpl'}">状态</th>
<th lay-data="{field:'loginIpRestrictFlag', width:120 , templet:'#ipTpl'}">登录IP限制</th>
<th lay-data="{fixed: 'right', align:'center',width:350, toolbar: '#toolBar'}">操作</th>
</tr>
</thead>
</table>
<script type="text/html" id="ipTpl">
{{# if(d.loginIpRestrictFlag === '0'){ }}
<span style="color: #F581B1;">关闭</span>
{{# } else if(d.loginIpRestrictFlag === '1'){ }}
<span style="color: green;">开启</span>
{{# } }}
</script>
<script type="text/html" id="statusTpl">
{{# if(d.status === '1'){ }}
<span style="color: green;">正常</span>
{{# } else if(d.status === '0'){ }}
<span style="color: #F581B1;">未启用</span>
{{# } else if(d.status === '2'){ }}
<span style="color: #F581B1;">冻结</span>
{{# } else if(d.status === '9'){ }}
<span style="color: red;">停用</span>
{{# } }}
</script>
<script type="text/html" id="toolBar">
<a class="layui-btn layui-btn-xs" lay-event="view">查看信息</a>
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="setRole">授予角色</a>
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="resetPass">重置密码</a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
</script>
<%@ include file="/WEB-INF/comm/footer.jsp" %>
<script type="text/javascript">
var $ = layui.query ;
var layer = layui.layer;
layui.use('table', function(){
var table = layui.table;
//工具栏事件
table.on('toolbar(userTabFilter)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
// checkStatus.data获取到的值是json对象的 数组,适用于checkbox , 本处用的是radio,所以获取第一个元素
var data = (checkStatus.data)[0];
var event = obj.event ;
if(event == 'getCheckData'){
console.log("data.userId : " + data.userId );//
} else if(event == 'getCheckLength'){
var data = checkStatus.data;
layer.msg('选中了:'+ data.length + ' 个');
} else if (event == 'isAll'){
layer.msg(checkStatus.isAll ? '全选': '未全选')
}
});
//监听工具条
table.on('tool(userTabFilter)', function(obj){
var data = obj.data;
if(obj.event === 'resetPass'){
parent.layer.confirm('确定重置密码?【'+data.userId+'】', function(index){
resetPass(data.userId) ;
});
} else if(obj.event === 'setRole'){
//window.location.href= path+"/user/toSetRole?id="+data.id ;
var userId = data.userId ;
var parentLayer = parent.layer ;
var setRole = parentLayer.open({
type: 2 //类型
,title: "授予角色"
,area: ['400px', '300px']
,shade: 0.6
,anim: 4
,shadeClose:false
,maxmin: false
,content: "<%=path%>/user/setRolePage?userId="+userId
,yes: function(){
}
,btn2: function(){
parentLayer.closeAll();
}
,zIndex: parentLayer.zIndex //重点1
,success: function(layero){
parentLayer.setTop(layero); //重点2
}
});
} else if(obj.event === 'view'){
var userId = data.userId ;
var parentLayer = parent.layer ;
var setRole = parentLayer.open({
type: 2 //类型
,title: "用户信息"
,area: ['420px', '560px']
,shade: 0.6
,anim: 4
,shadeClose:true
,resize:false
,maxmin: false
,content: "<%=path%>/user/viewPage?userId="+userId
,yes: function(){
}
,btn2: function(){
parentLayer.closeAll();
}
,zIndex: parentLayer.zIndex //重点1
,success: function(layero){
parentLayer.setTop(layero); //重点2
}
});
} else if(obj.event === 'del'){
parent.layer.confirm('确定删除该行?【'+data.userId+'】', function(index){
delUser(data.userId , parent.layer , table) ;
//obj.del();
parent.layer.close(index);
});
} else if(obj.event === 'edit'){
//弹出编辑页面
var userId = data.userId
var parentLayer = parent.layer;
var updateUser = parentLayer.open({
type: 2 //类型
,title: "编辑用户信息"
,area: ['450px', '600px']
,shade: 0.5
,anim: 1
,shadeClose:false
,maxmin: false
,resize: false
,content: "<%=path%>/user/updatePage?userId="+userId
,yes: function(){
}
,btn2: function(){
parentLayer.closeAll();
}
,zIndex: parentLayer.zIndex //重点1
,success: function(layero){
parentLayer.setTop(layero); //重点2
}
});
}
});
var $ = layui.$, active = {
reload: function(){
//执行重载
table.reload('userTab', {
page: {curr: 1 }, //重新从第 1 页开始
where: { //查询条件
name: $('#name').val().trim(),
mobile:$('#mobile').val().trim()
}
});
},
reSet: function(){
$('#name').val("") ;$('#mobile').val("");
//执行重载
table.reload('userTab', {
page: {curr: 1 }, //重新从第 1 页开始
where: { //查询条件
name: '',mobile:''
}
});
},
addUser:function(){
//弹出添加页面
var parentLayer = parent.layer ;
parentLayer.open({
type: 2 //类型
,title: "添加用户"
,area: ['450px', '600px']
,shade: 0.5
,anim: 1
,shadeClose:false
,maxmin: false
,resize: false
,content: "<%=path%>/user/addPage"
,yes: function(){
}
,btn2: function(){
parentLayer.closeAll();
}
,zIndex: parentLayer.zIndex //重点1
,success: function(layero){
parentLayer.setTop(layero); //重点2
}
});
}
};
$('.searchDiv .layui-btn').on('click', function(){
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
layui
2020.11.18 20:47
https://www.meihaocloud.com.com/245.html
, 欢迎转载,请在文章页标出原文连接 !