<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8"><meta>
<title>layui</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="../layuiadmin/layui/css/layui.css" media="all">
<link rel="stylesheet" href="/css/page_common.css" media="all">
<link rel="icon" href="/img/builder.ico" type="image/x-icon" />
<style type="text/css">
</style>
</head>
<body>
<div class="box">
<div class="title"><h3><b>用户管理</b></h3></div>
<hr>
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">用户名</label>
<div class="layui-input-inline">
<input type="text" name="username" id="username" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-inline">
<button class="layui-btn layui-btn-normal search" data-type="reload" id="search">搜索</button>
</div>
</div>
<table class="layui-hide" id="user" lay-filter="test"></table>
</div>
<script type="text/html" id="toolbarDemo">
<div class="layui-btn-container">
<button class="layui-btn layui-btn-sm" lay-event="addUser">添加用户</button>
</div>
</script>
<script type="text/html" id="barDemo">
<a class="layui-btn layui-btn-xs" lay-event="edit"><i class="layui-icon layui-icon-set-sm"> 编辑</i></a>
<a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="role"><i class="layui-icon layui-icon-username"> 角色修改</i></a>
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i class="layui-icon layui-icon-delete"> 删除</i></a>
</script>
<script type="text/html" id="addModel">
<div style="margin-left:50px;">
<div class="layui-form-item">
<label class="layui-form-label">用户名:</label>
<div class="layui-input-inline">
<input type="text" name="ausername" id="ausername" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">用户姓名:</label>
<div class="layui-input-inline">
<input type="text" name="afullname" id="afullname" lay-verify="required" placeholder="请输入用户姓名" autocomplete="off" class="layui-input">
</div>
</div>
</div>
</script>
<script type="text/html" id="updateModel">
<div style="margin-left:50px;">
<div class="layui-form-item">
<label class="layui-form-label">用户名:</label>
<div class="layui-input-inline">
<input type="text" name="upusername" id="upusername" value="{{userName}}" lay-verify="required" placeholder="请输入用户名" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">用户姓名:</label>
<div class="layui-input-inline">
<input type="text" name="upfullname" id="upfullname" value="{{fullName}}" lay-verify="required" placeholder="请输入用户姓名" autocomplete="off" class="layui-input">
</div>
</div>
</div>
</script>
<script type="text/html" id="roleModel">
<form class="layui-form" action="">
<div class="layui-form-item" pane="">
<div class="layui-input-block" id="roleList">
{{each data}}
<input type="checkbox" ids="{{$value.id}}" class="ro" name="like1[write]" lay-skin="primary" title="{{$value.roleDes}} [{{$value.roleName}}]" {{if $value.have != 0}}checked=""{{/if}}><br>
{{/each}}
</div>
</div>
</form>
</script>
<script src="../layuiadmin/layui/layui.js"></script>
<!-- 注意:如果你直接复制所有代码到本地,上述js路径需要改成你本地的 -->
<script src="/js/template.js"></script>
<script>
layui.use(['table','form'], function(){
var table = layui.table;
var form = layui.form
var $ = layui.$
table.render({
elem: '#user'
,id: 'tableReload'
,url:'/shiro/userList'
,toolbar: '#toolbarDemo'
,title: '用户数据表'
,cols: [
[
{type: 'checkbox', fixed: 'left'}
,{field:'id', title:'ID', width:80, fixed: 'left', unresize: true, sort: true}
,{field:'userName', title:'用户名', }
,{field:'fullName', title:'真实姓名',}
,{fixed: 'right', title:'操作', toolbar: '#barDemo', width:265}
]
]
,page: true
});
$("#username").keydown(function(event){
if(event.keyCode==13){
document.getElementById("search").click();
}
});
var active = {
reload: function () {
var username=$('#username').val();
table.reload('tableReload', {
page: {
curr: 1 //重新从第 1 页开始
}
, where: {
username: username,
}
});
}
};
$('.search').on('click', function () {
var type = $(this).data('type');
active[type] ? active[type].call(this) : '';
});
//头工具栏事件
table.on('toolbar(test)', function(obj){
var checkStatus = table.checkStatus(obj.config.id);
switch(obj.event){
case 'addUser':
top.layer.open({
content:template('addModel', obj)
,btn: ['确定','取消']
,area:["500px","250px"]
,title:'添加用户'
,yes:function(index, layero){
var username=$(top.getActiveTab("ausername"));
if(username.val()==null||username.val()==""){
username.css("border-color","red");
return;
}
var fullname=$(top.getActiveTab("afullname"));
if(fullname.val()==null||fullname.val()==""){
fullname.css("border-color","red");
return;
}
$.ajax({
url:'/shiro/addUser',
dataType:'json',
type:'post',
data:{username:username.val(),fullname:fullname.val()},
success:function(res){
if(res.code==200){
layui.table.reload('tableReload')
top.layer.msg(res.msg,{icon:1,time:2000});
}else{
top.layer.msg(res.msg,{icon:2,time:2000});
}
},
error:function(res){
top.layer.msg("网络异常");
}
})
top.layer.close(index);
},
btn2:function(index){
top.layer.msg("已经取消",{icon:1,time:500})
}
});
break;
};
});
var rolebut=0;
//监听行工具事件
table.on('tool(test)', function(obj){
var data = obj.data;
if(obj.event === 'del'){
top.layer.confirm('真的删除行么',{
btn: ['确定','取消']
},function(index){
$.ajax({
url:'/shiro/delUser',
type:'post',
dataType:'json',
data:{id:obj.data.id},
success:function(res){
top.layer.closeAll();
if(res.code==200){
obj.del();
top.layer.msg(res.msg);
}else{
top.layer.msg(res.msg);
}
},
error:function(){
top.layer.msg("网络异常");
}
})
top.layer.close(index);
},function(index){
top.layer.msg("已经取消")
});
} else if(obj.event === 'edit'){
var id=data.id;
top.layer.open({
content:template('updateModel', data)
,btn: ['确定','取消']
,area:["500px","250px"]
,title:'修改用户信息'
,yes:function(index, layero){
var username=$(top.getActiveTab("upusername"));
var fullname=$(top.getActiveTab("upfullname"));
if(username.val()==null||username.val()==""){
username.css("border-color","red");
return;
}
if(fullname.val()==null||fullname.val()==""){
fullname.css("border-color","red");
return;
}
if(fullname.val()==data.fullName && username.val()==data.userName){
top.layer.msg("您没有对当前的数据进行任何操作",{icon:2,time:2000});
return;
}
$.ajax({
url:'/shiro/updateUser',
dataType:'json',
type:'post',
data:{userId:id,username:username.val(),fullname:fullname.val()},
success:function(res){
if(res.code==200){
obj.update({//修改某一行元素
userName:username.val(),
fullName: fullname.val()
});
top.layer.msg(res.msg,{icon:1,time:2000});
}else{
top.layer.msg(res.msg,{icon:2,time:2000});
}
},
error:function(res){
top.layer.msg("网络异常");
}
})
top.layer.close(index);
},
btn2:function(index){
top.layer.msg("已经取消",{icon:1,time:500})
}
});
}else if(obj.event === 'role'){
if(rolebut==0){
rolebut=1;
$.ajax({
url:'/shiro/getRoleList',
dataType:'json',
type:'post',
data:{userId:data.id},
success:function(res){
if(res.code==200){
layer.open({
content:template('roleModel', res)
,btn: ['确定','取消']
,area:["450px","350px"]
,title:'修改用户角色信息'
,yes:function(index, layero){
var ids="";
$(".ro").each(function(){
if($(this).prop("checked")){
ids+=$(this).attr("ids")+"-";
}
})
$.ajax({
url:'/shiro/setRoleList',
dataType:'json',
type:'post',
data:{userId:data.id,ids:ids},
success:function(res){
if(res.code==200){
top.layer.msg(res.msg,{icon:1,time:1000});
}else{
top.layer.msg(res.msg,{icon:2,time:1000});
}
console.log(res)
}
})
layer.close(index);
},
btn2:function(index){
top.layer.msg("已经取消",{icon:1,time:500})
}
,success:function(){
form.render();
rolebut=0;
}
});
}else{
top.layer.msg(res.msg,{icon:2,time:2000})
}
},
error:function(res){
top.layer.msg("网络异常",{icon:2,time:2000})
}
})
}
}
});
});
</script>
</body>
</html>
layui渲染select执行:form.render('select');
<select lay-filter="business" class="select" lay-verify="type" name="business" >
<option value="0" >请选择</option>
<option value="1" >张三</option>
</select>
layui select选择事件监听
form.on('select(business)', function(data){
alert(1)
})
layui 表格从新渲染:
table.reload('table', {
where: {
kcId:$('#kc').val(),
zjId:$('#zj').val(),
zt:$('#zt').val()
}
});