|
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
|
|
|
pageEncoding="UTF-8"%> // 设置页面的字符编码为UTF-8
|
|
|
|
|
|
<!DOCTYPE html> // 定义文档类型为HTML5
|
|
|
<html lang="en"> // 设置HTML文档的语言为英语
|
|
|
<head>
|
|
|
<meta charset="UTF-8"> // 设置页面字符编码为UTF-8
|
|
|
<title>借阅卡</title> // 设置页面标题为“借阅卡”
|
|
|
<link rel="stylesheet" href="../public/layui/css/layui.css" media="all"> // 引入layui的CSS文件，用于页面样式
|
|
|
<style>
|
|
|
.layui-table,.layui-table-view{ // 自定义样式，调整layui表格和表格视图的外边距
|
|
|
margin: 0 0px;
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
<body>
|
|
|
<!-- 表单 -->
|
|
|
<table class="layui-hide" id="managerTable" lay-filter="formFilter"></table> // 创建表格，指定id为“managerTable”，并设置过滤器为“formFilter”
|
|
|
<script src="../public/layui/layui.js" charset="utf-8"></script> // 引入layui的JavaScript文件，提供UI功能和交互
|
|
|
<!-- 头部工具栏 -->
|
|
|
<script type="text/html" id="headBar"> // 定义头部工具栏的HTML模板，id为“headBar”
|
|
|
<button type="button" class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">添加管理员</i></button> // 按钮，点击触发“add”事件，用于添加管理员
|
|
|
</script>
|
|
|
|
|
|
<!-- 表格侧边栏 -->
|
|
|
<script type="text/html" id="operateBar"> // 定义操作栏的HTML模板，id为“operateBar”
|
|
|
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> // 编辑按钮，点击触发“edit”事件
|
|
|
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> // 删除按钮，点击触发“del”事件
|
|
|
</script>
|
|
|
|
|
|
<script> // 开始JavaScript代码块
|
|
|
layui.use(['table','jquery'], function(){ // 引入layui的表格和jQuery模块
|
|
|
$ = layui.jquery; // 使用jQuery库
|
|
|
var table = layui.table; // 获取layui表格模块
|
|
|
|
|
|
// 进行渲染表格
|
|
|
var tableIns = table.render({
|
|
|
elem: '#managerTable' // 表格的元素，指定为“managerTable”
|
|
|
,url:'./managerList' // 设置表格数据来源的URL
|
|
|
,toolbar: '#headBar' // 设置头部工具栏的模板ID
|
|
|
,height: 600 // 设置表格的高度
|
|
|
,cols: [[ // 设置表格的列
|
|
|
{field:'id', width:80, title: 'ID', sort: true} // 列ID，宽度80，标题为“ID”，支持排序
|
|
|
,{field:'account', width:80, title: '账号', sort: true} // 列账号，宽度80，标题为“账号”，支持排序
|
|
|
,{field:'name', width:80, title: '姓名'} // 列姓名，宽度80，标题为“姓名”
|
|
|
,{field:'email', title: '邮箱', minWidth: 150} // 列邮箱，最小宽度150，标题为“邮箱”
|
|
|
,{fixed: 'right', title:'操作', toolbar: '#operateBar', align: 'center', width:150} // 操作列，固定在右侧，宽度150，使用“operateBar”模板
|
|
|
]]
|
|
|
});
|
|
|
|
|
|
// 头部工具栏事件
|
|
|
table.on('toolbar(formFilter)', function(obj){ // 监听头部工具栏的事件
|
|
|
var checkStatus = table.checkStatus(obj.config.id); // 获取选中行的数据
|
|
|
switch(obj.event){ // 根据事件类型进行处理
|
|
|
case 'add': // 添加管理员
|
|
|
var addCardLayer = layer.open({ // 打开一个弹出层
|
|
|
type: 2, // 弹出层类型为iframe
|
|
|
title: '添加管理员', // 弹出层标题
|
|
|
area: ['800px', '500px'], // 弹出层的宽度和高度
|
|
|
maxmin: true, // 允许最大化和最小化
|
|
|
shadeClose: true, // 点击遮罩层关闭
|
|
|
content: 'manageradd.jsp', // 弹出层内容页面
|
|
|
});
|
|
|
//layer.full(addCardLayer); // 此行已注释，可以让弹出层最大化
|
|
|
};
|
|
|
});
|
|
|
|
|
|
// 侧边工具栏事件
|
|
|
table.on(('tool(formFilter)'), function(obj){ // 监听表格的工具栏事件
|
|
|
var data = obj.data; // 获取当前行的数据
|
|
|
var layEvent = obj.event; // 获取事件类型
|
|
|
var id = data.id; // 获取管理员的ID
|
|
|
var tr = obj.tr; // 获取当前行的tr元素
|
|
|
switch(obj.event){ // 根据事件类型进行处理
|
|
|
case 'edit': // 编辑管理员
|
|
|
layer.open({ // 打开一个弹出层
|
|
|
type: 2, // 弹出层类型为iframe
|
|
|
title: '更改信息', // 弹出层标题
|
|
|
area: ['800px', '600px'], // 弹出层的宽度和高度
|
|
|
maxmin: true, // 允许最大化和最小化
|
|
|
shadeClose: true, // 点击遮罩层关闭
|
|
|
content: 'manageredit.jsp?id=' +id, // 弹出层内容页面，传递管理员ID作为参数
|
|
|
})
|
|
|
break;
|
|
|
case 'del': // 删除管理员
|
|
|
layer.confirm('确定要删除么？',function(){ // 弹出确认框
|
|
|
layer.msg("ok"); // 显示消息
|
|
|
$.ajax({ // 使用AJAX发送删除请求
|
|
|
url: './managerDel', // 删除管理员的URL
|
|
|
data: 'id=' +id, // 发送管理员ID
|
|
|
type: 'get', // 使用GET请求
|
|
|
dataType: 'json', // 返回的数据格式为JSON
|
|
|
timeout: 3000, // 请求超时时间为3000毫秒
|
|
|
success: function(data){ // 请求成功的回调函数
|
|
|
layer.msg("???"); // 显示提示消息
|
|
|
if(data.code == 0){ // 如果删除成功
|
|
|
layer.msg(data.msg,{ // 显示成功消息
|
|
|
icon: 6, // 成功图标
|
|
|
anim: 5, // 动画效果
|
|
|
time: 500 // 消息显示500毫秒
|
|
|
});
|
|
|
setTimeout(function(){ // 延时操作
|
|
|
parent.location.reload(); // 刷新父页面
|
|
|
},500);
|
|
|
}else{ // 如果删除失败
|
|
|
layer.msg(data.code); // 显示错误消息
|
|
|
}
|
|
|
},
|
|
|
error: function(){ // 请求失败的回调函数
|
|
|
layer.msg("连接超时"); // 显示连接超时消息
|
|
|
}
|
|
|
})
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
});
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
