|
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
|
|
|
pageEncoding="UTF-8"%>
|
|
|
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
|
|
|
<%@ taglib uri="http://java.sun.com/jsp/jstl/fmt" prefix="fmt" %>
|
|
|
<%
|
|
|
// 获取当前Web应用的上下文路径，该路径通常是部署后的项目名称那部分在URL中的体现，方便后续拼接完整的资源路径等操作
|
|
|
String path = request.getContextPath();
|
|
|
// 构建基础路径，将协议（比如http或者https）、服务器名称、服务器端口以及前面获取的上下文路径组合起来，形成一个完整的基础URL，用于后续准确引用各类资源，像样式文件、脚本文件等
|
|
|
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
|
|
|
%>
|
|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
<head>
|
|
|
<meta charset="utf-8">
|
|
|
// 指定浏览器渲染页面时可使用的渲染引擎模式，这里列举了多种模式（webkit、ie-comp、ie-stand等），意味着浏览器会按照这个顺序尝试去渲染页面内容，以保证在不同浏览器环境下的兼容性
|
|
|
<meta name="renderer" content="webkit|ie-comp|ie-stand">
|
|
|
// 强制浏览器以其最高的标准模式来渲染页面，例如在IE浏览器中会以IE8及以上标准模式呈现页面，有助于统一页面在不同版本IE及其他浏览器中的显示效果
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
|
// 设置视口相关属性，width=device-width表示页面宽度会自适应设备的屏幕宽度，initial-scale等属性限制了页面的初始缩放比例以及用户手动缩放的范围，此处设置为禁止用户手动缩放页面
|
|
|
<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no" />
|
|
|
// 控制页面是否会被浏览器缓存为离线应用，这里设置为不允许，这样每次访问页面时一般会重新获取最新的数据，而不是使用缓存的旧版本页面
|
|
|
<meta http-equiv="Cache-Control" content="no-siteapp" />
|
|
|
<!--[if lt IE 9]>
|
|
|
// 当浏览器版本低于IE9时，引入html5shiv.js脚本文件，目的是让低版本IE浏览器能够识别和正确解析HTML5的新标签，确保页面在这些旧浏览器上能正常展示HTML5相关的内容结构
|
|
|
<script type="text/javascript" src="lib/html5shiv.js"></script>
|
|
|
// 引入respond.min.js脚本文件，该文件可以使低版本IE浏览器支持CSS3的媒体查询特性，以便页面样式能根据不同设备屏幕尺寸等条件进行适配调整
|
|
|
<script type="text/javascript" src="lib/respond.min.js"></script>
|
|
|
<![endif]-->
|
|
|
// 引入H-ui框架的基础样式文件，通过使用前面构建的basePath变量拼接完整路径，使得浏览器能准确找到并加载对应的样式资源，从而应用该框架提供的样式风格到页面上
|
|
|
<link rel="stylesheet" type="text/css" href="<%=basePath%>static/h-ui/css/H-ui.min.css" />
|
|
|
// 引入H-ui.admin框架的样式文件，用于实现后台管理界面相关的特定样式效果，同样依靠basePath来拼接出正确的文件路径进行资源引用
|
|
|
<link rel="stylesheet" type="text/css" href="<%=basePath%>static/h-ui.admin/css/H-ui.admin.css" />
|
|
|
// 引入Hui-iconfont字体图标库的样式文件，加载后页面就能使用该库中定义好的各种图标，其路径也是基于basePath来定位的
|
|
|
<link rel="stylesheet" type="text/css" href="<%=basePath%>lib/Hui-iconfont/1.0.8/iconfont.css" />
|
|
|
// 引入H-ui.admin框架默认皮肤的样式文件，并为其设置id为"skin"，方便后续通过JavaScript等方式对皮肤进行切换或者其他相关操作，比如动态改变页面整体外观风格
|
|
|
<link rel="stylesheet" type="text/css" href="<%=basePath%>static/h-ui.admin/skin/default/skin.css" id="skin" />
|
|
|
// 引入H-ui.admin框架额外的自定义样式文件，用于进一步定制和调整页面的样式，使其更符合具体项目在外观展示方面的需求
|
|
|
<link rel="stylesheet" type="text/css" href="<%=basePath%>static/h-ui.admin/css/style.css" />
|
|
|
<!--[if IE 6]>
|
|
|
// 针对IE6浏览器，引入DD_belatedPNG_0.0.8a-min.js脚本文件，主要用于解决IE6下PNG图片透明等显示异常的问题，使PNG图片能在IE6中正常显示出应有的效果
|
|
|
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
|
|
|
// 调用引入脚本中的fix方法，并传入参数'*'，表示对页面上所有元素尝试修复PNG图片的显示问题，尽可能保证页面在IE6浏览器中的视觉呈现正常
|
|
|
<script>DD_belatedPNG.fix('*');</script>
|
|
|
<![endif]-->
|
|
|
// 设置页面的标题为“管理员列表”，这个标题会显示在浏览器的标签栏上，让用户能直观知晓当前页面展示的主要内容是什么
|
|
|
<title>管理员列表</title>
|
|
|
</head>
|
|
|
<body>
|
|
|
<nav class="breadcrumb"><i class="Hui-iconfont"></i> 首页 <span class="c-gray en">></span> 管理员管理 <span class="c-gray en">></span> 管理员列表 <a class="btn btn-success radius r" style="line-height:1.6em;margin-top:3px" href="javascript:location.replace(location.href);" title="刷新" ><i class="Hui-iconfont"></i></a></nav>
|
|
|
// 定义一个类名为page-container的div容器，通常用于对页面中的主要内容区域进行布局划分和样式控制，将相关内容包裹在里面方便统一管理
|
|
|
<div class="page-container">
|
|
|
<div class="cl pd-5 bg-1 bk-gray mt-20">
|
|
|
<span class="l">
|
|
|
// 创建一个链接按钮，按钮样式为btn btn-primary radius，添加了相关图标（通过Hui-iconfont字体图标库实现），设置了data-title属性（可能用于后续一些交互提示相关功能），href属性指向添加管理员的JSP页面（通过basePath拼接完整路径），点击该按钮可跳转到添加管理员页面，用于添加新的管理员操作
|
|
|
<a class="btn btn-primary radius" data-title="添加管理员" data-href="<%=basePath%>pages/admin/right/addAdmin.jsp" href="<%=basePath%>pages/admin/right/addAdmin.jsp"><i class="Hui-iconfont"></i> 添加管理员</a>
|
|
|
</span>
|
|
|
<span class="r">共有数据：<strong>${adminList.size()}</strong> 条</span>
|
|
|
// 通过EL表达式${adminList.size()}获取管理员列表的数量并展示出来，用于告知用户当前管理员列表中一共有多少条管理员记录信息
|
|
|
</div>
|
|
|
<div class="mt-20">
|
|
|
// 创建一个HTML表格，应用了多个类名用于样式设置（如设置表格边框、背景、鼠标悬停效果等），并且设置为响应式表格，使其能在不同屏幕尺寸下有较好的显示效果，该表格用于展示管理员相关信息
|
|
|
<table class="table table-border table-bordered table-bg table-hover table-sort table-responsive">
|
|
|
<thead>
|
|
|
<tr class="text-c">
|
|
|
<th width="40">序号</th>
|
|
|
<th width="60">ID</th>
|
|
|
<th width="120">用户名</th>
|
|
|
<th width="120">密码</th>
|
|
|
<th width="60">权限代码</th>
|
|
|
<th width="40">状态</th>
|
|
|
<th width="120">注册时间</th>
|
|
|
<th width="120">登录时间</th>
|
|
|
</tr>
|
|
|
// 定义表格头部行，每一个<th>元素代表表格的一列标题，设置了各列的宽度以及文本居中显示（通过text-c类实现），明确了表格要展示的管理员信息的各个字段名称
|
|
|
</thead>
|
|
|
<tbody>
|
|
|
<c:forEach items="${adminList}" var="admin" varStatus="status">
|
|
|
// 使用JSTL的<c:forEach>标签对名为adminList的集合（通常是从后端传递过来的管理员数据列表）进行遍历，每次遍历将一个管理员对象赋值给变量admin，同时通过varStatus获取当前遍历的状态信息（比如索引等）
|
|
|
<tr class="text-c">
|
|
|
<td>${status.index+1}</td>
|
|
|
// 通过status.index获取当前遍历的索引（从0开始），加1后作为序号展示在表格中，用于为每条管理员记录显示一个顺序编号
|
|
|
<td>${admin.adminId}</td>
|
|
|
// 通过EL表达式${admin.adminId}获取管理员对象中的adminId属性值，并展示在表格对应列中，即展示管理员的ID信息
|
|
|
<td>${admin.userName}</td>
|
|
|
// 展示管理员的用户名信息，同样是通过EL表达式获取管理员对象的userName属性值来实现
|
|
|
<td>${admin.password}</td>
|
|
|
// 展示管理员的密码信息，从管理员对象的password属性获取值并在表格中显示，不过在实际应用中，出于安全考虑，密码可能需要进行特殊处理（比如加密显示等），这里只是简单展示原始数据
|
|
|
<td>${admin.flag}</td>
|
|
|
// 获取管理员对象的flag属性值展示在表格中，推测这里的flag可能代表权限相关的标识等含义，用于展示管理员的权限代码信息
|
|
|
<c:if test="${admin.isUse == 1}">
|
|
|
// 使用JSTL的<c:if>标签进行条件判断，如果管理员对象的isUse属性值等于1（推测这里1表示在线状态），则执行下面的代码块
|
|
|
<td style="color:green">在线</td>
|
|
|
// 在表格对应列中显示“在线”字样，并设置文字颜色为绿色，用于直观表示管理员当前处于在线状态
|
|
|
</c:if>
|
|
|
<c:if test="${admin.isUse == 0}">
|
|
|
// 如果管理员对象的isUse属性值等于0（推测表示离线状态），则执行下面代码块
|
|
|
<td>离线</td>
|
|
|
// 在表格对应列中显示“离线”字样，用于表示管理员当前处于离线状态
|
|
|
</c:if>
|
|
|
<td>
|
|
|
<fmt:formatDate value="${admin.creatTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
|
|
|
// 使用JSTL的<fmt:formatDate>标签对管理员对象的creatTime属性（推测是注册时间）进行格式化处理，按照指定的“yyyy-MM-dd HH:mm:ss”格式将日期时间数据转换为易读的字符串形式并展示在表格中
|
|
|
</td>
|
|
|
<td>
|
|
|
<fmt:formatDate value="${admin.loginTime}" pattern="yyyy-MM-dd HH:mm:ss"/>
|
|
|
// 同样对管理员对象的loginTime属性（推测是登录时间）进行格式化处理并展示在表格对应列中，将日期时间数据以规定格式显示出来
|
|
|
</td>
|
|
|
</tr>
|
|
|
</c:forEach>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--_footer 作为公共模版分离出去-->
|
|
|
// 引入jQuery库的压缩版本，jQuery是一个非常常用的JavaScript库，它提供了便捷的DOM操作、事件处理、动画效果等功能，方便在页面中编写各种交互逻辑
|
|
|
<script type="text/javascript" src="<%=basePath%>lib/jquery/1.9.1/jquery.min.js"></script>
|
|
|
// 引入layer.js脚本文件，该文件常用于在页面中创建弹出层、对话框等交互效果，比如显示提示信息框、确认框等，能够增强用户与页面之间的交互体验
|
|
|
<script type="text/javascript" src="<%=basePath%>lib/layer/2.4/layer.js"></script>
|
|
|
// 引入H-ui框架的JavaScript脚本文件，用于实现该框架相关的交互功能，例如表单验证、菜单切换、页面组件的动态效果等，配合前面引入的框架样式文件，完善框架在页面中的功能应用
|
|
|
<script type="text/javascript" src="<%=basePath%>static/h-ui/js/H-ui.min.js"></script>
|
|
|
// 引入H-ui.admin框架的JavaScript脚本文件，用于实现后台管理相关的特定功能逻辑，比如数据表格操作、权限管理等与后台业务相关的交互功能
|
|
|
<script type="text/javascript" src="<%=basePath%>static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->
|
|
|
|
|
|
<!--请在下方写此页面业务相关的脚本-->
|
|
|
// 引入My97DatePicker日期选择器的脚本文件，可能用于在页面中实现日期相关的输入选择功能，虽然当前页面代码中未看到明显使用场景，但也许在后续业务扩展或者其他交互需求中会用到
|
|
|
<script type="text/javascript" src="<%=basePath%>lib/My97DatePicker/4.8/WdatePicker.js"></script>
|
|
|
// 引入jQuery DataTables插件的脚本文件，该插件可以对HTML表格进行增强，提供诸如排序、分页、搜索等丰富的功能，方便用户对表格数据进行操作和查看
|
|
|
<script type="text/javascript" src="<%=basePath%>lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
|
|
|
// 引入laypage.js脚本文件，通常用于实现分页功能相关的逻辑，比如生成分页导航条、处理分页相关的交互操作等，可能与前面的DataTables插件配合使用来完善分页效果
|
|
|
<script type="text/javascript" src="<%=basePath%>lib/laypage/1.2/laypage.js"></script>
|
|
|
<script type="text/javascript">
|
|
|
$('.table-sort').dataTable({
|
|
|
// 调用jQuery选择器选中类名为table-sort的元素（即前面定义的那个展示管理员信息的表格），并调用dataTable方法来初始化DataTables插件，对表格进行功能增强
|
|
|
"aaSorting": [[ 0, "asc" ]],//默认第几个排序
|
|
|
// 设置表格默认的排序方式，这里表示按照第一列（序号列，索引为0）进行升序排序，即初次加载页面时表格数据会按照序号从小到大排列
|
|
|
"bStateSave": true,//状态保存
|
|
|
// 设置为true表示可以保存表格的状态，比如用户调整了列的排序方式、分页位置等信息后，下次访问页面时这些状态会被保留，提升用户体验
|
|
|
"pading":false,
|
|
|
// 此处可能是拼写错误，正确的应该是"paging"，用于控制是否显示分页功能，如果设为false则不显示分页相关的界面元素（如分页导航条等），这里目前设置为错误的属性值，可能不会达到预期效果，应该修正为"paging": false或者根据实际需求设置为true来启用分页功能
|
|
|
"aoColumnDefs": [
|
|
|
// 用于定义列的一些额外属性设置，比如控制列的隐藏显示、是否参与排序等
|
|
|
//{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
|
|
|
// 通过注释中的示例可以看出，可以设置某列（通过aTargets指定列的索引，这里索引为3的列对应的是密码列）是否可见，设置bVisible为false可隐藏该列，目前代码中注释掉了此功能，可能暂不需要隐藏列
|
|
|
//{"orderable":false,"aTargets":[8]}// 不参与排序的列
|
|
|
// 同样可以设置某列（这里示例中索引为8的列，不过当前表格实际只有8列，需要根据实际情况调整索引）是否可参与排序，设置orderable为false则该列不会出现在排序的操作范围内，目前代码中也是注释掉了此功能，可根据实际需求启用
|
|
|
]
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
</html> |
