|
|
|
|
@ -1,343 +1,488 @@
|
|
|
|
|
<%@ page contentType="text/html;charset=UTF-8" %>
|
|
|
|
|
<%@ page contentType="text/html;<%@ page contentType="text/html;charset=UTF-8" %>
|
|
|
|
|
<!-- JSP页面指令，设置页面的内容类型为“text/html”（即HTML格式页面），并指定字符编码为“UTF-8”，
|
|
|
|
|
确保页面中的字符能被正确解析和显示，避免出现乱码问题 -->
|
|
|
|
|
<html>
|
|
|
|
|
|
|
|
|
|
<head>
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<title>酒店管理系统</title>
|
|
|
|
|
<link rel="stylesheet" href="../../js/layui/css/layui.css" media="all">
|
|
|
|
|
<link rel="stylesheet" href="../../MAIN/component/font-awesome-4.7.0/css/font-awesome.min.css">
|
|
|
|
|
<script src="../../js/layui/layui.js"></script>
|
|
|
|
|
<script src="../../js/jquery.js"></script>
|
|
|
|
|
<script src="../../js/global.js"></script>
|
|
|
|
|
<script src="../../js/toExcel/xlsx.full.min.js"></script>
|
|
|
|
|
<script type="text/javascript" src="../../js/toExcel/FileSaver.js"></script>
|
|
|
|
|
<script type="text/javascript" src="../../js/toExcel/Export2Excel.js"></script>
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
margin: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.layui-elem-field legend {
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.layui-field-title {
|
|
|
|
|
margin: 25px 0 15px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
<head>
|
|
|
|
|
<!-- 设置HTML页面的字符编码为“utf-8”，再次明确页面遵循的字符编码规范，辅助浏览器准确读取页面内容 -->
|
|
|
|
|
<meta charset="utf-8">
|
|
|
|
|
<!-- 设置页面的标题为“酒店管理系统”，该标题会显示在浏览器的标题栏中，让用户知晓当前页面所属的系统名称 -->
|
|
|
|
|
<title>酒店管理系统</title>
|
|
|
|
|
<!-- 引入Layui框架的样式文件（layui.css），href属性指定了文件的相对路径（上级目录下的js/layui/css/layui.css），
|
|
|
|
|
media="all"表示此样式适用于所有媒体类型，也就是在各种设备上都会应用该样式 -->
|
|
|
|
|
<link rel="stylesheet" href="../../js/layui/css/layui.css" media="all">
|
|
|
|
|
<!-- 引入Font Awesome字体图标库的样式文件（font-awesome.min.css），用于在页面中使用各种图标，
|
|
|
|
|
其路径为上级目录下的MAIN/component/font-awesome-4.7.0/css/font-awesome.min.css -->
|
|
|
|
|
<link rel="stylesheet" href="../../MAIN/component/font-awesome-4.7.0/css/font-awesome.min.css">
|
|
|
|
|
<!-- 引入Layui框架的JavaScript脚本文件（layui.js），这是使用Layui框架各种功能和组件的基础，
|
|
|
|
|
路径指向上级目录下的js/layui/layui.js -->
|
|
|
|
|
<script src="../../js/layui/layui.js"></script>
|
|
|
|
|
<!-- 引入jQuery库的JavaScript脚本文件（jquery.js），jQuery常用于操作DOM元素、处理事件、进行AJAX交互等，
|
|
|
|
|
方便简化JavaScript编程，其路径为上级目录下的js/jquery.js -->
|
|
|
|
|
<script src="../../js/jquery.js"></script>
|
|
|
|
|
<!-- 引入自定义的全局JavaScript脚本文件（global.js），里面可能包含了整个系统页面通用的一些变量定义、函数等逻辑，
|
|
|
|
|
路径为上级目录下的js/global.js -->
|
|
|
|
|
<script src="../../js/global.js"></script>
|
|
|
|
|
<!-- 引入处理Excel相关功能的JavaScript库（xlsx.full.min.js），可能用于后续将数据导出为Excel等操作，
|
|
|
|
|
其路径指向上级目录下的js/toExcel/xlsx.full.min.js -->
|
|
|
|
|
<script src="../../js/toExcel/xlsx.full.min.js"></script>
|
|
|
|
|
<!-- 引入FileSaver.js脚本文件，该文件通常用于在浏览器端实现文件保存功能，
|
|
|
|
|
比如配合前面的Excel库将生成的Excel文件保存到本地，其路径为上级目录下的js/toExcel/FileSaver.js -->
|
|
|
|
|
<script type="text/javascript" src="../../js/toExcel/FileSaver.js"></script>
|
|
|
|
|
<!-- 引入自定义的用于导出数据到Excel的脚本文件（Export2Excel.js），里面应该包含了具体的导出逻辑和相关功能实现，
|
|
|
|
|
其路径为上级目录下的js/toExcel/Export2Excel.js -->
|
|
|
|
|
<script type="text/javascript" src="../../js/toExcel/Export2Excel.js"></script>
|
|
|
|
|
<style>
|
|
|
|
|
body {
|
|
|
|
|
// 设置页面主体（body）元素的外边距为10像素，用于调整页面内容与浏览器边界的距离，使页面布局更美观
|
|
|
|
|
margin: 10px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
|
|
|
|
|
<legend>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="layui-inline">
|
|
|
|
|
<div class="layui-input-inline">
|
|
|
|
|
<input class="layui-input" id="inputSearch" placeholder="房间类型">
|
|
|
|
|
</div>
|
|
|
|
|
<button class="layui-btn fa fa-search" id="searchButton"> 搜索</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="layui-inline">
|
|
|
|
|
<button class="layui-btn fa fa-refresh" id="refreshButton"> 刷新</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="layui-inline">
|
|
|
|
|
<button class="layui-btn fa fa-pencil-square-o " id="insertButton"> 新增</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="layui-inline">
|
|
|
|
|
<button class="layui-btn fa fa-save" id="toXlsButton"> 导出</button>
|
|
|
|
|
</div>
|
|
|
|
|
.layui-elem-field legend {
|
|
|
|
|
// 设置具有layui-elem-field类的元素内的<legend>元素的字体大小为14像素，用于规范这类元素内标题文字的显示大小
|
|
|
|
|
font-size: 14px;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
.layui-field-title {
|
|
|
|
|
// 设置具有layui-field-title类的元素的外边距，上外边距为25像素，下外边距为15像素，用于调整该元素在页面中的垂直间距，使其布局更合理
|
|
|
|
|
margin: 25px 0 15px;
|
|
|
|
|
}
|
|
|
|
|
</style>
|
|
|
|
|
</head>
|
|
|
|
|
|
|
|
|
|
<body>
|
|
|
|
|
<!-- 创建一个<fieldset>元素，应用类名“layui-elem-field layui-field-title”，并通过内联样式设置上外边距为30像素，
|
|
|
|
|
用于划分页面中的一个区域，通常用于对相关内容进行分组展示，结合Layui的样式类呈现出特定的外观效果 -->
|
|
|
|
|
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
|
|
|
|
|
<legend>
|
|
|
|
|
<div>
|
|
|
|
|
<div class="layui-inline">
|
|
|
|
|
<div class="layui-input-inline">
|
|
|
|
|
<!-- 创建一个输入框（input）元素，应用类名“layui-input”，设置其id为“inputSearch”，
|
|
|
|
|
placeholder属性设置提示文字为“房间类型”，用于用户输入搜索关键词，以查找相关的房间类型信息 -->
|
|
|
|
|
<input class="layui-input" id="inputSearch" placeholder="房间类型">
|
|
|
|
|
</div>
|
|
|
|
|
</legend>
|
|
|
|
|
</fieldset>
|
|
|
|
|
<div id="toxlsTable">
|
|
|
|
|
<table id="tableID"></table>
|
|
|
|
|
<!-- 创建一个按钮（button）元素，应用类名“layui-btn fa fa-search”，设置其id为“searchButton”，文字为“搜索”，
|
|
|
|
|
点击该按钮可触发搜索相关的功能，其中“fa fa-search”类可能是来自Font Awesome图标库，用于显示搜索图标 -->
|
|
|
|
|
<button class="layui-btn fa fa-search" id="searchButton"> 搜索</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="layui-inline">
|
|
|
|
|
<!-- 创建一个按钮元素，应用类名“layui-btn fa fa-refresh”，设置其id为“refreshButton”，文字为“刷新”，
|
|
|
|
|
点击该按钮可触发刷新页面数据等相关功能，“fa fa-refresh”类用于显示刷新图标 -->
|
|
|
|
|
<button class="layui-btn fa fa-refresh" id="refreshButton"> 刷新</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="layui-inline">
|
|
|
|
|
<!-- 创建一个按钮元素，应用类名“layui-btn fa fa-pencil-square-o ”，设置其id为“insertButton”，文字为“新增”，
|
|
|
|
|
点击该按钮可触发新增房间类型等相关数据的功能，“fa fa-pencil-square-o ”类用于显示编辑图标 -->
|
|
|
|
|
<button class="layui-btn fa fa-pencil-square-o " id="insertButton"> 新增</button>
|
|
|
|
|
</div>
|
|
|
|
|
<div class="layui-inline">
|
|
|
|
|
<!-- 创建一个按钮元素，应用类名“layui-btn fa fa-save”，设置其id为“toXlsButton”，文字为“导出”，
|
|
|
|
|
点击该按钮可触发将数据导出为Excel文件等相关功能，“fa fa-save”类用于显示保存图标 -->
|
|
|
|
|
<button class="layui-btn fa fa-save" id="toXlsButton"> 导出</button>
|
|
|
|
|
</div>
|
|
|
|
|
</div>
|
|
|
|
|
<script type="text/html" id="barAuth">
|
|
|
|
|
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
|
|
|
|
|
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
|
|
|
|
|
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
|
|
|
|
|
</script>
|
|
|
|
|
<script>
|
|
|
|
|
layui.use(['util', 'layer', 'table'], function() {
|
|
|
|
|
$(document).ready(function() {
|
|
|
|
|
var table = layui.table,
|
|
|
|
|
layer = layui.layer,
|
|
|
|
|
util = layui.util;
|
|
|
|
|
var countNum;
|
|
|
|
|
var tableIns = table.render({
|
|
|
|
|
elem: '#tableID',
|
|
|
|
|
id: 'tableID',
|
|
|
|
|
url: baseUrl + '/RoomTypeServlet',
|
|
|
|
|
cols: [
|
|
|
|
|
[{
|
|
|
|
|
field: 'typeId',
|
|
|
|
|
title: 'ID',
|
|
|
|
|
sort: true,
|
|
|
|
|
fixed: true,
|
|
|
|
|
width: 150
|
|
|
|
|
}, {
|
|
|
|
|
field: 'typeName',
|
|
|
|
|
title: '类型名称'
|
|
|
|
|
}, {
|
|
|
|
|
field: 'price',
|
|
|
|
|
title: '价格'
|
|
|
|
|
}, {
|
|
|
|
|
field: 'splicPrice',
|
|
|
|
|
title: '拼房价格'
|
|
|
|
|
}, {
|
|
|
|
|
field: 'exceedance',
|
|
|
|
|
title: '可超预定数'
|
|
|
|
|
}, {
|
|
|
|
|
field: 'isSplice',
|
|
|
|
|
title: '是否可拼房'
|
|
|
|
|
}, {
|
|
|
|
|
field: 'right',
|
|
|
|
|
title: '管理',
|
|
|
|
|
align: 'center',
|
|
|
|
|
toolbar: '#barAuth',
|
|
|
|
|
width: 200
|
|
|
|
|
}]
|
|
|
|
|
],
|
|
|
|
|
page: true,
|
|
|
|
|
where: {
|
|
|
|
|
make: 0
|
|
|
|
|
},
|
|
|
|
|
done: function(res, curr, count) {
|
|
|
|
|
countNum = count;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
</legend>
|
|
|
|
|
</fieldset>
|
|
|
|
|
<!-- 创建一个id为“toxlsTable”的<div>元素，用于包裹下面的表格元素，可能作为后续对表格进行整体操作或布局调整的一个容器 -->
|
|
|
|
|
<div id="toxlsTable">
|
|
|
|
|
<!-- 创建一个空的<table>元素，设置其id为“tableID”，后续会通过JavaScript代码动态渲染表格内容并填充数据到这个表格中 -->
|
|
|
|
|
<table id="tableID"></table>
|
|
|
|
|
</div>
|
|
|
|
|
<!-- 创建一个<script>标签，设置其type属性为“text/html”，并设置id为“barAuth”，里面包含了一些HTML代码片段，
|
|
|
|
|
通常用于作为Layui表格组件中工具栏的模板定义，定义了“查看”“编辑”“删除”等操作按钮 -->
|
|
|
|
|
<script type="text/html" id="barAuth">
|
|
|
|
|
<a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
|
|
|
|
|
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
|
|
|
|
|
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
|
|
|
|
|
</script>
|
|
|
|
|
<script>
|
|
|
|
|
// 使用Layui框架的模块加载机制，加载'util'（可能是Layui提供的工具模块）、'layer'（用于弹出层等交互功能模块）、
|
|
|
|
|
// 'table'（用于表格相关操作的模块）这几个模块，并在加载完成后执行回调函数，在回调函数内进行页面的各种交互逻辑实现
|
|
|
|
|
layui.use(['util', 'layer', 'table'], function () {
|
|
|
|
|
// 当DOM文档加载完成后执行此回调函数，确保页面元素都已加载完毕后再操作元素，避免出现找不到元素等问题
|
|
|
|
|
$(document).ready(function () {
|
|
|
|
|
var table = layui.table,
|
|
|
|
|
layer = layui.layer,
|
|
|
|
|
util = layui.util;
|
|
|
|
|
var countNum;
|
|
|
|
|
// 使用Layui的表格模块（table）的render方法来渲染表格，配置表格的各种属性
|
|
|
|
|
var tableIns = table.render({
|
|
|
|
|
// 指定表格渲染的DOM元素选择器，这里选择id为“tableID”的元素（即前面定义的空表格元素）作为表格的挂载点
|
|
|
|
|
elem: '#tableID',
|
|
|
|
|
// 给表格设置一个唯一的id，方便后续对表格进行一些操作（如重新加载等），这里设置为“tableID”与挂载点的id保持一致
|
|
|
|
|
id: 'tableID',
|
|
|
|
|
// 设置表格数据的请求地址，通过baseUrl（应该是在全局脚本或其他地方定义的基础URL）加上具体的Servlet路径来获取数据
|
|
|
|
|
url: baseUrl + '/RoomTypeServlet',
|
|
|
|
|
cols: [
|
|
|
|
|
// 定义表格的列配置，每一个对象表示一列的相关属性设置
|
|
|
|
|
[{
|
|
|
|
|
// 设置列对应的字段名称为“typeId”，一般与后端返回的数据字段对应，用于绑定数据
|
|
|
|
|
field: 'typeId',
|
|
|
|
|
// 设置列的标题为“ID”，显示在表头位置，让用户知道该列数据的含义
|
|
|
|
|
title: 'ID',
|
|
|
|
|
// 设置该列可排序，用户点击表头时可按照此列数据进行升序或降序排列
|
|
|
|
|
sort: true,
|
|
|
|
|
// 设置该列固定在表格左侧，不随滚动条滚动而移动，常用于重要的、需要始终展示的列
|
|
|
|
|
fixed: true,
|
|
|
|
|
width: 150
|
|
|
|
|
}, {
|
|
|
|
|
field: 'typeName',
|
|
|
|
|
title: '类型名称'
|
|
|
|
|
}, {
|
|
|
|
|
field: 'price',
|
|
|
|
|
title: '价格'
|
|
|
|
|
}, {
|
|
|
|
|
field: 'splicPrice',
|
|
|
|
|
title: '拼房价格'
|
|
|
|
|
}, {
|
|
|
|
|
field: 'exceedance',
|
|
|
|
|
title: '可超预定数'
|
|
|
|
|
}, {
|
|
|
|
|
field: 'isSplice',
|
|
|
|
|
title: '是否可拼房'
|
|
|
|
|
}, {
|
|
|
|
|
field: 'right',
|
|
|
|
|
title: '管理',
|
|
|
|
|
align: 'center',
|
|
|
|
|
// 指定该列使用的工具栏模板，这里使用前面定义的id为“barAuth”的模板，用于显示操作按钮
|
|
|
|
|
toolbar: '#barAuth',
|
|
|
|
|
width: 200
|
|
|
|
|
}]
|
|
|
|
|
],
|
|
|
|
|
// 设置表格开启分页功能，Layui会自动处理分页相关的显示和交互逻辑
|
|
|
|
|
page: true,
|
|
|
|
|
// 设置向服务器请求数据时额外携带的参数，这里设置“make”参数为0，具体含义可能根据后端接口要求而定，
|
|
|
|
|
// 一般用于区分不同的请求场景或操作类型等
|
|
|
|
|
where: {
|
|
|
|
|
make: 0
|
|
|
|
|
},
|
|
|
|
|
done: function (res, curr, count) {
|
|
|
|
|
// 在表格渲染完成且数据加载完毕后执行此回调函数，将返回的数据总数赋值给countNum变量，
|
|
|
|
|
// 可能用于后续其他地方统计或判断数据量等情况
|
|
|
|
|
countNum = count;
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
//监听工具条
|
|
|
|
|
table.on('tool', function(obj) {
|
|
|
|
|
var data = obj.data,
|
|
|
|
|
layEvent = obj.event;
|
|
|
|
|
var typeId = data.typeId;
|
|
|
|
|
var typeName = data.typeName;
|
|
|
|
|
var price = data.price;
|
|
|
|
|
var splicPrice = data.splicPrice;
|
|
|
|
|
var exceedance = data.exceedance;
|
|
|
|
|
var isSplice = data.isSplice;
|
|
|
|
|
// 监听表格的工具条事件，当用户点击表格中的操作按钮（如“查看”“编辑”“删除”等）时触发相应的逻辑处理
|
|
|
|
|
table.on('tool', function (obj) {
|
|
|
|
|
var data = obj.data,
|
|
|
|
|
layEvent = obj.event;
|
|
|
|
|
var typeId = data.typeId;
|
|
|
|
|
var typeName = data.typeName;
|
|
|
|
|
var price = data.price;
|
|
|
|
|
var splicPrice = data.splicPrice;
|
|
|
|
|
var exceedance = data.exceedance;
|
|
|
|
|
var isSplice = data.isSplice;
|
|
|
|
|
|
|
|
|
|
if(layEvent === 'detail') {
|
|
|
|
|
layer.alert(
|
|
|
|
|
'ID：' + typeId + '<br>类型名称：' + typeName + '<br>价格：' + price +
|
|
|
|
|
'<br>拼房价格：' + splicPrice + '<br>可超预定数：' + exceedance + '<br>是否可拼房：' + isSplice, {
|
|
|
|
|
skin: 'layui-layer-lan',
|
|
|
|
|
closeBtn: 0,
|
|
|
|
|
title: '您当前选择的房间类型信息',
|
|
|
|
|
anim: 4,
|
|
|
|
|
offset: '180px'
|
|
|
|
|
});
|
|
|
|
|
} else if(layEvent === 'del') {
|
|
|
|
|
layer.confirm('您确定要删除该条数据吗？', {
|
|
|
|
|
offset: '180px',
|
|
|
|
|
btn: ['是滴', '手滑']
|
|
|
|
|
}, function() {
|
|
|
|
|
table.reload('tableID', {
|
|
|
|
|
where: {
|
|
|
|
|
make: 4,
|
|
|
|
|
typeId: typeId
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
layer.msg('删除结果如下', {
|
|
|
|
|
offset: '250px',
|
|
|
|
|
icon: 1
|
|
|
|
|
});
|
|
|
|
|
}, function() {
|
|
|
|
|
layer.msg('删除操作已取消', {
|
|
|
|
|
offset: '250px'
|
|
|
|
|
});
|
|
|
|
|
if (layEvent === 'detail') {
|
|
|
|
|
// 当点击“查看”按钮时，弹出一个提示框（使用Layui的layer模块的alert方法），显示该条房间类型数据的详细信息，
|
|
|
|
|
// 包括ID、类型名称、价格等各个字段的值，设置提示框的样式、标题等相关属性
|
|
|
|
|
layer.alert(
|
|
|
|
|
'ID：' + typeId + '<br>类型名称：' + typeName + '<br>价格：' + price +
|
|
|
|
|
'<br>拼房价格：' + splicPrice + '<br>可超预定数：' + exceedance + '<br>是否可拼房：' + isSplice, {
|
|
|
|
|
skin: 'layui-layer-lan',
|
|
|
|
|
closeBtn: 0,
|
|
|
|
|
title: '您当前选择的房间类型信息',
|
|
|
|
|
anim: 4,
|
|
|
|
|
offset: '180px'
|
|
|
|
|
});
|
|
|
|
|
} else if(layEvent === 'edit') {
|
|
|
|
|
//编辑
|
|
|
|
|
layer.prompt({
|
|
|
|
|
title: '请输入类型名称',
|
|
|
|
|
formType: 0,
|
|
|
|
|
value: typeName,
|
|
|
|
|
offset: '220px',
|
|
|
|
|
maxlength: 10
|
|
|
|
|
}, function(NewTypeName, index) {
|
|
|
|
|
var params = "new=" + NewTypeName + "&old=" + typeName;
|
|
|
|
|
$.post(baseUrl + '/QueryRoomTypeNameServlet', params, function(data) {
|
|
|
|
|
if(data === "1" || data === "2") {
|
|
|
|
|
if(NewTypeName.length < 3)
|
|
|
|
|
layer.alert('长度不符合！', {
|
|
|
|
|
} else if (layEvent === 'del') {
|
|
|
|
|
// 当点击“删除”按钮时，弹出一个确认框（使用Layui的layer模块的confirm方法），询问用户是否确定要删除该条数据，
|
|
|
|
|
// 设置确认框的位置、按钮文字等属性，用户点击不同按钮会执行相应的回调函数
|
|
|
|
|
layer.confirm('您确定要删除该条数据吗？', {
|
|
|
|
|
offset: '180px',
|
|
|
|
|
btn: ['是滴', '手滑']
|
|
|
|
|
}, function () {
|
|
|
|
|
// 如果用户点击“是滴”按钮，重新加载表格数据，通过设置“make”参数为4以及传递要删除的记录的“typeId”，
|
|
|
|
|
// 向后端发送请求，让后端执行删除操作并更新表格数据，这里应该是与后端约定好的参数传递和操作逻辑
|
|
|
|
|
table.reload('tableID', {
|
|
|
|
|
where: {
|
|
|
|
|
make: 4,
|
|
|
|
|
typeId: typeId
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
// 弹出一个提示框（使用Layui的layer模块的msg方法），告知用户删除操作的结果，设置提示框的位置、图标等属性
|
|
|
|
|
layer.msg('删除结果如下', {
|
|
|
|
|
offset: '250px',
|
|
|
|
|
icon: 1
|
|
|
|
|
});
|
|
|
|
|
}, function () {
|
|
|
|
|
// 如果用户点击“手滑”按钮（即取消删除操作），弹出一个提示框告知用户删除操作已取消，设置提示框的位置属性
|
|
|
|
|
layer.msg('删除操作已取消', {
|
|
|
|
|
offset: '250px'
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
} else if (layEvent === 'edit') {
|
|
|
|
|
// 编辑操作逻辑，当点击“编辑”按钮时，以下是一系列的交互流程用于让用户输入修改后的各项数据，并进行合法性校验等操作
|
|
|
|
|
|
|
|
|
|
// 弹出一个输入框（使用Layui的layer模块的prompt方法），让用户输入修改后的类型名称，设置输入框的标题、初始值、位置、最大输入长度等属性，
|
|
|
|
|
// 用户输入完成并点击确认后会执行相应的回调函数，回调函数中可以获取用户输入的值进行后续处理
|
|
|
|
|
layer.prompt({
|
|
|
|
|
title: '请输入类型名称',
|
|
|
|
|
formType: 0,
|
|
|
|
|
value: typeName,
|
|
|
|
|
offset: '220px',
|
|
|
|
|
maxlength: 10
|
|
|
|
|
}, function (NewTypeName, index) {
|
|
|
|
|
var params = "new=" + NewTypeName + "&old=" + typeName;
|
|
|
|
|
// 使用jQuery的$.post方法向服务器发送POST请求，请求地址为baseUrl加上'/QueryRoomTypeNameServlet'，
|
|
|
|
|
// 传递参数params（包含新的类型名称和旧的类型名称等信息），并在请求成功后执行回调函数处理返回的数据
|
|
|
|
|
$.post(baseUrl + '/QueryRoomTypeNameServlet', params, function (data) {
|
|
|
|
|
if (data === "1" || data === "2") {
|
|
|
|
|
if (NewTypeName.length < 3)
|
|
|
|
|
// 如果返回的数据为“1”或“2”且用户输入的新类型名称长度小于3，弹出一个警告框（使用Layui的layer模块的alert方法），
|
|
|
|
|
// 提示用户输入的长度不符合要求，设置警告框的标题、图标、动画效果、位置等属性
|
|
|
|
|
layer.alert('长度不符合！', {
|
|
|
|
|
title: '警告',
|
|
|
|
|
icon: 4,
|
|
|
|
|
anim: 6,
|
|
|
|
|
offset: '220px'
|
|
|
|
|
});
|
|
|
|
|
else {
|
|
|
|
|
layer.close(index);
|
|
|
|
|
layer.prompt({
|
|
|
|
|
title: '请输入价格',
|
|
|
|
|
formType: 0,
|
|
|
|
|
value: price,
|
|
|
|
|
offset: '220px',
|
|
|
|
|
maxlength: 10
|
|
|
|
|
}, function (NewPrice, index) {
|
|
|
|
|
if (isNaN(NewPrice)) {
|
|
|
|
|
// 如果用户输入的价格不是数字（通过isNaN函数判断），弹出一个提示框告知用户输入的值类型不合法，设置提示框的位置属性
|
|
|
|
|
layer.msg('您所输入的值类型不合法', {
|
|
|
|
|
// 使用Layui的layer模块的msg方法弹出一个提示消息框，显示文字为“您所输入的值类型不合法”，
|
|
|
|
|
// 并通过传入的配置对象设置提示框的垂直偏移位置为距离顶部250px，用于提示用户输入的数据类型不符合要求
|
|
|
|
|
offset: '250px'
|
|
|
|
|
});
|
|
|
|
|
else {
|
|
|
|
|
// 当满足前面的条件判断不成立时（即输入的值类型合法等情况），执行以下逻辑，此处通常用于关闭当前的输入框弹出层
|
|
|
|
|
layer.close(index);
|
|
|
|
|
layer.prompt({
|
|
|
|
|
// 使用Layui的layer模块的prompt方法再次弹出一个输入框，用于让用户输入拼房价格相关信息，
|
|
|
|
|
// 设置输入框的标题为“请输入拼房价格”，提示用户要输入的内容
|
|
|
|
|
title: '请输入拼房价格',
|
|
|
|
|
// 设置输入框的类型为0，一般表示普通文本输入框（不同的formType值对应不同的输入框类型，如密码框等有不同的设置）
|
|
|
|
|
formType: 0,
|
|
|
|
|
// 设置输入框的初始值为变量splicPrice的值，即显示之前的拼房价格作为默认值，方便用户参考修改
|
|
|
|
|
value: splicPrice,
|
|
|
|
|
// 设置输入框弹出层的垂直偏移位置为距离顶部220px，确定其在页面中的显示位置
|
|
|
|
|
offset: '220px',
|
|
|
|
|
// 设置输入框允许用户输入的最大长度为10个字符，对用户输入内容长度进行限制
|
|
|
|
|
maxlength: 10
|
|
|
|
|
}, function (NewSplicPrice, index) {
|
|
|
|
|
// 为输入框添加一个回调函数，当用户在输入框中输入内容并确认后，会触发此回调函数，
|
|
|
|
|
// 函数接收用户输入的值（NewSplicPrice）以及输入框所在的弹出层索引（index）作为参数，用于后续处理用户输入的数据
|
|
|
|
|
if (isNaN(NewSplicPrice)) {
|
|
|
|
|
// 通过isNaN函数判断用户输入的NewSplicPrice值是否为非数字类型，如果是，则执行以下逻辑
|
|
|
|
|
layer.msg('您所输入的值类型不合法', {
|
|
|
|
|
// 使用Layui的layer模块的msg方法弹出提示消息框，显示文字“您所输入的值类型不合法”，
|
|
|
|
|
// 并设置提示框的垂直偏移位置为距离顶部250px，用于提示用户输入的数据类型不符合要求
|
|
|
|
|
offset: '250px'
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
// 如果用户输入的值是数字类型（即通过isNaN判断为合法数字），执行以下逻辑，先关闭当前的输入框弹出层
|
|
|
|
|
layer.close(index);
|
|
|
|
|
layer.prompt({
|
|
|
|
|
// 再次使用Layui的layer模块的prompt方法弹出一个输入框，用于让用户输入可超预定数相关信息，
|
|
|
|
|
// 设置输入框的标题为“请输入可超预定数”，提示用户要输入的内容
|
|
|
|
|
title: '请输入可超预定数',
|
|
|
|
|
formType: 0,
|
|
|
|
|
// 设置输入框的初始值为变量isSplice的值，即显示之前的对应数据作为默认值，方便用户参考修改
|
|
|
|
|
value: isSplice,
|
|
|
|
|
offset: '220px',
|
|
|
|
|
maxlength: 10
|
|
|
|
|
}, function (NewExceedance, index) {
|
|
|
|
|
// 为这个新的输入框添加回调函数，当用户输入并确认后触发，接收用户输入的值（NewExceedance）和弹出层索引（index）作为参数
|
|
|
|
|
if (isNaN(NewExceedance)) {
|
|
|
|
|
// 判断用户输入的NewExceedance值是否为非数字类型，如果是，则执行以下逻辑
|
|
|
|
|
layer.msg('您所输入的值类型不合法', {
|
|
|
|
|
offset: '250px'
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
// 如果用户输入的值是数字类型（合法数字），执行以下逻辑，先关闭当前的输入框弹出层
|
|
|
|
|
layer.close(index);
|
|
|
|
|
layer.prompt({
|
|
|
|
|
// 又一次使用Layui的layer模块的prompt方法弹出一个输入框，用于让用户输入是否可拼房相关信息，
|
|
|
|
|
// 设置输入框的标题为“是否可拼房（Y/N）”，明确提示用户输入的格式要求
|
|
|
|
|
title: '是否可拼房（Y/N）',
|
|
|
|
|
formType: 0,
|
|
|
|
|
// 设置输入框的初始值为变量isSplice的值，显示之前的对应数据作为默认值，方便用户参考修改
|
|
|
|
|
value: isSplice,
|
|
|
|
|
offset: '220px',
|
|
|
|
|
maxlength: 10
|
|
|
|
|
}, function (NewIsSplice, index) {
|
|
|
|
|
// 为这个输入框添加回调函数，当用户输入并确认后触发，接收用户输入的值（NewIsSplice）和弹出层索引（index）作为参数
|
|
|
|
|
if (NewIsSplice.valueOf() === "Y" || NewIsSplice.valueOf() === "N") {
|
|
|
|
|
// 判断用户输入的NewIsSplice值是否为“Y”或者“N”（符合是否可拼房的预期输入格式要求），如果是，则执行以下逻辑，
|
|
|
|
|
// 使用之前定义的表格实例（tableIns）的reload方法重新加载表格数据，通过where属性设置向服务器传递的参数，
|
|
|
|
|
// 包括操作类型（make为2）、记录的ID（typeId）以及用户修改后的各项数据（如类型名称、价格等），
|
|
|
|
|
// 让后端根据这些参数更新对应的数据并返回新的表格数据进行展示
|
|
|
|
|
tableIns.reload({
|
|
|
|
|
where: {
|
|
|
|
|
make: 2,
|
|
|
|
|
typeId: typeId,
|
|
|
|
|
typeName: NewTypeName,
|
|
|
|
|
price: NewPrice,
|
|
|
|
|
splicPrice: NewSplicPrice,
|
|
|
|
|
exceedance: NewExceedance,
|
|
|
|
|
isSplice: NewIsSplice
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
// 关闭当前的输入框弹出层，完成整个编辑数据并更新表格的操作流程
|
|
|
|
|
layer.close(index);
|
|
|
|
|
} else {
|
|
|
|
|
// 如果用户输入的NewIsSplice值不符合“Y”或者“N”的格式要求，执行以下逻辑，
|
|
|
|
|
// 使用Layui的layer模块的msg方法弹出提示消息框，显示文字“您所输入的值类型不合法”，
|
|
|
|
|
// 并设置提示框的垂直偏移位置为距离顶部260px，用于提示用户输入的数据不符合要求
|
|
|
|
|
layer.msg('您所输入的值类型不合法', {
|
|
|
|
|
offset: '260px'
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
} else {
|
|
|
|
|
// 如果前面的其他条件判断都不满足（比如与后端交互返回的数据不符合预期的特定值情况），执行以下逻辑，
|
|
|
|
|
// 使用Layui的layer模块的alert方法弹出一个警告框，显示文字“已存在同名项！”，提示用户输入的类型名称已经存在，不能重复使用
|
|
|
|
|
layer.alert('已存在同名项！', {
|
|
|
|
|
title: '警告',
|
|
|
|
|
icon: 4,
|
|
|
|
|
anim: 6,
|
|
|
|
|
offset: '220px'
|
|
|
|
|
});
|
|
|
|
|
else {
|
|
|
|
|
layer.close(index);
|
|
|
|
|
layer.prompt({
|
|
|
|
|
title: '请输入价格',
|
|
|
|
|
formType: 0,
|
|
|
|
|
value: price,
|
|
|
|
|
offset: '220px',
|
|
|
|
|
maxlength: 10
|
|
|
|
|
}, function(NewPrice, index) {
|
|
|
|
|
if(isNaN(NewPrice)) {
|
|
|
|
|
layer.msg('您所输入的值类型不合法', {
|
|
|
|
|
offset: '250px'
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
layer.close(index);
|
|
|
|
|
layer.prompt({
|
|
|
|
|
title: '请输入拼房价格',
|
|
|
|
|
formType: 0,
|
|
|
|
|
value: splicPrice,
|
|
|
|
|
offset: '220px',
|
|
|
|
|
maxlength: 10
|
|
|
|
|
}, function(NewSplicPrice, index) {
|
|
|
|
|
if(isNaN(NewSplicPrice)) {
|
|
|
|
|
layer.msg('您所输入的值类型不合法', {
|
|
|
|
|
offset: '250px'
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
layer.close(index);
|
|
|
|
|
layer.prompt({
|
|
|
|
|
title: '请输入可超预定数',
|
|
|
|
|
formType: 0,
|
|
|
|
|
value: exceedance,
|
|
|
|
|
offset: '220px',
|
|
|
|
|
maxlength: 10
|
|
|
|
|
}, function(NewExceedance, index) {
|
|
|
|
|
if(isNaN(NewExceedance)) {
|
|
|
|
|
layer.msg('您所输入的值类型不合法', {
|
|
|
|
|
offset: '250px'
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
layer.close(index);
|
|
|
|
|
layer.prompt({
|
|
|
|
|
title: '是否可拼房（Y/N）',
|
|
|
|
|
formType: 0,
|
|
|
|
|
value: isSplice,
|
|
|
|
|
offset: '220px',
|
|
|
|
|
maxlength: 10
|
|
|
|
|
}, function(NewIsSplice, index) {
|
|
|
|
|
if(NewIsSplice.valueOf() === "Y" || NewIsSplice.valueOf() === "N") {
|
|
|
|
|
tableIns.reload({
|
|
|
|
|
where: {
|
|
|
|
|
make: 2,
|
|
|
|
|
typeId: typeId,
|
|
|
|
|
typeName: NewTypeName,
|
|
|
|
|
price: NewPrice,
|
|
|
|
|
splicPrice: NewSplicPrice,
|
|
|
|
|
exceedance: NewExceedance,
|
|
|
|
|
isSplice: NewIsSplice
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
layer.close(index);
|
|
|
|
|
} else {
|
|
|
|
|
layer.msg('您所输入的值类型不合法', {
|
|
|
|
|
offset: '260px'
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
// 搜索
|
|
|
|
|
$('#searchButton').click(function () {
|
|
|
|
|
// 为id为“searchButton”的元素（即页面中的搜索按钮）绑定点击事件处理函数，当按钮被点击时执行以下逻辑
|
|
|
|
|
var inputTxt = $('#inputSearch').val();
|
|
|
|
|
// 获取id为“inputSearch”的输入框元素的值（即用户输入的搜索关键词内容），并赋值给变量inputTxt，用于后续判断和操作
|
|
|
|
|
if (inputTxt === "") {
|
|
|
|
|
// 判断用户输入的搜索关键词是否为空字符串，如果是，则执行以下逻辑，
|
|
|
|
|
// 使用Layui的layer模块的msg方法弹出提示消息框，显示文字“您必须输入值”，
|
|
|
|
|
// 并设置提示框的垂直偏移位置为距离顶部250px，提示用户必须输入搜索内容才能进行搜索操作
|
|
|
|
|
layer.msg('您必须输入值', {
|
|
|
|
|
offset: '250px'
|
|
|
|
|
});
|
|
|
|
|
} else if (inputTxt.length > 10) {
|
|
|
|
|
// 如果用户输入的搜索关键词长度大于10个字符，则执行以下逻辑，
|
|
|
|
|
// 使用Layui的layer模块的msg方法弹出提示消息框，显示文字“您所输入的值长度不合法”，
|
|
|
|
|
// 并设置提示框的垂直偏移位置为距离顶部250px，提示用户输入的搜索内容长度不符合要求
|
|
|
|
|
layer.msg('您所输入的值长度不合法', {
|
|
|
|
|
offset: '250px'
|
|
|
|
|
});
|
|
|
|
|
} else {
|
|
|
|
|
layer.alert('已存在同名项！', {
|
|
|
|
|
title: '警告',
|
|
|
|
|
icon: 4,
|
|
|
|
|
anim: 6,
|
|
|
|
|
offset: '220px'
|
|
|
|
|
// 如果用户输入的搜索关键词不为空且长度合法（小于等于10个字符），执行以下逻辑，
|
|
|
|
|
// 先使用Layui的layer模块的msg方法弹出提示消息框，显示文字“搜索结果”，告知用户即将展示搜索结果，
|
|
|
|
|
// 并设置提示框的垂直偏移位置为距离顶部250px
|
|
|
|
|
layer.msg('搜索结果', {
|
|
|
|
|
offset: '250px'
|
|
|
|
|
});
|
|
|
|
|
// 使用之前定义的表格实例（tableIns）的reload方法重新加载表格数据，通过where属性设置向服务器传递的参数，
|
|
|
|
|
// 包括操作类型（make为3）以及用户输入的搜索关键词（typeName），让后端根据这些参数查询并返回符合条件的数据来更新表格展示内容
|
|
|
|
|
table.reload('tableID', {
|
|
|
|
|
where: {
|
|
|
|
|
make: 3,
|
|
|
|
|
typeName: inputTxt
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
//搜索
|
|
|
|
|
$('#searchButton').click(function() {
|
|
|
|
|
var inputTxt = $('#inputSearch').val();
|
|
|
|
|
if(inputTxt === "")
|
|
|
|
|
layer.msg('您必须输入值', {
|
|
|
|
|
offset: '250px'
|
|
|
|
|
});
|
|
|
|
|
else if(inputTxt.length > 10)
|
|
|
|
|
layer.msg('您所输入的值长度不合法', {
|
|
|
|
|
offset: '250px'
|
|
|
|
|
});
|
|
|
|
|
else {
|
|
|
|
|
layer.msg('搜索结果', {
|
|
|
|
|
offset: '250px'
|
|
|
|
|
});
|
|
|
|
|
table.reload('tableID', {
|
|
|
|
|
where: {
|
|
|
|
|
make: 3,
|
|
|
|
|
typeName: inputTxt
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
// 刷新
|
|
|
|
|
$('#refreshButton').click(function () {
|
|
|
|
|
// 为id为“refreshButton”的元素（即页面中的刷新按钮）绑定点击事件处理函数，当按钮被点击时执行以下逻辑
|
|
|
|
|
// 此处代码注释中描述了存在的一些问题，大致是在删除操作触发外键依赖后，会出现500异常，
|
|
|
|
|
// 通过消息回传参数再执行刷新操作时，框架会出现问题，导致往后端传入的分页参数固定为1，表格的重载刷新功能失效，
|
|
|
|
|
// 当前暂时发现是删除操作引起的异常，先采用强制刷新整个页面的方式来解决此处的异常情况
|
|
|
|
|
// 以下原本是想通过表格实例（tableIns）的reload方法重新加载表格数据，设置相关参数（make为0，page为1）来刷新表格，
|
|
|
|
|
// 但由于存在上述问题，暂时注释掉了这段代码
|
|
|
|
|
// tableIns.reload({
|
|
|
|
|
// where: {
|
|
|
|
|
// make: 0,
|
|
|
|
|
// page: 1
|
|
|
|
|
// }
|
|
|
|
|
// });
|
|
|
|
|
// 使用JavaScript的location对象的reload方法强制刷新整个页面，这是一种简单粗暴的解决当前刷新异常问题的临时办法
|
|
|
|
|
location.reload();
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
//刷新
|
|
|
|
|
$('#refreshButton').click(function() {
|
|
|
|
|
// 简述此处存在的BUG 删除操作触发外键依赖后，出500异常
|
|
|
|
|
// 通过msg回传参数，尔后执行刷新操作时，框架本身死掉
|
|
|
|
|
// 即往后端传入的分页参数固定为1，表格的重载刷新失效
|
|
|
|
|
// 暂时只发现删除引起的异常，先通过强制刷新解决此处异常
|
|
|
|
|
// tableIns.reload({
|
|
|
|
|
// where: {
|
|
|
|
|
// make: 0,
|
|
|
|
|
// page: 1
|
|
|
|
|
// }
|
|
|
|
|
// });
|
|
|
|
|
location.reload();
|
|
|
|
|
});
|
|
|
|
|
// 新增
|
|
|
|
|
$('#insertButton').click(function () {
|
|
|
|
|
// 为id为“insertButton”的元素（即页面中的新增按钮）绑定点击事件处理函数，当按钮被点击时执行以下逻辑，
|
|
|
|
|
// 使用Layui的layer模块的open方法弹出一个新的窗口（弹窗），用于新增房间类型相关数据的操作界面展示等功能
|
|
|
|
|
layer.open({
|
|
|
|
|
// 设置弹窗的标题为“新增”，明确此弹窗的用途是进行新增数据操作
|
|
|
|
|
title: "新增",
|
|
|
|
|
// 设置弹窗的按钮文字数组，这里只设置了一个“关闭”按钮，用于关闭弹窗操作
|
|
|
|
|
btn: ['关闭'],
|
|
|
|
|
yes: function (index) {
|
|
|
|
|
// 为弹窗的“是”（这里对应“关闭”按钮，因为只有一个按钮）按钮点击事件设置回调函数，
|
|
|
|
|
// 当按钮被点击时，先使用之前定义的表格实例（tableIns）的reload方法重新加载表格数据，
|
|
|
|
|
// 通过where属性设置操作类型（make为0），让后端获取最新的数据并更新表格展示内容，
|
|
|
|
|
// 然后使用Layui的layer模块的close方法关闭当前的弹窗
|
|
|
|
|
tableIns.reload({
|
|
|
|
|
where: {
|
|
|
|
|
make: 0
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
layer.close(index); //关闭弹窗
|
|
|
|
|
},
|
|
|
|
|
// 设置弹窗的类型为2，一般对应页面层类型（不同类型有不同的展示和交互特点，具体由Layui框架定义）
|
|
|
|
|
type: 2,
|
|
|
|
|
// 设置弹窗的宽度为780px，高度为450px，确定弹窗的大小尺寸，用于展示合适的新增数据操作界面
|
|
|
|
|
area: ['780px', '450px'],
|
|
|
|
|
fixed: false,
|
|
|
|
|
maxmin: true,
|
|
|
|
|
// 设置弹窗加载的内容页面地址，这里指向“/hb/webpage/SystemSetting/insertRomeType.jsp”，
|
|
|
|
|
// 即当弹窗打开时会加载这个JSP页面作为新增数据的操作界面
|
|
|
|
|
content: '/hb/webpage/SystemSetting/insertRomeType.jsp',
|
|
|
|
|
cancel: function () {
|
|
|
|
|
// 为弹窗的取消操作（比如点击弹窗右上角的关闭按钮等取消行为）设置回调函数，
|
|
|
|
|
// 当取消操作发生时，同样使用表格实例（tableIns）的reload方法重新加载表格数据，
|
|
|
|
|
// 通过where属性设置操作类型（make为0），让后端获取最新的数据并更新表格展示内容
|
|
|
|
|
tableIns.reload({
|
|
|
|
|
where: {
|
|
|
|
|
make: 0
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
//新增
|
|
|
|
|
$('#insertButton').click(function() {
|
|
|
|
|
layer.open({
|
|
|
|
|
title: "新增",
|
|
|
|
|
btn: ['关闭'],
|
|
|
|
|
yes: function(index) {
|
|
|
|
|
tableIns.reload({
|
|
|
|
|
where: {
|
|
|
|
|
make: 0
|
|
|
|
|
}
|
|
|
|
|
// 导出
|
|
|
|
|
$('#toXlsButton').click(function () {
|
|
|
|
|
// 为id为“toXlsButton”的元素（即页面中的导出按钮）绑定点击事件处理函数，当按钮被点击时执行以下逻辑，
|
|
|
|
|
// 通过修改浏览器的location.href属性，跳转到“baseUrl + '/RoomInfoExcelServlet'”这个地址，
|
|
|
|
|
// 一般是向服务器端发起请求，让服务器端执行生成Excel文件的相关逻辑，比如从数据库获取数据并整理成Excel格式返回给浏览器端下载等操作
|
|
|
|
|
location.href = baseUrl + '/RoomInfoExcelServlet';
|
|
|
|
|
layer.alert('Excel文件生成完成！', {
|
|
|
|
|
// 使用Layui的layer模块的alert方法弹出一个提示消息框，显示文字“Excel文件生成完成！”，
|
|
|
|
|
// 并设置提示框的标题为“成功”，图标为6（一般对应成功的图标样式，由Layui框架定义），动画效果为1（也是由Layui框架定义的某种动画展示方式），
|
|
|
|
|
// 垂直偏移位置为距离顶部250px，用于告知用户Excel文件已经成功生成，可以进行后续操作（比如保存等）
|
|
|
|
|
title: '成功',
|
|
|
|
|
icon: 6,
|
|
|
|
|
anim: 1,
|
|
|
|
|
offset: '250px'
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
layer.close(index); //关闭弹窗
|
|
|
|
|
},
|
|
|
|
|
type: 2,
|
|
|
|
|
area: ['780px', '450px'],
|
|
|
|
|
fixed: false,
|
|
|
|
|
maxmin: true,
|
|
|
|
|
content: '/hb/webpage/SystemSetting/insertRomeType.jsp',
|
|
|
|
|
cancel: function() {
|
|
|
|
|
tableIns.reload({
|
|
|
|
|
where: {
|
|
|
|
|
make: 0
|
|
|
|
|
|
|
|
|
|
// 回到顶端
|
|
|
|
|
util.fixbar({
|
|
|
|
|
// 使用Layui的util模块的fixbar方法创建一个回到页面顶端的功能组件，通过传入配置对象来设置相关属性和行为
|
|
|
|
|
showHeight: 2,
|
|
|
|
|
click: function (type) {
|
|
|
|
|
// 为回到顶端功能组件的点击事件设置回调函数，当用户点击该组件时，会接收到一个参数type（具体含义由Layui框架定义，可能与点击的具体位置等相关），
|
|
|
|
|
// 此处只是简单地将接收到的type参数打印到浏览器的控制台（一般用于调试目的，查看点击操作传递的相关信息）
|
|
|
|
|
console.log(type);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
//导出
|
|
|
|
|
$('#toXlsButton').click(function() {
|
|
|
|
|
location.href = baseUrl + '/RoomInfoExcelServlet';
|
|
|
|
|
layer.alert('Excel文件生成完成！', {
|
|
|
|
|
title: '成功',
|
|
|
|
|
icon: 6,
|
|
|
|
|
anim: 1,
|
|
|
|
|
offset: '250px'
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
//回到顶端
|
|
|
|
|
util.fixbar({
|
|
|
|
|
showHeight: 2,
|
|
|
|
|
click: function(type) {
|
|
|
|
|
console.log(type);
|
|
|
|
|
}
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
});
|
|
|
|
|
|
