|
|
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
|
|
|
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
|
|
|
<!-- 上述两行是JSP页面相关指令：
|
|
|
第一行用于设置该JSP页面的内容类型为text/html（即HTML格式页面），同时指定字符编码为UTF-8，表明页面使用Java语言来处理逻辑。
|
|
|
第二行引入了JSTL（JavaServer Pages Standard Tag Library）核心标签库，定义前缀为“c”，方便后续在页面中使用JSTL提供的标签进行动态数据处理，比如循环遍历、条件判断等操作 -->
|
|
|
<html>
|
|
|
<head>
|
|
|
<title>查询学生</title>
|
|
|
<!-- 设置HTML页面的标题为“查询学生”，此标题会显示在浏览器的标题栏，让用户明确该页面的主要功能 -->
|
|
|
<link rel="stylesheet" href="./css/layui.css">
|
|
|
<!-- 引入layui框架的样式表文件，通过相对路径（从当前页面所在目录下的css文件夹中查找）应用layui框架提供的样式，用于页面布局、组件美化等，使页面呈现layui框架特有的外观风格 -->
|
|
|
<link rel="stylesheet" href="./css/style.css">
|
|
|
<!-- 引入自定义的样式表文件style.css，同样采用相对路径引用，目的是添加符合特定需求的个性化页面样式，对页面显示效果做进一步定制 -->
|
|
|
<script src="./layui.js"></script>
|
|
|
<!-- 引入layui框架的JavaScript脚本文件，从当前页面所在目录获取该文件，layui的JavaScript脚本为页面提供众多交互功能以及各种组件支持，例如实现菜单交互、页面元素动态展示等功能 -->
|
|
|
<script src="https://cdn.bootcss.com/jquery/3.2.1/jquery.min.js"></script>
|
|
|
<!-- 从CDN（内容分发网络）引入jQuery库的最小化版本，jQuery是常用的JavaScript库，能简化页面中对DOM元素的操作、事件处理以及实现各种动画效果等，方便开发人员编写JavaScript代码实现页面交互逻辑 -->
|
|
|
</head>
|
|
|
<body class="layui-layout-body" style="background-color: #F2F2F2">
|
|
|
<!-- 为页面主体（body）设置类名“layui-layout-body”，同时将背景颜色设定为浅灰色（#F2F2F2），该类名通常与layui框架的布局样式相关联，按照其框架规范来构建页面整体外观 -->
|
|
|
<jsp:include page="/filterLogin.jsp"></jsp:include>
|
|
|
<!-- 通过JSP的include指令包含名为filterLogin.jsp的页面内容，一般这个页面用于处理用户登录相关的验证逻辑或者展示登录相关的界面元素，比如登录表单等，以此确保只有登录后的用户能够访问后续页面内容 -->
|
|
|
<jsp:include page="/WEB-INF/admin/aHeader.jsp"></jsp:include>
|
|
|
<!-- 包含位于WEB-INF/admin目录下的aHeader.jsp页面，通常用于构建页面的头部区域，可能包含如网站logo、导航栏等常见的头部元素，起到统一页面头部布局的作用 -->
|
|
|
<jsp:include page="/WEB-INF/admin/adminNav.jsp"></jsp:include>
|
|
|
<!-- 再次使用JSP的include指令，包含WEB-INF/admin目录下的adminNav.jsp页面，此页面一般用来展示管理员端特有的导航菜单内容，便于用户在不同功能模块间进行切换操作 -->
|
|
|
<div class="layui-layout layui-layout-admin">
|
|
|
<!-- 创建一个div元素，并赋予其两个类名“layui-layout”和“layui-layout-admin”，这是layui框架中用于定义页面整体布局结构的特定类名，遵循layui框架的布局规范来划分页面不同区域，例如头部、主体、侧边栏等（具体根据框架设定） -->
|
|
|
<div class="layui-body">
|
|
|
<!-- 在上述布局div内部再创建一个div元素，类名为“layui-body”，在layui框架里，该区域通常用于承载页面的主要内容，比如展示各类业务数据、操作按钮等 -->
|
|
|
<!-- 内容主体区域 -->
|
|
|
<div style="padding: 15px;">
|
|
|
<!-- 创建一个div元素，并通过内联样式设置其四周内边距为15px，这样做主要是为了对内部元素进行排版，使页面内容看起来更规整，避免显得过于紧凑或松散 -->
|
|
|
<span class="layui-breadcrumb">
|
|
|
<a href="">管理员</a>
|
|
|
<a href="">学生管理</a>
|
|
|
<a><cite>查询学生</cite></a>
|
|
|
</span>
|
|
|
<!-- 创建一个layui框架提供的面包屑导航组件，通过一系列超链接（a标签）展示当前页面在整个系统中的层级路径，这里展示了从“管理员”进入“学生管理”，再到“查询学生”页面，但目前超链接的href属性大多为空，后续可能需要完善具体跳转地址以实现页面导航功能 -->
|
|
|
|
|
|
<form style="padding-top: 20px;" action="${pageContext.request.contextPath}/findStudentByPageServlet" method="post">
|
|
|
<!-- 创建一个表单（form）元素，通过内联样式设置顶部内边距为20px，设置表单的action属性，即表单提交的目标地址为名为findStudentByPageServlet的Servlet（通过EL表达式动态获取上下文路径拼接而成），提交方式为POST，用于收集用户输入的查询条件并提交给后端进行学生信息查询操作 -->
|
|
|
<div class="layui-form-item">
|
|
|
<!-- 创建一个layui框架下用于表示表单项目（form-item）的div容器，layui框架会依据这个结构来对内部的表单元素进行布局和样式处理 -->
|
|
|
<div class="layui-inline">
|
|
|
<!-- 创建一个内联的div容器，在layui表单布局中，它用于让内部的表单元素在同一行显示 -->
|
|
|
<label class="layui-form-label" style="width: auto;">学号</label>
|
|
|
<!-- 创建一个表单标签（label）元素，用于标识后面的输入框对应的含义，这里显示文本为“学号”，并通过内联样式设置宽度为自适应（width: auto） -->
|
|
|
<div class="layui-input-inline">
|
|
|
<!-- 创建一个用于放置输入框的内联div容器，在layui框架的表单布局里，它控制着输入框的显示样式及宽度等 -->
|
|
|
<input type="tel" name="s_id" value="${condition.s_id[0]}" autocomplete="off" class="layui-input">
|
|
|
<!-- 创建一个文本输入框（input）元素，类型为电话号码（type: tel），名称为“s_id”，其值通过EL表达式从名为“condition”的对象中获取学号信息进行回显（可能是上次查询输入的学号，用于保留历史查询条件），关闭自动完成功能（autocomplete="off"），并应用layui框架的输入框样式类（layui-input），用于让用户输入要查询的学生学号 -->
|
|
|
</div>
|
|
|
<label class="layui-form-label" style="width: auto;">姓名</label>
|
|
|
<div class="layui-input-inline">
|
|
|
<input type="text" name="s_name" value="${condition.s_name[0]}" autocomplete="off" class="layui-input">
|
|
|
<!-- 同样创建一个文本输入框，类型为文本（type: text），名称为“s_name”，通过EL表达式回显上次输入的姓名信息，关闭自动完成功能，用于让用户输入要查询的学生姓名 -->
|
|
|
</div>
|
|
|
|
|
|
<div class="layui-input-inline">
|
|
|
<button type="submit" class="layui-btn">查询</button>
|
|
|
<!-- 创建一个提交按钮（button），类型为提交（type: submit），应用layui框架的按钮样式类（layui-btn），点击该按钮会触发表单提交操作，将用户在学号和姓名输入框中输入的查询条件发送到指定的Servlet进行学生信息查询 -->
|
|
|
<a class="layui-btn layui-btn-danger" href="javascript:void(0);" id="deleteSelectStudent">删除选中</a>
|
|
|
<!-- 创建一个超链接（a标签），应用layui框架的危险样式按钮类（layui-btn layui-btn-danger，表示红色警示样式按钮），设置href属性为“javascript:void(0);”使其点击时不进行实际的页面跳转，设置id为“deleteSelectStudent”，用于后续绑定JavaScript事件，实现删除选中学生信息的功能 -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
</form>
|
|
|
|
|
|
<form id="selectStudent" action="${pageContext.request.contextPath}/deleteSelectStudentServlet" method="post">
|
|
|
<!-- 创建另一个表单元素，设置id为“selectStudent”，用于标记这个表单，其action属性设置为提交到名为deleteSelectStudentServlet的Servlet（通过EL表达式获取上下文路径拼接而成），提交方式为POST，该表单主要用于批量删除选中的学生信息 -->
|
|
|
<table class="layui-table" lay-filter="test">
|
|
|
<!-- 创建一个layui框架的表格组件，设置名为“test”的过滤器，该过滤器可在后续JavaScript代码中用于配置表格相关交互功能，例如实现表格行点击事件、数据筛选、排序等操作 -->
|
|
|
<thead>
|
|
|
<tr>
|
|
|
<th><input id="firstCb" type="checkbox" class="my-checkbox" name="" title="" lay-skin="primary"></th>
|
|
|
<th>ID</th>
|
|
|
<th>学号</th>
|
|
|
<th>学院</th>
|
|
|
<th>系别</th>
|
|
|
<th>班级</th>
|
|
|
<th>姓名</th>
|
|
|
<th>性别</th>
|
|
|
<th>年龄</th>
|
|
|
<th>城市</th>
|
|
|
<th>手机号</th>
|
|
|
<th>邮箱</th>
|
|
|
<th>操作</th>
|
|
|
<!-- 定义表格头部的列标题，分别列出要展示的学生相关的各个字段，如全选复选框（通过一个带有特定样式和属性的input复选框实现）、序号（ID）、学号、学院、系别、班级、姓名、性别、年龄、城市、手机号、邮箱以及操作（用于进行修改、删除等相关操作） -->
|
|
|
</tr>
|
|
|
</thead>
|
|
|
|
|
|
<c:forEach items="${pb.list}" var="student" varStatus="s">
|
|
|
<!-- 使用JSTL的forEach标签进行循环遍历操作，循环的对象是名为“pb.list”的数据集合（通常是从后端传递过来的分页后的学生信息列表），每次循环将当前元素赋值给变量“student”，同时利用“varStatus”获取循环状态信息（如当前循环次数等）并赋值给变量“s” -->
|
|
|
<tr>
|
|
|
<th><input type="checkbox" class="my-checkbox" name="sid" value="${student.s_id}" title="" lay-skin="primary"></th>
|
|
|
<td>${s.count}</td>
|
|
|
<td>${student.s_id}</td>
|
|
|
<td>${student.s_college}</td>
|
|
|
<td>${student.s_department}</td>
|
|
|
<td>${student.s_class}</td>
|
|
|
<td>${student.s_name}</td>
|
|
|
<td>${student.s_sex}</td>
|
|
|
<td>${student.s_age}</td>
|
|
|
<td>${student.s_address}</td>
|
|
|
<td>${student.s_phone}</td>
|
|
|
<td>${student.s_email}</td>
|
|
|
<td><a class="layui-btn layui-btn-normal" href="${pageContext.request.contextPath}/updateStudentServlet?sid=${student.s_id}">修改</a><a class="layui-btn layui-btn-danger" href="javascript:deleteStudent(${student.s_id});">删除</a></td>
|
|
|
<!-- 在表格的每一行中，通过EL表达式（Expression Language，如${s.count}等）分别展示对应的数据：
|
|
|
先创建一个复选框（input，类型为checkbox），设置类名、名称、值以及相关样式属性，用于单独选中某一行学生信息，以便进行批量操作（如批量删除）；
|
|
|
然后依次展示学生的序号（通过${s.count}表示当前循环次数）、学号、学院、系别、班级、姓名、性别、年龄、城市、手机号、邮箱等具体信息；
|
|
|
最后一列创建两个超链接（a标签），分别应用layui框架的不同样式按钮类，一个是常规样式（layui-btn layui-btn-normal）用于跳转到修改学生信息的页面（通过拼接学生ID参数传递给对应的Servlet），另一个是危险样式（layui-btn layui-btn-danger），点击后会调用名为deleteStudent的JavaScript函数并传递当前学生的ID作为参数，用于删除当前行对应的学生信息 -->
|
|
|
</tr>
|
|
|
</c:forEach>
|
|
|
</table>
|
|
|
</form>
|
|
|
<%-- <div class="layui-box layui-laypage layui-laypage-default" id="layui-laypage-1"><a href="javascript:;" class="layui-laypage-prev" data-page="3">上一页</a><a href="javascript:;" data-page="1">1</a><a href="javascript:;" data-page="2">2</a><a href="javascript:;" data-page="3">3</a><span class="layui-laypage-curr"><em class="layui-laypage-em"></em><em>4</em></span><a href="javascript:;" data-page="5">5</a><a href="javascript:;" class="layui-laypage-next" data-page="5">下一页</a></div>--%>
|
|
|
<ul>
|
|
|
<!-- 创建一个无序列表（ul）元素，用于构建分页导航链接 -->
|
|
|
|
|
|
<c:if test="${pb.currentPage == 1}">
|
|
|
<a href ="javascript:return false;">
|
|
|
<!-- 使用JSTL的条件判断标签（c:if），当名为“pb”的对象中的当前页码（currentPage）等于1时，创建一个超链接（a标签），设置href属性为“javascript:return false;”，使其点击时不执行实际的页面跳转，用于禁用上一页链接（因为已经是第一页了） -->
|
|
|
</c:if>
|
|
|
<c:if test="${pb.currentPage!= 1}">
|
|
|
<a href="${pageContext.request.contextPath}/findStudentByPageServlet?currentPage=${pb.currentPage-1}&rows=5&s_id=${condition.s_id[0]}&s_name=${condition.s_name[0]}">
|
|
|
<!-- 当当前页码不等于1时，创建一个超链接，链接地址指向名为findStudentByPageServlet的Servlet，并通过EL表达式动态传递当前页码减1、每页显示行数、学号查询条件、姓名查询条件等参数，用于跳转到上一页的学生信息查询结果页面 -->
|
|
|
</c:if>
|
|
|
|
|
|
<li class="page-li">上一页</li></a>
|
|
|
<!-- 创建一个列表项（li）元素，应用“page-li”类名（可能对应特定样式），显示文本为“上一页”，作为分页导航中的上一页按钮文本 -->
|
|
|
</a>
|
|
|
<c:forEach begin="1" end="${pb.totalPage}" var="i">
|
|
|
<!-- 使用JSTL的forEach标签进行循环，从1开始到总页数（totalPage）结束，每次循环变量为“i”，用于生成页码导航链接 -->
|
|
|
<c:if test="${pb.currentPage == i}">
|
|
|
<a href="${pageContext.request.contextPath}/findStudentByPageServlet?currentPage=${i}&rows=5&s_id=${condition.s_id[0]}&s_name=${condition.s_name[0]}"><li class="page-li" style="background-color: #009688;border-radius: 2px;color: white;">${i}</li></a>
|
|
|
<!-- 当当前页码等于循环中的页码“i”时，创建一个超链接，链接地址同样指向findStudentByPageServlet并传递相关参数，内部包含一个列表项元素，应用“page-li”类名并通过内联样式设置背景颜色、边框圆角和文本颜色，显示当前页码，用于突出显示当前所在页码 -->
|
|
|
</c:if>
|
|
|
<c:if test="${pb.currentPage!= i}">
|
|
|
<a href="${pageContext.request.contextPath}/findStudentByPageServlet?currentPage=${i}&rows=5&s_id=${condition.s_id[0]}&s_name=${condition.s_name[0]}"><li class="page-li">${i}</li></a>
|
|
|
<!-- 当当前页码不等于循环中的页码“i”时，创建类似的超链接和列表项元素，只是列表项元素的样式为普通样式，用于显示其他页码链接 -->
|
|
|
</c:if>
|
|
|
</c:forEach>
|
|
|
|
|
|
<c:if test="${pb.currentPage == pb.totalPage}">
|
|
|
<a href="javascript:return false;">
|
|
|
<!-- 当当前页码等于总页数时，创建一个超链接，设置href属性使其点击不跳转，用于禁用下一页链接（因为已经是最后一页了） -->
|
|
|
</c:if>
|
|
|
<c:if test="${pb.currentPage!= pb.totalPage}">
|
|
|
<a href="${pageContext.request.contextPath}/findStudentByPageServlet?currentPage=${pb.currentPage+1}&rows=5&s_id=${condition.s_id[0]}&s_name=${condition.s_name[0]}">
|
|
|
<!-- 当当前页码不等于总页数时，创建超链接，链接地址指向findStudentByPageServlet并传递当前页码加1等参数，用于跳转到下一页的学生信息查询结果页面 -->
|
|
|
</c:if>
|
|
|
<li class="page-li">下一页</li></a>
|
|
|
<!-- 创建列表项元素，显示文本为“下一页”，作为分页导航中的下一页按钮文本 -->
|
|
|
</ul>
|
|
|
|
|
|
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 0px;">
|
|
|
<legend>共${pb.totalCount}条记录，共${pb.totalPage}页</legend>
|
|
|
<!-- 创建一个字段集（fieldset）元素，应用layui框架的相关样式类，设置顶部外边距为0px，内部包含一个图例（legend）元素，通过EL表达式显示总记录数（totalCount）和总页数（totalPage），用于向用户展示学生信息查询结果的统计情况，让用户清楚知晓数据的总量以及分页的情况 -->
|
|
|
</fieldset>
|
|
|
<jsp:include page="/footer.jsp"></jsp:include>
|
|
|
<!-- 包含名为footer.jsp的页面，一般此页面用于展示页面底部的一些通用信息，比如版权声明、网站相关链接、联系方式等内容 -->
|
|
|
</div>
|
|
|
</div>
|
|
|
</div>
|
|
|
|
|
|
|
|
|
<script type="text/javascript">
|
|
|
$("#nav li:nth-child(2) dl dd:nth-child(1)").addClass("layui-this");
|
|
|
// 使用jQuery选择器选中页面中id为“nav”的元素下的第2个子元素li下的dl元素下的第1个dd元素，并为其添加类名“layui-this”。在layui框架中，添加这个类名通常意味着将对应的导航菜单项标记为当前选中状态，使其呈现特定的样式（比如改变颜色、加粗等），以此表明当前所在页面功能模块对应的菜单选项
|
|
|
$("#nav li:nth-child(2)").addClass("layui-nav-itemed");
|
|
|
// 同样使用jQuery选择器选中页面中id为“nav”的元素下的第2个子元素li，并为其添加类名“layui-nav-itemed”。在layui框架里，这个类名可能用于控制导航菜单的展开或折叠状态，让对应的菜单层级结构展示相应的效果，方便用户查看相关的子菜单
|
|
|
</script>
|
|
|
<script>
|
|
|
//JavaScript代码区域
|
|
|
layui.use('element', function(){
|
|
|
var element = layui.element;
|
|
|
element.init();
|
|
|
// 使用layui框架的element模块，调用其init方法进行初始化操作。在layui框架中，element模块提供了很多页面元素交互相关的功能，例如实现页面布局动态切换、菜单展开收起等交互效果，通过调用init方法可以激活这些功能，确保页面上基于element模块构建的各种UI组件能够正常工作
|
|
|
});
|
|
|
</script>
|
|
|
<script>
|
|
|
function deleteStudent(s_id) {
|
|
|
if (confirm("你确定删除该学生吗？")) {
|
|
|
location.href = "${pageContext.request.contextPath}/deleteStudentServlet?s_id=" + s_id;
|
|
|
// 定义一个名为deleteStudent的函数，接收学生的ID（s_id）作为参数。在函数内部，通过JavaScript的confirm函数弹出一个确认框，询问用户是否确定要删除该学生。当用户点击确定（即confirm函数返回true）时，使用location.href属性将页面重定向到名为deleteStudentServlet的Servlet，并通过URL拼接的方式传递要删除的学生的ID参数，从而触发后端对应的删除学生信息的逻辑
|
|
|
}
|
|
|
}
|
|
|
|
|
|
window.onload = function () {
|
|
|
document.getElementById("deleteSelectStudent").onclick = function () {
|
|
|
var flag = false;
|
|
|
var cbs = document.getElementsByName("sid");
|
|
|
for (var i = 0; i < cbs.length; i++) {
|
|
|
if (cbs[i].checked) {
|
|
|
// 为id为“deleteSelectStudent”的元素（也就是页面上的“删除选中”按钮）绑定点击事件处理函数。在函数内部，首先定义一个标志变量flag并初始化为false，然后通过document.getElementsByName获取所有名为“sid”的元素（即表格中每行学生对应的复选框），接着循环遍历这些复选框，当有任何一个复选框被选中（即其checked属性为true）时，将flag设置为true，并跳出循环
|
|
|
flag = true;
|
|
|
break;
|
|
|
}
|
|
|
}
|
|
|
|
|
|
if (flag) {
|
|
|
if (confirm("你确定要删除选中条目吗？")) {
|
|
|
document.getElementById("selectStudent").submit();
|
|
|
// 如果有复选框被选中（即flag为true），则再次弹出确认框询问用户是否确定要删除选中的条目。当用户确认后，通过document.getElementById获取id为“selectStudent”的表单元素，并调用其submit方法触发表单提交操作，将选中的学生信息（通过表单中复选框的name和value属性传递选中学生的ID等相关数据）发送到对应的Servlet（前面设置的action为deleteSelectStudentServlet），以进行批量删除操作
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
document.getElementById("firstCb").onclick = function () {
|
|
|
var cbs = document.getElementsByName("sid");
|
|
|
for (var i = 0; i < cbs.length; i++) {
|
|
|
cbs[i].checked = this.checked;
|
|
|
// 为id为“firstCb”的元素（即表格头部的全选复选框）绑定点击事件处理函数。在函数内部，先获取所有名为“sid”的复选框元素，然后循环遍历它们，将每个复选框的checked属性设置为与全选复选框（this表示当前点击的元素，也就是“firstCb”）的checked属性一致，以此实现全选或全不选的功能
|
|
|
}
|
|
|
}
|
|
|
|
|
|
}
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
</html> |
