|
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
|
|
|
pageEncoding="UTF-8"%>
|
|
|
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
|
|
|
<html>
|
|
|
<head>
|
|
|
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
|
|
|
<title>Insert title here</title> <!-- 页面标题 -->
|
|
|
<meta charset="utf-8"> <!-- 设置文档的字符编码为UTF-8 -->
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge">
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1"> <!-- 设置视口宽度和初始缩放比例 -->
|
|
|
<title>图书管理系统</title> <!-- 页面标题 -->
|
|
|
<!-- Bootstrap CSS -->
|
|
|
<link href="../css/bootstrap.min.css" rel="stylesheet"> <!-- 引入Bootstrap样式表 -->
|
|
|
<link href="../css/bootstrap-table.css" rel="stylesheet"> <!-- 引入Bootstrap表格样式表 -->
|
|
|
<!-- jQuery (Bootstrap 的所有 JavaScript 插件都依赖 jQuery，所以必须放在前边) -->
|
|
|
<link rel="stylesheet" href="../public/layui/css/layui.css" media="all"> <!-- 引入LayUI样式表 -->
|
|
|
<style>
|
|
|
.layui-table,.layui-table-view{
|
|
|
margin: 0 0px; /* 设置表格的外边距 */
|
|
|
}
|
|
|
.layui-form-select dl dd.layui-this { background-color: #01AAED; } /* 设置下拉选择框选中项的背景颜色 */
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<!-- 使用 JSP Bean -->
|
|
|
<jsp:useBean id="msg" scope="session" class="javabean.JDBCBean"></jsp:useBean> <!-- 声明一个JSP Bean，ID为msg，作用域为session，类为javabean.JDBCBean -->
|
|
|
|
|
|
<!-- 表单 -->
|
|
|
<table class="layui-hide" id="cardTable" lay-filter="formFilter"></table> <!-- 定义一个隐藏的表格，ID为cardTable，用于LayUI的过滤功能 -->
|
|
|
|
|
|
<!-- 头部工具栏 -->
|
|
|
条件搜索：
|
|
|
<div class="layui-inline">
|
|
|
<select id="condition" name="condition" lay-verify="required"> <!-- 创建一个下拉选择框，ID为condition，名称为condition，验证规则为必填 -->
|
|
|
<option value=""></option> <!-- 空选项 -->
|
|
|
<option value="id">图书编号</option> <!-- 图书编号选项 -->
|
|
|
<option value="name">图书名称</option> <!-- 图书名称选项 -->
|
|
|
<option value="author">作者</option> <!-- 作者选项 -->
|
|
|
<option value="position">位置</option> <!-- 位置选项 -->
|
|
|
<option value="description">描述</option> <!-- 描述选项 -->
|
|
|
</select>
|
|
|
</div>
|
|
|
<div class="layui-inline">
|
|
|
<input class="layui-input" id="conditionValue" name="conditionValue" id="demoReload" autocomplete="off"> <!-- 创建一个输入框，类为layui-input，ID为conditionValue，名称为conditionValue，自动完成关闭 -->
|
|
|
</div>
|
|
|
<button class="layui-btn layui-bg-blue" name="condition" data-type="reload" lay-event="search">搜索</button> <!-- 创建一个按钮，类为layui-btn和layui-bg-blue，名称为condition，数据类型为reload，事件为search，显示文本为搜索 -->
|
|
|
|
|
|
<!-- 引入 layui 和 jQuery -->
|
|
|
<script src="../public/layui/layui.js"></script> <!-- 引入LayUI脚本文件 -->
|
|
|
<script src="../public/jquery/jquery.min.js"></script> <!-- 引入jQuery脚本文件 -->
|
|
|
<script>
|
|
|
layui.use(['table','jquery'], function(){ // 使用LayUI的table和jQuery模块
|
|
|
$ = layui.jquery; // 将LayUI的jQuery赋值给$变量
|
|
|
var table = layui.table; // 获取LayUI的table对象
|
|
|
// 进行渲染
|
|
|
var tableIns = table.render({
|
|
|
elem: '#cardTable', // 绑定元素，即表格的ID
|
|
|
url: './book', // 数据接口地址
|
|
|
toolbar: '#headBar', // 头部工具栏的ID
|
|
|
cols: [[ // 表头
|
|
|
{field:'id', width:120, title: '图书编号', sort: true}, // 图书编号列，宽度120，标题为图书编号，可排序
|
|
|
{field:'name', width:130, title: '图书名称', sort: true}, // 图书名称列，宽度130，标题为图书名称，可排序
|
|
|
{field:'author', width:100, title: '作者', sort: true}, // 作者列，宽度100，标题为作者，可排序
|
|
|
{field:'library_id', title: '图书馆', width: 100, sort: true}, // 图书馆列，标题为图书馆，宽度100，可排序
|
|
|
{field:'sort_id', width:100, title: '分类', sort: true}, // 分类列，宽度100，标题为分类，可排序
|
|
|
{field:'position', width:100, title: '位置', sort: true}, // 位置列，宽度100，标题为位置，可排序
|
|
|
{field:'status', width:100, title: '状态', sort: true, templet: function (item) { // 状态列，宽度100，标题为状态，可排序，自定义模板函数
|
|
|
var btns = ""; // 初始化按钮字符串
|
|
|
if(item.status == '0'){ // 如果状态为0
|
|
|
btns += '<span class="" style="color:orange">已借出</span>'; // 添加已借出的红色文字
|
|
|
} else if(item.status == '1'){ // 如果状态为1
|
|
|
btns += '<span class="" style="color:green">未借出</span>'; // 添加未借出的绿色文字
|
|
|
}
|
|
|
return btns; // 返回按钮字符串
|
|
|
}},
|
|
|
{field:'description', minWidth:80, title: '描述'}, // 描述列，最小宽度80，标题为描述
|
|
|
]],
|
|
|
page: true // 开启分页
|
|
|
});
|
|
|
// 头部工具栏事件
|
|
|
table.on('toolbar(formFilter)', function(obj){ // 监听头部工具栏事件
|
|
|
var checkStatus = table.checkStatus(obj.config.id); // 获取选中行的状态
|
|
|
switch(obj.event){ // 根据事件类型执行不同的操作
|
|
|
case 'condition': // 如果事件类型是condition
|
|
|
var condition = $('#condition'); // 获取条件选择框
|
|
|
var conditionValue = $('#conditionValue'); // 获取条件值输入框
|
|
|
// 条件查找图书证
|
|
|
var value = conditionValue.val(); // 获取输入框的值
|
|
|
conditionValue.val(''); // 清空输入框的值
|
|
|
tableIns.reload({ // 重新加载表格数据
|
|
|
where: { // 查询参数
|
|
|
condition: condition.val(), // 条件字段
|
|
|
value: value // 条件值
|
|
|
},
|
|
|
page: { // 分页参数
|
|
|
curr: 1 // 从第一页开始重新加载
|
|
|
}
|
|
|
});
|
|
|
break;
|
|
|
case 'add': // 如果事件类型是add
|
|
|
var addCardLayer = layer.open({ // 打开新增图书证的弹出层
|
|
|
type: 2, // 弹出层类型为iframe
|
|
|
title: '添加借书证', // 弹出层标题
|
|
|
area: ['800px', '500px'], // 弹出层大小
|
|
|
maxmin: true, // 允许最大化和最小化
|
|
|
shadeClose: true, // 点击遮罩层是否允许关闭
|
|
|
content: 'addBook.jsp', // 弹出层内容页面路径
|
|
|
});
|
|
|
break;
|
|
|
}
|
|
|
});
|
|
|
// 侧边工具栏事件
|
|
|
table.on(('tool(formFilter)'), function(obj){ // 监听侧边工具栏事件
|
|
|
var data = obj.data; // 获取当前行的数据
|
|
|
var layEvent = obj.event; // 获取事件类型
|
|
|
var tr = obj.tr; // 获取当前行的DOM对象
|
|
|
switch(layEvent){ // 根据事件类型执行不同的操作
|
|
|
case 'edit': // 如果事件类型是edit
|
|
|
layer.open({ // 打开更改信息的弹出层
|
|
|
type: 2, // 弹出层类型为iframe
|
|
|
title: '更改信息', // 弹出层标题
|
|
|
area: ['800px', '600px'], // 弹出层大小
|
|
|
maxmin: true, // 允许最大化和最小化
|
|
|
shadeClose: true, // 点击遮罩层是否允许关闭
|
|
|
content: '', // 这里需要填写实际的内容页面路径
|
|
|
});
|
|
|
break;
|
|
|
}
|
|
|
})
|
|
|
});
|
|
|
</script>
|
|
|
</body>
|
|
|
</html> |
