|
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
|
|
|
pageEncoding="UTF-8"%> <!-- 设置页面的语言为Java，字符编码为UTF-8,设置页面的字符编码为UTF-8 -->
|
|
|
<!DOCTYPE html> <!-- 声明文档类型为HTML5 -->
|
|
|
<html lang="en"> <!-- 定义页面的语言为英文 -->
|
|
|
<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{ <!-- 自定义表格样式 -->
|
|
|
margin: 0 0px; <!-- 设置表格的外边距为0 -->
|
|
|
}
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
<body>
|
|
|
<!-- 表单 -->
|
|
|
<table class="layui-hide" id="cardTable" lay-filter="formFilter"></table> <!-- 设置一个隐藏的表格元素，表格的ID为"cardTable" -->
|
|
|
<script src="../public/layui/layui.js" charset="utf-8"></script> <!-- 引入layui的JS文件 -->
|
|
|
<!-- 头部工具栏 -->
|
|
|
<script type="text/html" id="headBar">
|
|
|
条件搜索： <!-- 搜索框的标签 -->
|
|
|
<div class="layui-inline"> <!-- 表单项 -->
|
|
|
<select id="condition" name="condition" lay-verify="required"> <!-- 条件选择框，用于选择搜索字段 -->
|
|
|
<option value=""></option> <!-- 默认选项 -->
|
|
|
<option value="id">ID</option> <!-- 搜索条件：ID -->
|
|
|
<option value="reader">姓名</option> <!-- 搜索条件：姓名 -->
|
|
|
<option value="rule_id">借阅规则</option> <!-- 搜索条件：借阅规则 -->
|
|
|
<option value="status">状态</option> <!-- 搜索条件：状态 -->
|
|
|
</select>
|
|
|
</div>
|
|
|
<div class="layui-inline"> <!-- 表单项 -->
|
|
|
<input class="layui-input" id="conditionValue" name="conditionValue" id="demoReload" autocomplete="off" placeholder="请输入搜索内容"> <!-- 输入框，用于输入搜索的内容 -->
|
|
|
</div>
|
|
|
<button class="layui-btn" name="condition" data-type="reload" lay-event="search">搜索</button> <!-- 搜索按钮 -->
|
|
|
<button type="button" class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">添加借阅证</i></button> <!-- 添加借阅证按钮 -->
|
|
|
</script>
|
|
|
|
|
|
<!-- 表格侧边栏的操作 -->
|
|
|
<script type="text/html" id="operateBar">
|
|
|
<a class="layui-btn layui-btn-xs layui-btn-normal" lay-event="cardBorrow">查看借阅</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>
|
|
|
<!-- 状态模板 -->
|
|
|
<script type="text/html" id="statusTpl">
|
|
|
{{# if(d.status == 0){ }} <!-- 如果借阅证状态为0（挂失） -->
|
|
|
<span style="color:red">挂失<span> <!-- 显示“挂失”文本，颜色为红色 -->
|
|
|
{{# } else { }} <!-- 否则 -->
|
|
|
可用 <!-- 显示“可用”状态 -->
|
|
|
{{# } }}
|
|
|
</script>
|
|
|
|
|
|
<script>
|
|
|
layui.use(['table','jquery'], function(){ <!-- 引入layui的表格和jquery模块 -->
|
|
|
$ = layui.jquery; <!-- 使用jQuery -->
|
|
|
var table = layui.table; <!-- 获取layui的表格模块 -->
|
|
|
// 进行渲染
|
|
|
var tableIns = table.render({
|
|
|
elem: '#cardTable' <!-- 表格的元素ID -->
|
|
|
,url:'./cardList' <!-- 请求数据的URL -->
|
|
|
,toolbar: '#headBar' <!-- 设置表格的头部工具栏 -->
|
|
|
,height: 600 <!-- 设置表格的高度为600px -->
|
|
|
,cols: [[ <!-- 表格的列设置 -->
|
|
|
{field:'id', width:180, title: 'ID', sort: true} <!-- 显示ID列，支持排序 -->
|
|
|
,{field:'reader', width:180, title: '用户名', sort: true} <!-- 显示用户名列，支持排序 -->
|
|
|
,{field:'rule_id', width:180, title: '借阅规则', sort: true} <!-- 显示借阅规则列，支持排序 -->
|
|
|
,{field:'status', width:180, title: '状态', templet: '#statusTpl'} <!-- 显示状态列，使用模板显示“挂失”或“可用” -->
|
|
|
,{fixed: 'right', title:'操作', toolbar: '#operateBar', align: 'center', width:250} <!-- 显示操作列，固定在右侧，使用自定义工具栏 -->
|
|
|
]]
|
|
|
,page: true <!-- 启用分页 -->
|
|
|
});
|
|
|
|
|
|
// 头部工具栏事件
|
|
|
table.on('toolbar(formFilter)', function(obj){ <!-- 监听头部工具栏的操作 -->
|
|
|
var checkStatus = table.checkStatus(obj.config.id); <!-- 获取选中的行 -->
|
|
|
switch(obj.event){ <!-- 根据事件执行不同的操作 -->
|
|
|
// 条件查找借阅证
|
|
|
case 'search':
|
|
|
var conditionValue = $('#conditionValue'); <!-- 获取输入框中的搜索内容 -->
|
|
|
var condition = $('#condition'); <!-- 获取条件选择框的值 -->
|
|
|
// 进行搜索，重新渲染表格
|
|
|
tableIns.reload({
|
|
|
where: { // 设置异步数据接口的额外参数
|
|
|
"condition": condition.val(),
|
|
|
"conditionValue": conditionValue.val()
|
|
|
}
|
|
|
,page: {
|
|
|
curr: 1 // 重新从第1页开始
|
|
|
}
|
|
|
});
|
|
|
break;
|
|
|
// 添加借阅证
|
|
|
case 'add':
|
|
|
var addCardLayer = layer.open({ <!-- 打开一个新窗口，用于添加借阅证 -->
|
|
|
type: 2,
|
|
|
title: '添加借阅证',
|
|
|
area: ['800px', '500px'],
|
|
|
maxmin: true,
|
|
|
shadeClose: true,
|
|
|
content: 'cardadd.jsp', <!-- 加载添加借阅证页面 -->
|
|
|
end: function(){
|
|
|
$('.layui-laypage-btn').click(); <!-- 关闭窗口后刷新当前页 -->
|
|
|
}
|
|
|
});
|
|
|
|
|
|
//layer.full(addCardLayer); <!-- 注释掉的代码，可能是为了最大化窗口 -->
|
|
|
};
|
|
|
});
|
|
|
|
|
|
// 侧边工具栏事件
|
|
|
table.on(('tool(formFilter)'), function(obj){ <!-- 监听侧边工具栏操作 -->
|
|
|
var data = obj.data; <!-- 获取当前行的数据 -->
|
|
|
var layEvent = obj.event; <!-- 获取当前事件 -->
|
|
|
var tr = obj.tr; <!-- 获取当前行的tr元素 -->
|
|
|
var id = data.id; <!-- 获取当前行的ID -->
|
|
|
switch(obj.event){ <!-- 根据事件执行不同的操作 -->
|
|
|
case 'edit':
|
|
|
layer.open({ <!-- 打开编辑窗口 -->
|
|
|
type: 2,
|
|
|
title: '更改信息',
|
|
|
area: ['800px', '600px'],
|
|
|
maxmin: true,
|
|
|
shadeClose: true,
|
|
|
content: 'cardedit.jsp?id=' +id, <!-- 加载编辑借阅证页面，并传递ID -->
|
|
|
end: function(){
|
|
|
$(".layui-laypage-btn").click(); <!-- 刷新当前页 -->
|
|
|
}
|
|
|
})
|
|
|
break;
|
|
|
case 'del':
|
|
|
layer.confirm('确认删除么?<br><span style="color:red;">这将删除该借阅证的所有记录</span>',function(index){ <!-- 弹出删除确认框 -->
|
|
|
layer.close(index); <!-- 关闭确认框 -->
|
|
|
$.ajax({
|
|
|
url: './cardDel', <!-- 发送删除请求 -->
|
|
|
type: 'get',
|
|
|
data: 'id=' +id, <!-- 传递要删除的ID -->
|
|
|
dataType: 'json',
|
|
|
timeout: 3000, <!-- 设置超时时间为3000毫秒 -->
|
|
|
success: function(data){ <!-- 请求成功后的回调函数 -->
|
|
|
if(data.code == 0){ <!-- 如果删除成功 -->
|
|
|
console.log(data); <!-- 输出删除结果 -->
|
|
|
layer.msg(data.msg,{ <!-- 显示删除成功的消息 -->
|
|
|
icon: 6,
|
|
|
time: 1500
|
|
|
})
|
|
|
// 还是本页数据
|
|
|
$(".layui-laypage-btn").click(); <!-- 刷新当前页 -->
|
|
|
}else{ <!-- 如果删除失败 -->
|
|
|
layer.open({
|
|
|
title: '失败',
|
|
|
content: data.msg <!-- 显示错误信息 -->
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
error: function(){ <!-- 请求失败的回调函数 -->
|
|
|
layer.msg("连接超时"); <!-- 显示超时信息 -->
|
|
|
}
|
|
|
})
|
|
|
|
|
|
})
|
|
|
break;
|
|
|
case 'cardBorrow':
|
|
|
layer.open({ <!-- 打开借阅历史窗口 -->
|
|
|
type: 2,
|
|
|
title: '借阅历史',
|
|
|
area: ['800px', '600px'],
|
|
|
maxmin: true,
|
|
|
shadeClose: true,
|
|
|
content: 'cardborrow.jsp?id=' +id, <!-- 加载借阅历史页面，并传递ID -->
|
|
|
end: function(){
|
|
|
//$(".layui-laypage-btn").click(); <!-- 此处可能是未使用的代码 -->
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
});
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
