xuyang_branch
徐扬 5 months ago
parent 9e55697190
commit 8d273ec582

@ -10,10 +10,13 @@
<html>
<head>
<title>修改信息</title>
<!-- 设置网页图标 -->
<link rel="icon" href="/images/favicon.ico" sizes="32x32" />
<!-- 引入CSS样式文件 -->
<link rel="stylesheet" href="/css/font.css">
<link rel="stylesheet" href="/css/xadmin.css">
<link rel="stylesheet" href="/css/pg_btn.css">
<!-- 引入JavaScript脚本文件 -->
<script type="text/javascript" src="./js/jquery-1.3.2.min.js"></script>
<script src="lib/layui/layui.js"></script>
<script type="text/javascript" src="./js/xadmin.js"></script>
@ -22,9 +25,12 @@
<body>
<div class="x-body">
<%--把表单封装成一个Admin对象传给服务端--%>
<form class="layui-form" id="f_auto" action="/updateAdmin" method="post">
<!-- 表单开始,用于提交修改后的管理员信息 -->
<form class="layui-form" id="f_auto" action="/updateAdmin" method="post">
<!-- 隐藏字段存储管理员ID -->
<input type="hidden" value="${sessionScope.a.a_id}" name="a_id" id="a_id" class="layui-input"/>
<!-- 用户名输入框 -->
<div class="layui-form-item">
<label for="a_username" class="layui-form-label">
<span class="">用户名</span>
@ -35,6 +41,7 @@
</div>
</div>
<!-- 密码输入框 -->
<div class="layui-form-item">
<label for="a_password" class="layui-form-label">
<span class="">密码</span>
@ -45,6 +52,7 @@
</div>
</div>
<!-- 姓名输入框 -->
<div class="layui-form-item">
<label for="a_name" class="layui-form-label">
<span class="">姓名</span>
@ -55,6 +63,7 @@
</div>
</div>
<!-- 电话输入框 -->
<div class="layui-form-item">
<label for="a_phone" class="layui-form-label">
<span class="">电话</span>
@ -65,6 +74,7 @@
</div>
</div>
<!-- 级别输入框 -->
<div class="layui-form-item">
<label for="a_power" class="layui-form-label">
<span class="">级别</span>
@ -75,6 +85,7 @@
</div>
</div>
<!-- 级别描述输入框 -->
<div class="layui-form-item">
<label for="a_describe" class="layui-form-label">
<span class="">级别描述</span>
@ -85,14 +96,17 @@
</div>
</div>
<!-- 提交按钮 -->
<div class="layui-form-item" id="btn_xg">
<button class="layui-btn" id="btn_on" lay-submit="" lay-filter="updateAdmin">
<button class="layui-btn" id="btn_on" lay-submit="" lay-filter="updateAdmin">
修改
</button>
</div>
</form>
</div>
</body>
</html>
<script>
// layui.use(['form','layer','laydate'], function(){

