234 lines
9.2 KiB
HTML
234 lines
9.2 KiB
HTML
|
<!DOCTYPE html>
|
|||
|
|
<html lang="en">
|
|||
|
|
<head>
|
|||
|
|
<meta charset="UTF-8">
|
|||
|
|
<title>Title</title>
|
|||
|
|
<link rel="stylesheet" href="../../component/layui/css/layui.css">
|
|||
|
|
<link rel="stylesheet" href="../../assets/css/pearone.css">
|
|||
|
|
<style>
|
|||
|
|
body{
|
|||
|
|
margin: 10px;
|
|||
|
|
background-color:lightgray;
|
|||
|
|
}
|
|||
|
|
.layui-table-cell{
|
|||
|
|
height:40px!important;
|
|||
|
|
line-height: 40px!important;
|
|||
|
|
}
|
|||
|
|
</style>
|
|||
|
|
</head>
|
|||
|
|
<body>
|
|||
|
|
|
|||
|
|
<div class="layui-card">
|
|||
|
|
<div class="layui-card-body">
|
|||
|
|
|
|||
|
|
<form class="layui-form layui-form-pane" action="#" >
|
|||
|
|
<div class="layui-form-item">
|
|||
|
|
<label class="layui-form-label">账号</label>
|
|||
|
|
<div class="layui-input-inline">
|
|||
|
|
<input type="text" name="userName" lay-verify="title" autocomplete="off" placeholder="请输入账号" class="layui-input">
|
|||
|
|
</div>
|
|||
|
|
<label class="layui-form-label">用户名</label>
|
|||
|
|
<div class="layui-input-inline">
|
|||
|
|
<input type="text" name="realName" lay-verify="title" autocomplete="off" placeholder="请输入用户名" class="layui-input">
|
|||
|
|
</div>
|
|||
|
|
<label class="layui-form-label">状态</label>
|
|||
|
|
<div class="layui-input-inline">
|
|||
|
|
<select name="isLogin" lay-filter="aihao">
|
|||
|
|
<option value="">全部</option>
|
|||
|
|
<option value="0">启用</option>
|
|||
|
|
<option value="1">禁用</option>
|
|||
|
|
|
|||
|
|
</select>
|
|||
|
|
</div>
|
|||
|
|
<div class="layui-input-inline">
|
|||
|
|
<button type="submit" class="layui-btn" lay-submit="" lay-filter="demo1">搜索</button>
|
|||
|
|
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
|
|||
|
|
</form>
|
|||
|
|
|
|||
|
|
<table class="layui-hide" id="demo" lay-filter="test"></table>
|
|||
|
|
|
|||
|
|
|
|||
|
|
<script type="text/html" id="toolbarDemo">
|
|||
|
|
<div class="layui-btn-container">
|
|||
|
|
<button class="layui-btn layui-bg-blue" lay-event="add">创建用户</button>
|
|||
|
|
<button class="layui-btn layui-btn-danger" lay-event="delete">批量删除</button>
|
|||
|
|
|
|||
|
|
</div>
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<script type="text/html" id="avatar">
|
|||
|
|
<img src="../../assets/images/avatar.jpg" style="width: 38px;height: 38px;border-radius: 3px;" />
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<script type="text/html" id="switchTpl">
|
|||
|
|
<!-- 这里的 checked 的状态只是演示 -->
|
|||
|
|
<input type="checkbox" name="sex" value="{{d.userId}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="sexDemo" {{ d.isLogin == 0 ? 'checked' : '' }}>
|
|||
|
|
</script>
|
|||
|
|
|
|||
|
|
<script type="text/html" id="barDemo">
|
|||
|
|
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="editPassword">修改密码</a>
|
|||
|
|
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
|
|||
|
|
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
|
|||
|
|
</script>
|
|||
|
|
</div>
|
|||
|
|
</div>
|
|||
|
|
<script src="../../component/layui/layui.js"></script>
|
|||
|
|
<script src="../../modules/lay-config.js"></script>
|
|||
|
|
<script>
|
|||
|
|
layui.use(['table','layer','jquery','form','pearone'], function(){
|
|||
|
|
var layer = layui.layer //弹层
|
|||
|
|
,table = layui.table
|
|||
|
|
,$ = layui.jquery
|
|||
|
|
,form = layui.form
|
|||
|
|
,pearone = layui.pearone;
|
|||
|
|
var tabIns = table.render({
|
|||
|
|
elem: '#demo'
|
|||
|
|
,method:'get'
|
|||
|
|
,url: '../../api/user.json' //数据接口
|
|||
|
|
,title: '用户表'
|
|||
|
|
,page: true //开启分页
|
|||
|
|
,toolbar: '#toolbarDemo' //开启工具栏，此处显示默认图标，可以自定义模板，详见文档
|
|||
|
|
,totalRow: true //开启合计行
|
|||
|
|
,cols: [
|
|||
|
|
[ //表头
|
|||
|
|
{type: 'checkbox', fixed: 'left'}
|
|||
|
|
,{field: 'userId', width:70, fixed: 'left',templet:'#avatar'}
|
|||
|
|
,{field: 'realName', title: '姓名', width: 120}
|
|||
|
|
,{field: 'userName', title: '用户名'}
|
|||
|
|
,{field: 'email', title: '邮箱', width:180, sort: true}
|
|||
|
|
,{field: 'phone', title: '联系方式',width:180}
|
|||
|
|
,{field: 'sex', title: '性别', width: 120}
|
|||
|
|
,{field: 'status', title: '状态', templet: '#switchTpl',width:100}
|
|||
|
|
,{fixed: 'right',width: 240, align:'center', toolbar: '#barDemo'}
|
|||
|
|
]
|
|||
|
|
]
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//监听性别操作
|
|||
|
|
form.on('switch(sexDemo)', function(obj){
|
|||
|
|
var url ="";
|
|||
|
|
if(obj.elem.checked==true)
|
|||
|
|
{
|
|||
|
|
//调用开启
|
|||
|
|
url = "/user/enable";
|
|||
|
|
}else{
|
|||
|
|
//调用禁用
|
|||
|
|
url = "/user/disable";
|
|||
|
|
}
|
|||
|
|
pearone.put(url,{userId:this.value},function (data) {
|
|||
|
|
pearone.success(data.msg);
|
|||
|
|
})
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//监听头工具栏事件
|
|||
|
|
table.on('toolbar(test)', function(obj){
|
|||
|
|
var checkStatus = table.checkStatus(obj.config.id)
|
|||
|
|
,data = checkStatus.data; //获取选中的数据
|
|||
|
|
switch(obj.event){
|
|||
|
|
case 'add':
|
|||
|
|
//实现用户添加功能
|
|||
|
|
layer.open({
|
|||
|
|
type: 2,
|
|||
|
|
title:"用户创建",
|
|||
|
|
shadeClose: false,
|
|||
|
|
shade: 0.3,
|
|||
|
|
area: ["80%","80%"],
|
|||
|
|
content: "/user/add"
|
|||
|
|
});
|
|||
|
|
break;
|
|||
|
|
case 'update':
|
|||
|
|
if(data.length === 0){
|
|||
|
|
layer.msg('请选择一行');
|
|||
|
|
} else if(data.length > 1){
|
|||
|
|
layer.msg('只能同时编辑一个');
|
|||
|
|
} else {
|
|||
|
|
layer.alert('编辑 [id]：'+ checkStatus.data[0].id);
|
|||
|
|
}
|
|||
|
|
break;
|
|||
|
|
case 'delete':
|
|||
|
|
if(data.length === 0){
|
|||
|
|
layer.msg('请选择一行');
|
|||
|
|
} else {
|
|||
|
|
var ids = '';
|
|||
|
|
layui.each(data,function(k,v){
|
|||
|
|
ids += v.userId+',';
|
|||
|
|
});
|
|||
|
|
ids = ids.substr(0,ids.length-1);
|
|||
|
|
|
|||
|
|
console.log("获取的ID值:"+ids);
|
|||
|
|
layer.confirm('真的删除行么', function(index){
|
|||
|
|
|
|||
|
|
$.ajax({
|
|||
|
|
url:'/user/remove',
|
|||
|
|
data:{id:ids},
|
|||
|
|
dataType:'json',
|
|||
|
|
type:'delete',
|
|||
|
|
success:function(data){
|
|||
|
|
if(data.success){
|
|||
|
|
layer.msg("删除成功",{icon:1,time:1000},function(){
|
|||
|
|
//实现用户删除功能
|
|||
|
|
tabIns.reload();
|
|||
|
|
layer.close(index);
|
|||
|
|
})
|
|||
|
|
}else{
|
|||
|
|
layer.msg("删除失败",{icon:2,time:1000});
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
}
|
|||
|
|
break;
|
|||
|
|
};
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
//监听行工具事件
|
|||
|
|
table.on('tool(test)', function(obj){ //注：tool 是工具条事件名，test 是 table 原始容器的属性 lay-filter="对应的值"
|
|||
|
|
var data = obj.data //获得当前行数据
|
|||
|
|
,layEvent = obj.event; //获得 lay-event 对应的值
|
|||
|
|
if(layEvent === 'detail'){
|
|||
|
|
layer.msg('查看操作');
|
|||
|
|
} else if(layEvent === 'del'){
|
|||
|
|
layer.confirm('真的删除行么', function(index){
|
|||
|
|
pearone.request('/user/remove','delete',{id:obj.data.userId},function(data){
|
|||
|
|
pearone.success(data.msg,function(){
|
|||
|
|
obj.del(); //删除对应行（tr）的DOM结构
|
|||
|
|
layer.close(index); //关闭当前确认窗体
|
|||
|
|
})
|
|||
|
|
})
|
|||
|
|
});
|
|||
|
|
} else if(layEvent === 'edit'){
|
|||
|
|
//实现用户修改功能
|
|||
|
|
layer.open({
|
|||
|
|
type: 2,
|
|||
|
|
title:"用户修改",
|
|||
|
|
shadeClose: false,
|
|||
|
|
shade: 0.3,
|
|||
|
|
area: ["80%","80%"],
|
|||
|
|
content: "/user/edit?userId="+obj.data.userId
|
|||
|
|
});
|
|||
|
|
}else if(layEvent === "editPassword"){
|
|||
|
|
pearone.open("修改密码","/user/editPassword?userId="+obj.data.userId)
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
form.on('submit(demo1)', function(data){
|
|||
|
|
|
|||
|
|
tabIns.reload({
|
|||
|
|
where: data.field
|
|||
|
|
,page: {
|
|||
|
|
curr: 1 //重新从第 1 页开始
|
|||
|
|
}
|
|||
|
|
});
|
|||
|
|
return false;
|
|||
|
|
});
|
|||
|
|
|
|||
|
|
|
|||
|
|
|
|||
|
|
});
|
|||
|
|
</script>
|
|||
|
|
</body>
|