|
|
<%@ 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" %>
|
|
|
<%
|
|
|
// 获取当前项目的上下文路径，后续用于构建完整的资源访问路径，像样式表、脚本文件以及其他相关资源的引用都会基于此路径进行拼接，确保在不同部署环境下能准确找到对应的资源。
|
|
|
String path = request.getContextPath();
|
|
|
// 构建项目的基础路径，将请求的协议（如http或https）、服务器名称、服务器端口以及前面获取的上下文路径组合起来，形成一个完整的、可用于定位项目内各类资源的URL基础部分。
|
|
|
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
|
|
|
%>
|
|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
<!-- 设置页面的字符编码为UTF-8，确保页面能正确显示各种字符，避免出现乱码情况，这是HTML页面的基本设置要求之一。 -->
|
|
|
<meta charset="utf-8">
|
|
|
<!-- 定义页面在不同浏览器渲染引擎下的兼容模式，指定了webkit（适用于Chrome、Safari等现代浏览器）、ie-comp（用于兼容IE浏览器的某些特定模式）、ie-stand（标准IE模式）等多种模式，目的是提高页面在各类浏览器中的兼容性，使其能正常显示。 -->
|
|
|
<meta name="renderer" content="webkit|ie-comp|ie-stand">
|
|
|
<!-- 强制让页面以IE的最高版本模式或者Chrome浏览器的模式进行渲染，有助于解决IE浏览器在处理一些现代网页标准时可能出现的兼容性问题，保证页面呈现效果符合预期。 -->
|
|
|
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
|
|
|
<!-- 设置页面的视口（viewport）属性，规定页面宽度等于设备宽度，初始缩放比例、最小缩放比例和最大缩放比例都设定为1.0，并且禁止用户手动缩放页面，这样可以确保页面在不同尺寸的移动设备上能有较好的布局和展示效果。 -->
|
|
|
<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" />
|
|
|
<!-- 条件注释，当浏览器版本小于IE9时，引入html5shiv.js和respond.min.js这两个脚本文件。html5shiv.js用于让低版本的IE浏览器（IE8及以下）能够识别和支持HTML5标签，respond.min.js则是让低版本IE浏览器支持CSS3的媒体查询特性，以此提升页面在旧版IE中的兼容性和显示效果。 -->
|
|
|
<if lt IE 9>
|
|
|
<script type="text/javascript" src="lib/html5shiv.js"></script>
|
|
|
<script type="text/javascript" src="lib/respond.min.js"></script>
|
|
|
<![endif]>
|
|
|
<!-- 引入H-ui框架的核心样式表文件，用于构建页面的基本样式布局，比如设置字体、颜色、间距等通用样式，为整个页面提供一个统一的外观基础。 -->
|
|
|
<link rel="stylesheet" type="text/css" href="<%=basePath%>static/h-ui/css/H-ui.min.css" />
|
|
|
<!-- 引入H-ui.admin框架的样式表文件，该文件针对后台管理系统页面进行了样式定制，包含了更多符合后台管理界面风格和操作需求的样式规则，例如表单样式、表格样式、按钮样式等，用于进一步美化和规范页面的外观显示。 -->
|
|
|
<link rel="stylesheet" type="text/css" href="<%=basePath%>static/h-ui.admin/css/H-ui.admin.css" />
|
|
|
<!-- 引入Hui-iconfont图标字体库的样式表文件，通过这个文件可以在页面中使用相应的图标字体来展示各种图标，图标字体具有便于通过CSS样式调整大小、颜色等属性的优点，并且在不同分辨率下能保持较好的显示效果，可增强页面的可视化效果和交互性。 -->
|
|
|
<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" />
|
|
|
<!-- 条件注释，当浏览器版本为IE6时，引入DD_belatedPNG_0.0.8a-min.js脚本文件，并执行相应的函数来修复IE6下PNG图片透明等显示问题，确保页面中的PNG图片在IE6浏览器中能正常显示，避免出现显示异常的情况。 -->
|
|
|
<if IE 6>
|
|
|
<script type="text/javascript" src="lib/DD_belatedPNG_0.0.8a-min.js" ></script>
|
|
|
<script>DD_belatedPNG.fix('*');</script>
|
|
|
<![endif]>
|
|
|
<title>订单列表</title>
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
<!-- 使用nav标签创建一个面包屑导航栏，用于清晰展示当前页面在整个网站结构中的位置路径，方便用户进行页面导航以及了解所处层级关系。通过图标字体（Hui-iconfont）展示首页图标，并使用<span>标签结合特定样式来分隔不同层级的名称，同时提供一个刷新按钮（通过JavaScript实现页面刷新功能）。 -->
|
|
|
<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 class="page-container">
|
|
|
<!-- 创建一个包含多个类名的div元素，用于设置布局样式，其中"cl"类可能用于控制列相关的布局样式（具体取决于所使用框架的定义），"pd-5"可能表示设置内边距为5（单位可能是像素等，依框架而定），"bg-1"和"bk-gray"大概率是用于设置背景颜色相关的样式，"mt-20"则明确设置了上边距为20px，使得该区域在页面中有合适的间距和视觉呈现效果。 -->
|
|
|
<div class="cl pd-5 bg-1 bk-gray mt-20">
|
|
|
<!-- 创建一个位于左侧的span元素，用于放置导出Excel的按钮，通过使用a标签模拟按钮样式，并添加多个类名来设置按钮的外观样式（如btn btn-primary radius表示这是一个主要的、具有特定样式的圆角按钮），同时利用data-title属性设置按钮的提示信息（可在一些交互场景下显示，比如鼠标悬停时的提示框内容），data-href和href属性都指向导出Excel的Servlet地址（通过basePath构建完整路径），点击该按钮可触发相应的导出操作，将订单数据导出为Excel文件。 -->
|
|
|
<span class="l">
|
|
|
<a class="btn btn-primary radius" data-title="导出Excel" data-href="<%=basePath%>ExportExcelServlet" href="<%=basePath%>ExportExcelServlet"><i class="Hui-iconfont"></i> 导出Excel</a>
|
|
|
</span>
|
|
|
<!-- 创建一个位于右侧的span元素，用于显示订单数据的总数信息，通过使用JSTL表达式（${prepList.size()}）获取名为prepList的集合（可能是从后台传递过来的订单信息列表）的元素个数，并展示给用户，让用户了解当前订单数据的总量情况。 -->
|
|
|
<span class="r">共有数据：<strong>${prepList.size()}</strong> 条</span>
|
|
|
</div>
|
|
|
<!-- 创建一个距离顶部20px的div元素，用于放置展示订单信息的表格，确保表格在页面中有合适的布局位置，避免与其他元素过于紧凑或重叠。 -->
|
|
|
<div class="mt-20">
|
|
|
<!-- 创建一个HTML表格（table），并为其添加了多个类名来设置表格的样式特性，例如"table-border"表示表格有边框，"table-bordered"进一步细化边框样式，"table-bg"可能用于设置表格的背景颜色或背景样式，"table-hover"实现鼠标悬停在表格行上时的交互效果（如改变背景色等），"table-sort"用于标识该表格支持排序功能（后续通过JavaScript代码实现具体排序逻辑），"table-responsive"使表格具备响应式布局能力，能在不同屏幕尺寸下自适应显示，提升用户体验。 -->
|
|
|
<table class="table table-border table-bordered table-bg table-hover table-sort table-responsive">
|
|
|
<!-- 创建表头（thead）部分，用于定义表格每列的标题内容和样式，里面的每一个<tr>标签代表一行标题，而<th>标签则代表每列的具体标题单元格，通过设置width属性来指定各列的宽度，使表格布局更加规整、清晰。 -->
|
|
|
<thead>
|
|
|
<tr class="text-c">
|
|
|
<!-- 定义序号列，设置宽度为30px，用于展示订单信息在列表中的顺序编号，方便用户查看和定位具体订单记录。 -->
|
|
|
<th width="30">序号</th>
|
|
|
<!-- 定义订单编号列，宽度为60px，用于展示每个订单在系统中的唯一标识编号，便于后台管理和数据关联操作等。 -->
|
|
|
<th width="60">订单编号</th>
|
|
|
<!-- 定义会员信息ID列，宽度为60px，用于展示与该订单相关联的会员信息的唯一标识编号，通过此ID可以关联到会员的详细资料等信息，用于后续操作或数据查询等用途。 -->
|
|
|
<th width="80">会员信息ID</th>
|
|
|
<!-- 定义乘车人详细信息列，宽度为80px，此处通过放置一个链接（a标签）来引导用户查看更详细的乘车人信息内容，链接指向相应的Servlet（GetPmemberByPmemberIdServlet）并传递会员信息ID作为参数，以获取并展示该订单对应的乘车人详细信息（虽然当前代码中图片显示部分被注释掉了，但可能原本有通过图片等方式引导查看的设计意图）。 -->
|
|
|
<th width="80">乘车人详细信息</th>
|
|
|
<!-- 定义车次列，宽度为80px，用于展示该订单所对应的车次信息，方便用户快速了解订单相关的车次情况。 -->
|
|
|
<th width="80">车次</th>
|
|
|
<!-- 定义起始站列，宽度为80px，用于展示该订单行程的起始站信息，明确行程的出发地点。 -->
|
|
|
<th width="80">起始站</th>
|
|
|
<!-- 定义终点站列，宽度为80px，用于展示该订单行程的终点站信息，明确行程的到达地点。 -->
|
|
|
<th width="80">终点站</th>
|
|
|
<!-- 定义开车时间列，宽度为120px，用于展示该订单所对应车次的开车时间信息，方便用户知晓出行的具体出发时间。 -->
|
|
|
<th width="120">开车时间</th>
|
|
|
<!-- 定义到达时间列，宽度为120px，用于展示该订单所对应车次的到达时间信息，方便用户知晓行程的结束时间。 -->
|
|
|
<th width="120">到达时间</th>
|
|
|
<!-- 定义票价列，宽度为60px，用于展示该订单对应的车票价格信息，让用户清楚购票所需费用情况。 -->
|
|
|
<th width="60">票价</th>
|
|
|
<!-- 定义付款情况列，宽度为60px，通过使用JSTL的<c:if>标签根据订单对象中way属性的值来动态显示不同的付款状态文本，如果way属性值为true，表示已付款，就在表格单元格中显示"已付款"字样；如果way属性值为false，则显示红色的"未付款"字样，直观地告知用户订单的付款情况。 -->
|
|
|
<th width="60">付款情况</th>
|
|
|
<!-- 定义订票时间列，宽度为120px，使用JSTL的<fmt:formatDate>标签对订单的订票时间（booktime属性）进行格式化处理，按照"yyyy-MM-dd HH:mm:ss"的格式展示给用户，使其呈现为清晰易读的日期时间格式，方便用户了解订单的预订时间信息。 -->
|
|
|
<th width="120">订票时间</th>
|
|
|
<!-- 定义操作列，宽度为80px，用于放置针对订单信息进行操作的链接按钮，如编辑和删除操作，通过图标字体（Hui-iconfont）展示相应图标，并设置链接指向对应的Servlet（UpdatePrepAdminServlet用于编辑、DeletePrepAmdinServlet用于删除），同时传递订单编号作为参数，实现对具体订单记录的相应操作功能，每个链接都设置了无文本装饰样式（text-decoration:none）以及左侧外边距（ml-5）来优化外观和布局。 -->
|
|
|
<th width="80">操作</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<!-- 创建表体（tbody）部分，用于填充表格的具体数据行，每一行对应一条订单记录信息，通过JSTL的<c:forEach>标签循环遍历名为prepList的订单信息集合，将每个订单对象依次取出进行数据展示。 -->
|
|
|
<tbody>
|
|
|
<c:forEach items="${prepList}" var="prep" varStatus="status">
|
|
|
<tr class="text-c">
|
|
|
<!-- 在表格单元格中展示当前订单记录的序号，通过循环状态的索引（从0开始）加1来计算得到，确保序号从1开始依次递增，方便用户查看和计数。 -->
|
|
|
<td>${status.index + 1}</td>
|
|
|
<!-- 在表格单元格中展示当前订单的订单编号，直接从prep对象中获取prepId属性值进行展示，该编号是订单在系统中的唯一标识，用于各种数据关联和操作定位等用途。 -->
|
|
|
<td>${prep.prepId}</td>
|
|
|
<td>${prep.pmemberId}</td>
|
|
|
<td>
|
|
|
<!-- 创建一个链接（a标签），用于引导用户查看订单对应的乘车人详细信息，链接的href属性指向GetPmemberByPmemberIdServlet，并传递会员信息ID作为参数（通过JSTL表达式嵌入pmemberId的值），点击该链接可跳转到相应页面获取并展示更详细的乘车人信息内容，虽然当前代码中图片显示相关部分（<img>标签）被注释掉了，但可能原本有通过图片等可视化元素引导点击查看的设计思路，现在仅显示文本"点击查看"作为替代提示。 -->
|
|
|
<a href="<%=basePath%>GetPmemberByPmemberIdServlet?pmemberId=${prep.pmemberId}">
|
|
|
<%-- <img alt="" src="<%=basePath%>images/look.jpg"> --%>
|
|
|
点击查看
|
|
|
</a>
|
|
|
</td>
|
|
|
<td>${prep.trainNumber}</td>
|
|
|
<td>${prep.startStation}</td>
|
|
|
<td>${prep.endStation}</td>
|
|
|
<td>${prep.startTime}</td>
|
|
|
<td>${prep.endTime}</td>
|
|
|
<td>${prep.price}</td>
|
|
|
<!-- 使用JSTL的<c:if>条件判断标签，根据订单对象中way属性的值来决定显示不同的付款状态文本，如果way值为true，表示已付款，就在表格单元格中显示"已付款"字样；如果way值为false，则显示红色的"未付款"字样（通过设置style属性来改变文本颜色），直观地告知用户订单的付款情况。 -->
|
|
|
<c:if test="${prep.way == true}">
|
|
|
<td>已付款</td>
|
|
|
</c:if>
|
|
|
<c:if test="${prep.way == false}">
|
|
|
<td style="color:red">未付款</td>
|
|
|
</c:if>
|
|
|
<td>
|
|
|
<!-- 使用JSTL的<fmt:formatDate>标签对订单的订票时间（booktime属性）进行格式化处理，按照"yyyy-MM-dd HH:mm:ss"的日期时间格式将其转换为易读的字符串形式并展示在表格单元格中，方便用户直观了解订单的预订时间信息。 -->
|
|
|
<fmt:formatDate value="${prep.booktime}" pattern="yyyy-MM-dd HH:mm:ss"/>
|
|
|
</td>
|
|
|
<td class="f-14 td-manage">
|
|
|
<!-- 创建一个编辑操作的链接（a标签），设置无文本装饰样式（text-decoration:none）以及左侧外边距（ml-5）用于优化外观布局，href属性指向UpdatePrepAdminServlet，并通过
|
|
|
<a style="text-decoration:none" class="ml-5" href="<%=basePath%>UpdatePrepAdminServlet?prepId=${prep.prepId}" title="编辑"><i class="Hui-iconfont"></i></a>
|
|
|
<a style="text-decoration:none" class="ml-5" href="<%=basePath%>DeletePrepAmdinServlet?prepId=${prep.prepId}" title="删除"><i class="Hui-iconfont"></i></a>
|
|
|
</td>
|
|
|
</tr>
|
|
|
</c:forEach>
|
|
|
</tbody>
|
|
|
</table>
|
|
|
</div>
|
|
|
</div>
|
|
|
<!--_footer 作为公共模版分离出去-->
|
|
|
<script type="text/javascript" src="<%=basePath%>lib/jquery/1.9.1/jquery.min.js"></script>
|
|
|
<script type="text/javascript" src="<%=basePath%>lib/layer/2.4/layer.js"></script>
|
|
|
<script type="text/javascript" src="<%=basePath%>static/h-ui/js/H-ui.min.js"></script>
|
|
|
<script type="text/javascript" src="<%=basePath%>static/h-ui.admin/js/H-ui.admin.js"></script> <!--/_footer 作为公共模版分离出去-->
|
|
|
|
|
|
<!--请在下方写此页面业务相关的脚本-->
|
|
|
<script type="text/javascript" src="<%=basePath%>lib/My97DatePicker/4.8/WdatePicker.js"></script>
|
|
|
<script type="text/javascript" src="<%=basePath%>lib/datatables/1.10.0/jquery.dataTables.min.js"></script>
|
|
|
<script type="text/javascript" src="<%=basePath%>lib/laypage/1.2/laypage.js"></script>
|
|
|
<script type="text/javascript">
|
|
|
|
|
|
$('.table-sort').dataTable({
|
|
|
"aaSorting": [[ 0, "asc" ]],//默认第几个排序
|
|
|
"bStateSave": true,//状态保存
|
|
|
"pading":false,
|
|
|
"aoColumnDefs": [
|
|
|
//{"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示
|
|
|
{"orderable":false,"aTargets":[3, 12]}// 不参与排序的列
|
|
|
]
|
|
|
});
|
|
|
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
</html>
|
|
|
|
|
|
|