@ -11,23 +11,28 @@
<html>
<head>
<title>后台登录</title>
<!-- 设置页面相关元数据 -->
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<%--<meta http-equiv="Cache-Control" content="no-siteapp" />--%>
<!-- 引入图标 -->
<link rel="icon" href="/images/favicon.ico" sizes="32x32" />
<!-- 引入CSS样式文件 -->
<link rel="stylesheet" href="/css/font.css">
<link rel="stylesheet" href="/css/xadmin.css">
<!-- 引入JavaScript脚本文件 -->
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script src="/lib/layui/layui.js"></script>
<script type="text/javascript" src="/js/xadmin.js"></script>
<script src="/layui_exts/excel.js"></script>
<!-- 自定义样式 -->
<style type="text/css">
.layui-table{
text-align: center;
}
text-align: center;
}
.layui-table th{
text-align: center;
}
@ -36,29 +41,37 @@
<body>
<div class="x-nav">
<span class="layui-breadcrumb">
<!-- 面包屑导航 -->
<span class="layui-breadcrumb">
<a href="">首页</a>
<a href="/findAdmin">管理员信息</a>
</span>
<!-- 刷新按钮 -->
<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="/findAdmin" title="刷新">
<i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<div class="x-body">
<div class="layui-row">
<!-- 搜索表单 -->
<form class="layui-form layui-col-md12 x-so" action="/findAdmin" >
<input type="hidden" class="layui-input" placeholder="请输入用户名" name="a_id" id="a_id">
<input class="layui-input" placeholder="请输入用户名" name="a_username" id="a_username">
<input class="layui-input" placeholder="请输入级别描述" name="a_describe" id="a_describe" >
<!-- 分页信息,隐藏字段 -->
<input class="layui-input" type="hidden" name="pageIndex" value="1">
<input class="layui-input" type="hidden" name="pageSize" value="3">
<!-- 搜索按钮 -->
<button class="layui-btn" lay-submit="" lay-filter="search"><i class="layui-icon">&#xe615;</i></button>
</form>
</div>
<xblock>
<!-- 添加管理员按钮 -->
<button id="addStudnetBtn" class="layui-btn layui-btn-normal"> <i class="layui-icon">&#xe654;</i>添加</button>
<!-- 导出按钮 -->
<button class="layui-btn layui-btn-warm" lay-filter="toolbarDemo" lay-submit=""><i class="layui-icon">&#xe67c;</i>导出</button>
<!-- 显示数据总数 -->
<span class="x-right" style="line-height:40px">共有数据:${ai.totalCount} 条</span>
</xblock>
@ -67,7 +80,7 @@
<thead>
<tr>
<%--<th>--%>
<%--<div class="layui-unselect header layui-form-checkbox" lay-skin="primary"><i class="layui-icon">&#xe605;</i></div>--%>
<%--<div class="layui-unselect header layui-form-checkbox" lay-skin="primary"><i class="layui-icon">&#xe605;</i></div>--%>
<%--</th>--%>
<th>ID</th>
<th>用户名</th>
@ -79,30 +92,34 @@
<th>操作</th>
</thead>
<tbody>
<c:forEach items="${ai.list}" var="ai">
<tr>
<%--<td>--%>
<%--<div class="layui-unselect layui-form-checkbox" lay-skin="primary" data-id='2'><i class="layui-icon">&#xe605;</i></div>--%>
<%--</td>--%>
<%--<td>${class.c_id}</td>--%>
<td class="myid">${ai.a_id}</td>
<td>${ai.a_username}</td>
<%--<td>${ai.a_password}</td>--%>
<td>${ai.a_name}</td>
<td>${ai.a_phone}</td>
<%--<td>${ai.a_power}</td>--%>
<td>${ai.a_describe}</td>
<td class="td-manage">
<%--href="/findAdminById?a_id=${ai.a_id}"--%>
<a title="编辑" class="updateEdit" href="#">
<i class="layui-icon">&#xe642;</i>
</a>
<a title="删除" onclick="member_del(this,'${ai.a_id}','${ai.a_power}')" href="javascript:;">
<i class="layui-icon">&#xe640;</i>
</a>
</td>
</tr>
</c:forEach>
<!-- 循环遍历管理员信息列表,为每个管理员生成一行数据 -->
<c:forEach items="${ai.list}" var="ai">
<tr>
<%--<td>--%>
<%--<div class="layui-unselect layui-form-checkbox" lay-skin="primary" data-id='2'><i class="layui-icon">&#xe605;</i></div>--%>
<%--</td>--%>
<td class="myid">${ai.a_id}</td>
<!-- 显示管理员ID -->
<td>${ai.a_username}</td>
<!-- 显示管理员用户名 -->
<%--<td>${ai.a_password}</td>--%> <!-- 注释掉密码显示 -->
<td>${ai.a_name}</td>
<!-- 显示管理员姓名 -->
<td>${ai.a_phone}</td>
<!-- 显示管理员电话 -->
<%--<td>${ai.a_power}</td>--%> <!-- 注释掉级别显示 -->
<td>${ai.a_describe}</td> <!-- 显示管理员级别描述 -->
<td class="td-manage">
<!-- 编辑和删除按钮 -->
<a title="编辑" class="updateEdit" href="#">
<i class="layui-icon">&#xe642;</i>
</a>
<a title="删除" onclick="member_del(this,'${ai.a_id}','${ai.a_power}')" href="javascript:;">
<i class="layui-icon">&#xe640;</i>
</a>
</td>
</tr>
</c:forEach>
</tbody>
</table>
@ -162,7 +179,8 @@
</div>
</div>
<div class="" >
<div class="" >
<input type="hidden" id="totalPageCount" value="${ai.pageTotalCount}"/>
<c:import url="pageBtn.jsp">
<c:param name="totalCount" value="${ai.totalCount}"/>
@ -173,124 +191,194 @@
</div>
<script>
// 配置layui的扩展模块路径
layui.config({
base: 'layui_exts/',
// 设置扩展模块的路径
}).extend({
excel: 'excel',
// 添加excel模块
});
layui.use(['jquery', 'excel', 'form','layer','laydate'], function(){
// 使用layui模块
layui.use(['jquery', 'excel', 'form', 'layer', 'laydate'], function(){
var form = layui.form,
// 获取form模块
$ = layui.jquery,
// 获取jQuery模块
laydate = layui.laydate;
// 获取laydate模块
var excel = parent.layui.excel;
// 获取父页面的excel模块
//执行一个laydate实例
// 初始化laydate日期选择器
laydate.render({
elem: '#start' //指定元素
elem: '#start'
// 指定绑定日期选择器的元素
});
form.render();
// 重新渲染表单元素以便layui能够识别新的表单元素
// 监听表单提交事件
form.on('submit(toolbarDemo)', function(){
// 发起ajax请求获取导出数据
$.ajax({
url: '/exportadminlist',
// 请求的URL
type: 'post',
// 请求类型
dataType: 'json',
// 预期服务器返回的数据类型
contentType: "application/json; charset=utf-8",
// 发送信息至服务器时内容编码类型
success: function (data) {
// 请求成功后的回调函数
console.log(data);
// 在控制台打印返回的数据
// 1. 如果需要调整顺序,请执行梳理函数
// 1. 调整导出数据的顺序
var dt = excel.filterExportData(data, [
'a_id'
,'a_username'
,'a_name'
,'a_phone'
,'a_describe'
'a_id',
// ID
'a_username',
// 用户名
'a_name',
// 姓名
'a_phone',
// 电话
'a_describe'
// 级别描述
]);
// 2. 数组头部新增表头
dt.unshift({a_id: 'ID', a_username: '用户名', a_name: '姓名', a_phone: '电话', a_describe: '级别描述'});
// 2. 在数据数组头部添加表头信息
dt.unshift({
a_id: 'ID',
a_username: '用户名',
a_name: '姓名',
a_phone: '电话',
a_describe: '级别描述'
});
// 意思是A列40pxB列60px(默认)C列120pxD、E、F等均未定义
// 3. 设置列宽配置
var colConf = excel.makeColConfig({
'A': 40,
// A列宽度40px
'D': 90
// D列宽度90px
}, 60);
// 其他未定义列的默认宽度为60px
// 4. 记录开始时间
var timestart = Date.now();
// 3. 执行导出函数,系统会弹出弹框
// 5. 执行导出函数,系统会弹出下载框
excel.exportExcel({
sheet1: dt
// 数据
}, '管理员数据.xlsx', 'xlsx', {
// 文件名和类型
extend: {
'!cols': colConf
// 列配置
}
});
// 6. 记录结束时间
var timeend = Date.now();
// 7. 计算耗时
var spent = (timeend - timestart) / 1000;
layer.alert('导出耗时 '+spent+' s');
//setTimeout(function () {window.location.href='/findAdmin';},2000);
// 弹出耗时信息
//setTimeout(function () {window.location.href='/findAdmin';},2000); // 2秒后跳转页面
},
error: function () {
// 请求失败后的回调函数
//console.log(data);
// 在控制台打印错误信息
setTimeout(function () {window.location.href='/findAdmin';},2000);
// 2秒后跳转页面
}
});
});
});
/*添加弹出框*/
$("#addStudnetBtn").click(function () {
layer.open({
type:1,
title:"添加管理员",
skin:"myclass",
area:["50%"],
anim:2,
content:$("#test").html()
});
$("#addEmployeeForm")[0].reset();
form.on('submit(formDemo)', function(data) {
// layer.msg('aaa',{icon:1,time:3000});
var param=data.field;
// console.log(JSON.stringify(param));
$.ajax({
url: '/addAdmin',
type: "post",
data:JSON.stringify(param),
contentType: "application/json; charset=utf-8",
success:function(da){
console.log(da);
layer.msg('添加成功', {icon: 1, time: 2000});
setTimeout(function () {window.location.href='/findAdmin';},2000);
},
error:function(){
layer.msg('添加失败',{icon:0,time:2000});
setTimeout(function () {window.location.href='/findAdmin';},2000);
}
});
// return false;
// 当点击添加管理员按钮时,打开一个弹出层
$("#addStudnetBtn").click(function () {
// 使用layer.open方法打开一个弹出层
layer.open({
type: 1,
// 类型为页面层
title: "添加管理员",
// 弹出层的标题
skin: "myclass",
// 弹出层的皮肤样式
area: ["50%"],
// 弹出层的宽度这里设置为屏幕宽度的50%
anim: 2,
// 弹出层的动画效果
content: $("#test").html()
// 弹出层的内容这里是通过jQuery选择器获取的HTML内容
});
// 重置表单
$("#addEmployeeForm")[0].reset();
// 监听表单提交事件
form.on('submit(formDemo)', function(data) {
// 可以在这里使用layer.msg显示消息提示这里被注释掉了
// layer.msg('aaa',{icon:1,time:3000});
var param = data.field; // 获取表单数据
// console.log(JSON.stringify(param)); // 在控制台打印表单数据,这里被注释掉了
// 发起ajax请求提交表单数据
$.ajax({
url: '/addAdmin', // 请求的URL
type: "post",
// 请求类型
data: JSON.stringify(param),
// 发送到服务器的数据这里是表单数据的JSON字符串
contentType: "application/json; charset=utf-8",
// 发送信息至服务器时内容编码类型
success: function(da){
// 请求成功后的回调函数
console.log(da);
// 在控制台打印服务器返回的数据
layer.msg('添加成功', {icon: 1, time: 2000});
// 显示成功消息提示
setTimeout(function () {window.location.href='/findAdmin';},2000);
// 2秒后跳转到管理员列表页面
},
error: function(){
// 请求失败后的回调函数
layer.msg('添加失败',{icon:0,time:2000});
// 显示失败消息提示
setTimeout(function () {window.location.href='/findAdmin';},2000);
// 2秒后跳转到管理员列表页面
}
});
// return false; // 阻止表单默认提交行为,这里被注释掉了
});
});
/*编辑*/
$(".updateEdit").click(function () {
var myid = $(this).parent("td").parent("tr").children(".myid").html();
//判断
// 获取当前行的管理员ID
var admin_id = ${sessionScope.ad.a_id};
// 获取当前登录管理员的ID
if(admin_id != myid){
// 判断当前登录管理员是否有权限编辑
layer.alert("对不起,您没有权限:(");
// 如果没有权限,弹出提示框
}else {
<%--window.location.href = "/findAdminById?a_id=${ai.a_id}";--%>
window.location.href = "/findAdminById?a_id=" + myid;
// 如果有权限跳转到编辑页面并传递管理员ID
// 这里的注释表示原来的代码被注释掉了
// window.location.href = "/findAdminById?a_id=${ai.a_id}";
}
});
@ -299,8 +387,11 @@
function member_del(obj,a_id,a_power){
var power = ${sessionScope.ad.a_power};
// 获取当前登录管理员的权限
var id = ${sessionScope.ad.a_id};
// 获取当前登录管理员的ID
if(power != 1 && id != a_id){
// 如果没有权限,弹出提示框
layer.alert("对不起,您没有权限:(");
}
// else if(power == 1 && id == a_id){
@ -308,15 +399,20 @@
// }
else {
layer.confirm('确认要删除吗?',function(index){
// 如果有权限,弹出确认框
//发异步删除数据
$.get("/deleteAdmin",{"a_id":a_id},function (data) {
// 发起GET请求删除管理员信息
if(data = true){
// 判断删除操作是否成功
layer.msg('删除成功!',{icon:1,time:2000});
setTimeout(function () {window.location.href='/findAdmin';},2000);
// 如果成功,显示成功消息并跳转
}else {
layer.msg('删除失败!',{icon:1,time:2000});
setTimeout(function () {window.location.href='/findAdmin';},2000);
// 如果失败,显示失败消息并跳转
}
});
});

@ -9,54 +9,76 @@
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html>
<head>
<!-- 设置页面标题 -->
<title>修改信息</title>
<!-- 引入页面的图标 -->
<link rel="icon" href="/images/favicon.ico" sizes="32x32" />
<!-- 引入字体样式文件 -->
<link rel="stylesheet" href="/css/font.css">
<!-- 引入xadmin的样式文件 -->
<link rel="stylesheet" href="/css/xadmin.css">
<!-- 引入自定义按钮样式文件 -->
<link rel="stylesheet" href="/css/pg_btn.css">
<!-- 引入jQuery库版本为1.3.2 -->
<script type="text/javascript" src="./js/jquery-1.3.2.min.js"></script>
<!-- 引入layui库 -->
<script src="lib/layui/layui.js"></script>
<!-- 引入xadmin的脚本文件 -->
<script type="text/javascript" src="./js/xadmin.js"></script>
</head>
<body>
<!-- 页面的主体内容区域 -->
<div class="x-body">
<form class="layui-form" id="f_auto" action="/updateClass" method="post" >
<!-- 创建一个layui风格的表单 -->
<form class="layui-form" id="f_auto" action="/updateClass" method="post">
<!-- 隐藏的输入字段用于存储班级ID -->
<input type="hidden" value="${sessionScope.c.c_id}" name="c_id" id="c_id"/>
<!-- 班级编号的表单项 -->
<div class="layui-form-item">
<label for="c_classid" class="layui-form-label">
<!-- 班级编号的标签 -->
<span class="">班级编号</span>
</label>
<div class="layui-input-inline">
<!-- 班级编号的输入框 -->
<input type="text" id="c_classid" name="c_classid"
autocomplete="off" value="${sessionScope.c.c_classid}" class="layui-input">
</div>
</div>
<!-- 班级名的表单项 -->
<div class="layui-form-item">
<label for="c_classname" class="layui-form-label">
<!-- 班级名的标签 -->
<span class="">班级名</span>
</label>
<div class="layui-input-inline">
<!-- 班级名的输入框 -->
<input type="text" id="c_classname" name="c_classname"
autocomplete="off" value="${sessionScope.c.c_classname}" class="layui-input">
</div>
</div>
<!-- 辅导员姓名的表单项 -->
<div class="layui-form-item">
<label for="c_counsellor" class="layui-form-label">
<!-- 辅导员姓名的标签 -->
<span class="">辅导员姓名</span>
</label>
<div class="layui-input-inline">
<!-- 辅导员姓名的输入框 -->
<input type="text" id="c_counsellor" name="c_counsellor"
autocomplete="off" value="${sessionScope.c.c_counsellor}" class="layui-input">
</div>
</div>
<!-- 修改按钮的表单项 -->
<div class="layui-form-item" id="btn_xg">
<button class="layui-btn" id="btn_on" lay-submit="" lay-filter="updateClass">
<!-- 修改按钮 -->
<button class="layui-btn" id="btn_on" lay-submit="" lay-filter="updateClass">
修改
</button>
</div>

@ -10,24 +10,37 @@
<html>
<head>
<!-- 设置页面标题 -->
<title>后台登录</title>
<!-- 设置浏览器渲染模式 -->
<meta name="renderer" content="webkit|ie-comp|ie-stand">
<!-- 设置IE浏览器兼容性 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<!-- 设置视图窗口属性,包括宽度、缩放比例等 -->
<meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
<!-- 禁止百度转码 -->
<%--<meta http-equiv="Cache-Control" content="no-siteapp" />--%>
<!-- 引入页面的图标 -->
<link rel="icon" href="/images/favicon.ico" sizes="32x32" />
<!-- 引入字体样式文件 -->
<link rel="stylesheet" href="./css/font.css">
<!-- 引入xadmin的样式文件 -->
<link rel="stylesheet" href="./css/xadmin.css">
<!-- 引入jQuery库版本为1.3.2 -->
<script type="text/javascript" src="./js/jquery-1.3.2.min.js"></script>
<!-- 引入layui库 -->
<script src="lib/layui/layui.js"></script>
<!-- 引入xadmin的脚本文件 -->
<script type="text/javascript" src="./js/xadmin.js"></script>
<!-- 引入layui的扩展插件用于导出Excel -->
<script src="/layui_exts/excel.js"></script>
<!-- 自定义样式,设置表格内容居中 -->
<style type="text/css">
.layui-table{
text-align: center;
}
text-align: center;
}
.layui-table th{
text-align: center;
}
@ -35,60 +48,85 @@
</head>
<body>
<!-- 顶部导航 -->
<div class="x-nav">
<span class="layui-breadcrumb">
<a href="">首页</a>
<a href="/findClass">班级信息</a>
</span>
<!-- 面包屑导航 -->
<span class="layui-breadcrumb">
<a href="">首页</a>
<a href="/findClass">班级信息</a>
</span>
<!-- 刷新按钮 -->
<a class="layui-btn layui-btn-small" style="line-height:1.6em;margin-top:3px;float:right" href="/findClass" title="刷新">
<i class="layui-icon" style="line-height:30px">ဂ</i></a>
</div>
<!-- 页面主体内容区域 -->
<div class="x-body">
<!-- 搜索表单 -->
<div class="layui-row">
<form class="layui-form layui-col-md12 x-so" action="/findClass" >
<!-- 班级编号输入框 -->
<input class="layui-input" placeholder="请输入班级编号" name="c_classid" id="c_classid">
<!-- 班级名输入框 -->
<input class="layui-input" placeholder="请输入班级名" name="c_classname" id="c_classname">
<!-- 辅导员姓名输入框 -->
<input class="layui-input" placeholder="请输入辅导员姓名" name="c_counsellor" id="c_counsellor">
<!-- 隐藏的页码和页面大小输入框 -->
<input class="layui-input" type="hidden" name="pageIndex" value="1">
<input class="layui-input" type="hidden" name="pageSize" value="3">
<!-- 搜索按钮 -->
<button class="layui-btn" lay-submit="" lay-filter="search"><i class="layui-icon">&#xe615;</i></button>
</form>
</div>
<!-- 操作按钮区域 -->
<xblock>
<!-- 添加班级按钮 -->
<button id="addStudnetBtn" class="layui-btn layui-btn-normal"> <i class="layui-icon">&#xe654;</i>添加 </button>
<!-- 导出按钮 -->
<button class="layui-btn layui-btn-warm" lay-filter="toolbarDemo" lay-submit=""><i class="layui-icon">&#xe67c;</i>导出</button>
<!-- 显示数据总数 -->
<span class="x-right" style="line-height:40px">共有数据:${ci.totalCount} 条</span>
</xblock>
<%--添加模态框--%>
<%-- 添加模态框的HTML结构 --%>
<div class="layui-row" id="test" style="display: none;">
<!-- 模态框内容区域宽度为10/12 -->
<div class="layui-col-md10">
<!-- 添加班级信息的表单 -->
<form class="layui-form" id="addEmployeeForm">
<!-- 班级编号输入项 -->
<div class="layui-form-item">
<label class="layui-form-label">班级编号:</label>
<!-- 输入框块 -->
<div class="layui-input-block">
<input type="text" name="c_classid" class="layui-input" placeholder="请输入班级编号">
</div>
</div>
<!-- 班级名输入项 -->
<div class="layui-form-item">
<label class="layui-form-label">班级名:</label>
<!-- 输入框块,并设置必填校验 -->
<div class="layui-input-block">
<input type="text" lay-verify="required" name="c_classname" class="layui-input" placeholder="请输入班级名">
<input type="text" lay-verify="required" name="c_classname" class="layui-input" placeholder="请输入班级名">
</div>
</div>
<!-- 辅导员姓名输入项 -->
<div class="layui-form-item">
<label class="layui-form-label">辅导员:</label>
<!-- 输入框块 -->
<div class="layui-input-block">
<input type="text" name="c_counsellor" class="layui-input" placeholder="请输入辅导员姓名">
</div>
</div>
<!-- 提交和重置按钮 -->
<div class="layui-form-item">
<div class="layui-input-block">
<!-- 提交按钮,绑定表单提交事件 -->
<button type="button" class="layui-btn layui-btn-normal" lay-submit lay-filter="formDemo">提交</button>
<!-- 重置按钮,用于重置表单 -->
<button type="reset" class="layui-btn layui-btn-primary">重置</button>
</div>
</div>
@ -99,168 +137,254 @@
<%--表格数据--%>
<%-- 表格数据展示区域 --%>
<table class="layui-table">
<!-- 表格头部,定义列名 -->
<thead>
<th>ID</th>
<th>班级编号</th>
<th>班级名</th>
<th>辅导员</th>
<th>操作</th>
<th>ID</th>
<!-- ID列 -->
<th>班级编号</th>
<!-- 班级编号列 -->
<th>班级名</th>
<!-- 班级名列 -->
<th>辅导员</th>
<!-- 辅导员列 -->
<th>操作</th>
<!-- 操作列 -->
</thead>
<tbody>
<c:forEach items="${ci.list}" var="ci">
<tr>
<td>${ci.c_id}</td>
<td>${ci.c_classid}</td>
<td>${ci.c_classname}</td>
<td>${ci.c_counsellor}</td>
<td>
<a title="编辑" id= "updateEdit" href="/findClassById?c_id=${ci.c_id}">
<i class="layui-icon">&#xe642;</i>
</a>
<a title="删除" onclick="member_del(this,'${ci.c_id}')" href="javascript:;">
<i class="layui-icon">&#xe640;</i>
</a>
</td>
</tr>
</c:forEach>
<!-- 使用JSTL的forEach标签遍历班级信息列表 -->
<c:forEach items="${ci.list}" var="ci">
<tr>
<!-- 显示每行的数据 -->
<td>${ci.c_id}</td>
<!-- 显示ID -->
<td>${ci.c_classid}</td>
<!-- 显示班级编号 -->
<td>${ci.c_classname}</td>
<!-- 显示班级名 -->
<td>${ci.c_counsellor}</td>
<!-- 显示辅导员 -->
<td>
<!-- 编辑操作链接,点击后跳转到编辑页面 -->
<a title="编辑" id="updateEdit" href="/findClassById?c_id=${ci.c_id}">
<i class="layui-icon">&#xe642;</i>
<!-- layui的编辑图标 -->
</a>
<!-- 删除操作链接点击后执行JavaScript函数 -->
<a title="删除" onclick="member_del(this,'${ci.c_id}')" href="javascript:;">
<i class="layui-icon">&#xe640;</i>
<!-- layui的删除图标 -->
</a>
</td>
</tr>
</c:forEach>
</tbody>
</table>
<div class="" >
<input type="hidden" id="totalPageCount" value="${ci.pageTotalCount}"/>
<c:import url="pageBtn.jsp">
<c:param name="totalCount" value="${ci.totalCount}"/>
<c:param name="currentPageNo" value="${ci.pageIndex}"/>
<c:param name="totalPageCount" value="${ci.pageTotalCount}"/>
</c:import>
</div>
<script>
<div class="" >
<!-- 隐藏的输入框,存储总页数 -->
<input type="hidden" id="totalPageCount" value="${ci.pageTotalCount}"/>
<!-- 导入分页按钮的JSP文件 -->
<c:import url="pageBtn.jsp">
<!-- 传递参数给分页按钮JSP -->
<c:param name="totalCount" value="${ci.totalCount}"/>
<!-- 总记录数 -->
<c:param name="currentPageNo" value="${ci.pageIndex}"/>
<!-- 当前页码 -->
<c:param name="totalPageCount" value="${ci.pageTotalCount}"/>
<!-- 总页数 -->
</c:import>
</div>
layui.config({
base: 'layui_exts/',
}).extend({
excel: 'excel',
});
<script>
// 配置layui的扩展模块路径
layui.config({
base: 'layui_exts/',
// 设置扩展模块的基础路径
}).extend({
excel: 'excel',
// 注册excel模块
});
layui.use(['jquery', 'excel','form','layer','laydate'], function(){
var form = layui.form,
$ = layui.jquery,
laydate = layui.laydate;
var excel = parent.layui.excel;
// 使用layui模块
layui.use(['jquery', 'excel', 'form', 'layer', 'laydate'], function(){
var form = layui.form,
// 获取layui的表单模块
$ = layui.jquery,
// 获取jQuery模块
laydate = layui.laydate;
// 获取layui的日期模块
var excel = parent.layui.excel;
// 获取父页面的excel模块
// 初始化日期选择器
laydate.render({
elem: '#start'
// 指定绑定的元素
});
//执行一个laydate实例
laydate.render({
elem: '#start' //指定元素
});
// 监听表单提交事件
form.on('submit(toolbarDemo)', function(){
// 发起AJAX请求导出班级列表
$.ajax({
url: '/exportclasslist',
// 请求的URL
type: 'post',
// 请求类型
dataType: 'json',
// 预期服务器返回的数据类型
contentType: "application/json; charset=utf-8",
// 发送信息至服务器时内容编码类型
success: function (data) {
// 请求成功后的回调函数
console.log(data);
// 在控制台打印服务器返回的数据
// 1. 如果需要调整导出数据的顺序,请执行梳理函数
var dt = excel.filterExportData(data, [
'c_id',
// ID列
'c_classid',
// 班级编号列
'c_classname',
// 班级名列
'c_counsellor'
// 辅导员列
]);
// 2. 在数组头部新增表头
dt.unshift({c_id: 'ID', c_classid: '班级编号', c_classname: '班级名', c_counsellor: '辅导员'});
// 配置列宽A列40pxB列60px(默认)C列120pxD、E、F等均未定义
var colConf = excel.makeColConfig({
'C': 90,
// C列宽度
'D': 80
// D列宽度
}, 60);
// 默认列宽
var timestart = Date.now();
// 记录开始时间
// 3. 执行导出函数,系统会弹出保存文件的弹框
excel.exportExcel({
sheet1: dt
// 数据
}, '班级数据.xlsx', 'xlsx', {
// 文件名和格式
extend: {
'!cols': colConf
// 列配置
}
});
var timeend = Date.now();
// 记录结束时间
var spent = (timeend - timestart) / 1000;
// 计算耗时
layer.alert('导出耗时 '+spent+' s');
// 弹出提示框显示耗时
//setTimeout(function () {window.location.href='/findAdmin';},2000); // 2秒后跳转页面此行被注释掉了
},
form.on('submit(toolbarDemo)', function(){
$.ajax({
url: '/exportclasslist',
type: 'post',
dataType: 'json',
contentType: "application/json; charset=utf-8",
success: function (data) {
console.log(data);
// 1. 如果需要调整顺序,请执行梳理函数
var dt = excel.filterExportData(data, [
'c_id'
,'c_classid'
,'c_classname'
,'c_counsellor'
]);
// 2. 数组头部新增表头
dt.unshift({c_id: 'ID', c_classid: '班级编号', c_classname: '班级名', c_counsellor: '辅导员'});
// 意思是A列40pxB列60px(默认)C列120pxD、E、F等均未定义
var colConf = excel.makeColConfig({
'C': 90,
'D': 80
}, 60);
var timestart = Date.now();
// 3. 执行导出函数,系统会弹出弹框
excel.exportExcel({
sheet1: dt
}, '班级数据.xlsx', 'xlsx', {
extend: {
'!cols': colConf
}
});
var timeend = Date.now();
var spent = (timeend - timestart) / 1000;
layer.alert('导出耗时 '+spent+' s');
//setTimeout(function () {window.location.href='/findAdmin';},2000);
},
error: function () {
//console.log(data);
setTimeout(function () {window.location.href='/findClass';},2000);
}
error: function () {
// 请求失败后的回调函数
//console.log(data);
// 在控制台打印错误信息,此行被注释掉了
setTimeout(function () {window.location.href='/findClass';},2000); // 2秒后跳转到班级列表页面
}
});
});
});
/*添加弹出框*/
/* 添加弹出框 */
// 当点击添加学生按钮时触发事件
$("#addStudnetBtn").click(function () {
// 使用layer.open方法打开一个弹出层
layer.open({
type:1,
title:"添加班级",
skin:"myclass",
area:["50%"],
anim:2,
content:$("#test").html()
type: 1,
// 类型为页面层
title: "添加班级",
// 弹出层标题
skin: "myclass",
// 自定义皮肤样式
area: ["50%"],
// 弹出层宽高这里只设置了宽度为50%
anim: 2,
// 弹出动画效果
content: $("#test").html()
// 弹出层内容这里是获取id为test的元素的HTML内容
});
// 重置表单
$("#addEmployeeForm")[0].reset();
// 监听表单提交事件
form.on('submit(formDemo)', function(data) {
// 弹出消息提示,这里被注释掉了
// layer.msg('aaa',{icon:1,time:3000});
var param=data.field;
var param = data.field;
// 获取表单数据
// console.log(JSON.stringify(param));
// 打印表单数据,这里被注释掉了
// 发起AJAX请求添加班级
$.ajax({
url: '/addClass',
// 请求URL
type: "post",
data:JSON.stringify(param),
// 请求类型
data: JSON.stringify(param),
// 发送的数据转换为JSON字符串
contentType: "application/json; charset=utf-8",
success:function(){
layer.msg('添加成功', {icon: 1, time: 3000});
setTimeout(function () {window.location.href='/findClass';},2000);
// 发送数据的类型
success: function() {
// 请求成功回调函数
layer.msg('添加成功', {icon: 1, time: 3000});
// 弹出成功消息
setTimeout(function () {window.location.href='/findClass';},2000);
// 2秒后跳转到班级列表页面
},
error:function(){
error: function() {
// 请求失败回调函数
layer.msg('添加失败',{icon:0,time:3000});
// 弹出失败消息
setTimeout(function () {window.location.href='/findClass';},2000);
// 2秒后跳转到班级列表页面
}
});
// 阻止表单默认提交行为
// return false;
});
});
});
/*删除*/
function member_del(obj,c_id){
layer.confirm('确认要删除吗?',function(index){
//发异步删除数据
$.get("/deleteClass",{"c_id":c_id},function (data) {
if(data =true){
layer.msg('删除成功!',{icon:1,time:2000});
setTimeout(function () {window.location.href='/findClass';},2000);
}else {
layer.msg('删除失败!',{icon:1,time:2000});
setTimeout(function () {window.location.href='/findClass';},2000);
}
// 删除班级的函数
function member_del(obj, c_id) {
// 弹出确认框
layer.confirm('确认要删除吗?', function(index) {
// 发起GET请求删除班级
$.get("/deleteClass", {"c_id": c_id}, function (data) {
if(data === true) {
// 如果删除成功
layer.msg('删除成功!', {icon: 1, time: 2000});
// 弹出成功消息
setTimeout(function () {window.location.href='/findClass';},2000);
// 2秒后跳转到班级列表页面
} else {
// 如果删除失败
layer.msg('删除失败!', {icon: 1, time: 2000});
// 弹出失败消息
setTimeout(function () {window.location.href='/findClass';},2000); // 2秒后跳转到班级列表页面
}
});
// 关闭确认框
layer.close(index);
});
});
}
}
</script>
</script>
</body>

Loading…
Cancel
Save