|
|
<%@ page language="java" contentType="text/html; charset=UTF-8"
|
|
|
pageEncoding="UTF-8"%> // 设置页面的字符编码为UTF-8
|
|
|
|
|
|
<!DOCTYPE html> // 声明HTML5文档类型
|
|
|
<html lang="en"> // 开始HTML文档，指定语言为英语
|
|
|
<head>
|
|
|
<meta charset="UTF-8"> // 设置页面的字符编码为UTF-8
|
|
|
<title>规则列表</title> // 页面标题设置为“规则列表”
|
|
|
<link rel="stylesheet" href="../public/layui/css/layui.css" media="all"> // 引入layui框架的CSS文件，用于样式支持
|
|
|
<style>
|
|
|
.layui-table,.layui-table-view{ // 自定义layui表格和表格视图的样式
|
|
|
margin: 0 0px; // 设置表格的外边距为0
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body>
|
|
|
<!-- 表单 -->
|
|
|
<table class="layui-hide" id="ruleTable" lay-filter="formFilter"></table> // 定义一个表格元素，使用layui样式，并指定ID为ruleTable，lay-filter用于表格过滤
|
|
|
|
|
|
<script src="../public/layui/layui.js" charset="utf-8"></script> // 引入layui框架的JavaScript文件，提供组件和交互功能
|
|
|
|
|
|
<!-- 头部工具栏 -->
|
|
|
<script type="text/html" id="headBar"> // 自定义头部工具栏模板
|
|
|
<button type="button" class="layui-btn layui-btn-sm" lay-event="add"><i class="layui-icon">添加</i></button> // 添加按钮，点击时触发“add”事件
|
|
|
</script>
|
|
|
|
|
|
<!-- 表格后面的操作 -->
|
|
|
<script type="text/html" id="operateBar"> // 自定义操作栏模板
|
|
|
<a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a> // 编辑按钮，点击时触发“edit”事件
|
|
|
<a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a> // 删除按钮，点击时触发“del”事件
|
|
|
</script>
|
|
|
<script>
|
|
|
layui.use(['table','jquery'], function(){ // 使用layui的table和jquery模块
|
|
|
$ = layui.jquery; // 引入jQuery
|
|
|
var table = layui.table; // 获取layui的table模块，用于操作表格
|
|
|
// 进行渲染
|
|
|
var tableIns = table.render({ // 渲染表格
|
|
|
elem: '#ruleTable' // 表格的容器元素
|
|
|
,url:'./ruleList' // 表格数据源URL
|
|
|
,toolbar: '#headBar' // 使用自定义的头部工具栏
|
|
|
,height: '600' // 设置表格的高度为600px
|
|
|
,cols: [[ // 表格列配置
|
|
|
{fixed: 'left',field:'id', width:140, title: 'ID', sort: true} // ID列，宽度140px，可排序
|
|
|
,{field:'limit_day', width:180, title: '限制天数', sort: true} // 限制天数列，宽度180px，可排序
|
|
|
,{field:'borrow_num', width:180, title: '限制本数', sort: true} // 限制本数列，宽度180px，可排序
|
|
|
,{field:'borrow_library', width:180, title: '限制图书馆'} // 限制图书馆列，宽度180px
|
|
|
,{field:'overtime_fee', title: '逾期每天费用', width: 150} // 逾期费用列，宽度150px
|
|
|
,{fixed: 'right', title:'操作', toolbar: '#operateBar', align: 'center', width:150} // 操作列，宽度150px，包含自定义的操作按钮
|
|
|
]]
|
|
|
});
|
|
|
|
|
|
// 头部工具栏事件
|
|
|
table.on('toolbar(formFilter)', function(obj){ // 监听头部工具栏的事件
|
|
|
var checkStatus = table.checkStatus(obj.config.id); // 获取选中的表格行
|
|
|
switch(obj.event){ // 根据事件类型处理不同的操作
|
|
|
// 添加规则
|
|
|
case 'add':
|
|
|
var addCardLayer = layer.open({ // 打开添加规则的弹窗
|
|
|
type: 2, // 弹窗类型为iframe
|
|
|
title: '添加规则', // 弹窗标题
|
|
|
area: ['800px', '500px'], // 弹窗宽度800px，高度500px
|
|
|
maxmin: true, // 启用最大化和最小化按钮
|
|
|
content: 'ruleadd.jsp', // 弹窗内容来自ruleadd.jsp页面
|
|
|
});
|
|
|
};
|
|
|
});
|
|
|
|
|
|
// 侧边工具栏事件
|
|
|
table.on(('tool(formFilter)'), function(obj){ // 监听侧边操作栏的事件
|
|
|
var data = obj.data; // 获取当前操作行的数据
|
|
|
var layEvent = obj.event; // 获取事件类型
|
|
|
var tr = obj.tr; // 获取当前操作行的tr元素
|
|
|
var id = data.id; // 获取当前操作行的ID
|
|
|
switch(obj.event){ // 根据事件类型处理不同的操作
|
|
|
case 'edit': // 编辑操作
|
|
|
layer.open({ // 打开编辑规则的弹窗
|
|
|
type: 2, // 弹窗类型为iframe
|
|
|
title: '更改信息', // 弹窗标题
|
|
|
area: ['800px', '600px'], // 弹窗宽度800px，高度600px
|
|
|
maxmin: true, // 启用最大化和最小化按钮
|
|
|
shadeClose: true, // 点击遮罩层关闭弹窗
|
|
|
content: 'ruleedit.jsp?id=' +id, // 弹窗内容来自ruleedit.jsp，并传递ID作为参数
|
|
|
})
|
|
|
break;
|
|
|
case 'del': // 删除操作
|
|
|
layer.confirm("确认要删除么，非必要请勿删除",function(){ // 弹出确认删除的提示框
|
|
|
$.ajax({ // 使用AJAX请求删除数据
|
|
|
url: './ruleDel', // 请求的URL地址
|
|
|
data: "id=" +id, // 传递ID作为请求参数
|
|
|
type: 'get', // 使用GET请求
|
|
|
dataType: 'json', // 返回数据类型为JSON
|
|
|
timeout: 3000, // 请求超时设置为3000ms
|
|
|
success: function(data){ // 请求成功的回调函数
|
|
|
if(data.code == 0){ // 如果返回的code为0，表示删除成功
|
|
|
layer.msg(data.msg,{ // 弹出删除成功的提示
|
|
|
icon: 6, // 成功图标
|
|
|
anim: 5, // 动画效果
|
|
|
time: 500 // 显示时间500毫秒
|
|
|
})
|
|
|
setTimeout(function(){ // 延时操作
|
|
|
parent.location.reload(); // 刷新父页面
|
|
|
}, 500)
|
|
|
}else{ // 如果删除失败
|
|
|
layer.msg(data.msg,{ // 弹出删除失败的提示
|
|
|
icon:5, // 错误图标
|
|
|
anim:6 // 动画效果
|
|
|
})
|
|
|
}
|
|
|
},
|
|
|
error: function(){ // 请求失败的回调函数
|
|
|
layer.msg("连接超时"); // 弹出连接超时的提示
|
|
|
}
|
|
|
})
|
|
|
})
|
|
|
}
|
|
|
})
|
|
|
});
|
|
|
</script>
|
|
|
</body>
|
|
|
</html>
|
