|
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
|
|
|
pageEncoding="UTF-8"%>
|
|
|
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
|
|
|
<%
|
|
|
// 获取当前项目的上下文路径，例如在部署到服务器后，可能是项目名称对应的路径部分，后续用于构建完整的资源访问路径等。
|
|
|
String path = request.getContextPath();
|
|
|
// 构建项目的基础路径，包括协议（如http或https）、服务器名称、服务器端口以及上下文路径，用于准确地定位项目中的各种资源，比如样式表、脚本文件、图片等资源的引用地址都会基于这个基础路径来构建。
|
|
|
String basePath = request.getScheme() + "://" + request.getServerName() + ":" + request.getServerPort() + path + "/";
|
|
|
%>
|
|
|
<!DOCTYPE html>
|
|
|
<html>
|
|
|
|
|
|
<head>
|
|
|
<!-- 设置页面的字符编码为utf-8，确保能正确显示各种字符 -->
|
|
|
<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脚本文件，这两个文件用于让低版本IE浏览器（IE8及以下）支持HTML5标签和CSS3的媒体查询特性 -->
|
|
|
<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图标字体库的样式表文件，用于在页面中使用相应的图标字体来展示各种图标，提高页面的可视化效果 -->
|
|
|
<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图片透明等显示问题 -->
|
|
|
<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标签创建一个面包屑导航栏，用于显示当前页面在整个网站结构中的位置路径，方便用户进行页面导航 -->
|
|
|
<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元素，用于放置添加车次的按钮 -->
|
|
|
<span class="l">
|
|
|
<!-- 创建一个按钮（a标签模拟按钮样式），添加了多个类用于设置按钮的样式（如btn btn-primary radius表示主要按钮、圆角样式等），data-title属性可用于设置一些提示信息（比如在弹出框等场景显示），data-href和href属性都指向添加车次的JSP页面地址（通过basePath构建完整路径），点击该按钮可跳转到添加车次页面 -->
|
|
|
<a class="btn btn-primary radius" data-title="添加车次" data-href="<%=basePath%>pages/admin/right/addTrain.jsp" href="<%=basePath%>pages/admin/right/addTrain.jsp"><i class="Hui-iconfont"></i> 添加车次</a>
|
|
|
</span>
|
|
|
<!-- 创建一个右侧的span元素，用于显示数据总数信息 -->
|
|
|
<span class="r">共有数据：<strong>${trainList.size()}</strong> 条</span>
|
|
|
</div>
|
|
|
<!-- 创建一个距离顶部20px的div，用于放置车次列表表格 -->
|
|
|
<div class="mt-20">
|
|
|
<!-- 创建一个HTML表格（table），并添加了多个类用于设置表格的样式，如表格有边框、边框样式、背景颜色、鼠标悬停效果、可排序以及响应式布局等特性 -->
|
|
|
<table class="table table-border table-bordered table-bg table-hover table-sort table-responsive">
|
|
|
<!-- 创建表头（thead）部分，用于定义表格每列的标题 -->
|
|
|
<thead>
|
|
|
<tr class="text-c">
|
|
|
<!-- 定义表格列，设置列宽为80px，用于显示序号 -->
|
|
|
<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，用于显示剩余座位数信息 -->
|
|
|
<th width="60">剩余座位数</th>
|
|
|
<!-- 定义表格列，设置列宽为120px，用于显示操作按钮（如编辑、删除等） -->
|
|
|
<th width="120">操作</th>
|
|
|
</tr>
|
|
|
</thead>
|
|
|
<!-- 创建表体（tbody）部分，用于填充表格的具体数据行 -->
|
|
|
<tbody>
|
|
|
<!-- 使用JSTL的forEach标签循环遍历名为trainList的集合（可能是从后台传递过来的车次信息列表），每次循环将当前元素赋值给allTrain变量，同时通过varStatus获取循环状态（如当前索引等信息） -->
|
|
|
<c:forEach items="${trainList}" var="allTrain" varStatus="status">
|
|
|
<tr class="text-c">
|
|
|
<!-- 在表格单元格中显示当前行的序号，序号通过循环状态的索引（从0开始）加1来计算 -->
|
|
|
<td>${status.index + 1}</td>
|
|
|
<!-- 在表格单元格中显示当前车次的车次编号，通过从allTrain对象中获取trainNumber属性值来显示 -->
|
|
|
<td>${allTrain.trainNumber}</td>
|
|
|
<td>${allTrain.startStation}</td>
|
|
|
<td>${allTrain.endStation}</td>
|
|
|
<td>${allTrain.startTime}</td>
|
|
|
<td>${allTrain.endTime}</td>
|
|
|
<td>${allTrain.price}</td>
|
|
|
<td>${allTrain.seatNumber}</td>
|
|
|
<td class="f-14 td-manage">
|
|
|
<!-- 创建一个编辑操作的链接（a标签），设置无文本装饰样式，添加了左侧外边距（ml-5）用于间隔，href属性指向编辑车次的Servlet地址（通过传递当前车次的trainId作为参数），title属性设置鼠标悬停时的提示信息为"编辑"，内部通过图标字体（Hui-iconfont）显示编辑图标 -->
|
|
|
<a style="text-decoration:none" class="ml-5" href="<%=basePath%>UpdateTrainServlet?trainId=${allTrain.trainId}" title="编辑"><i class="Hui-iconfont"></i></a>
|
|
|
<!-- 创建一个删除操作的链接（a标签），同样设置无文本装饰样式和左侧外边距，href属性指向删除车次的Servlet地址（传递当前车次的trainId作为参数），title属性设置鼠标悬停时的提示信息为"删除"，内部通过图标字体显示删除图标 -->
|
|
|
<a style="text-decoration:none" class="ml-5" href="<%=basePath%>DeleteTrainServlet?trainId=${allTrain.trainId}" 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 作为公共模版分离出去-->
|
|
|
|
|
|
<!--请在下方写此页面业务相关的脚本，这里预留了位置方便添加与该页面特定业务逻辑相关的JavaScript代码，比如对表格的进一步操作、数据交互等功能的代码 -->
|
|
|
<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">
|
|
|
// 使用jQuery选择器选中类名为table-sort的表格元素，并调用dataTable方法将其初始化为一个具有排序、状态保存等功能的DataTable表格。
|
|
|
$('.table-sort').dataTable({
|
|
|
// 设置默认的排序方式，按照第一列（索引为0）进行升序（asc）排序，即表格加载时会自动按照第一列的值从小到大排序。
|
|
|
"aaSorting": [[0, "asc"]],
|
|
|
// 设置是否保存表格的状态（如排序状态、分页状态等），设置为true表示会保存这些状态，下次访问页面时会恢复上次的状态。
|
|
|
"bStateSave": true,
|
|
|
// 这里可能是拼写错误，正确的应该是"paging"，用于设置是否显示分页功能，若设为false则不显示分页，表格会一次性展示所有数据（如果数据量较多可能会影响页面性能和展示效果）。
|
|
|
"pading": false,
|
|
|
// 通过aoColumnDefs配置列的相关属性，这里设置了第八列（索引为8，对应操作列）不参与排序，即用户点击该列标题时不会触发排序操作。
|
|
|
"aoColumnDefs": [
|
|
|
// {"bVisible": false, "aTargets": [ 3 ]} //控制列的隐藏显示，这行代码被注释掉了，如果取消注释可以用于隐藏指定的列（这里原本可能是想隐藏第四列，可根据实际需求调整）。
|
|
|
{"orderable": false, "aTargets": [8]}
|
|
|
]
|
|
|
});
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html> |
