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

@ -10,10 +10,13 @@
<html> <html>
<head> <head>
<title>修改信息</title> <title>修改信息</title>
<!-- 设置网页图标 -->
<link rel="icon" href="/images/favicon.ico" sizes="32x32" /> <link rel="icon" href="/images/favicon.ico" sizes="32x32" />
<!-- 引入CSS样式文件 -->
<link rel="stylesheet" href="/css/font.css"> <link rel="stylesheet" href="/css/font.css">
<link rel="stylesheet" href="/css/xadmin.css"> <link rel="stylesheet" href="/css/xadmin.css">
<link rel="stylesheet" href="/css/pg_btn.css"> <link rel="stylesheet" href="/css/pg_btn.css">
<!-- 引入JavaScript脚本文件 -->
<script type="text/javascript" src="./js/jquery-1.3.2.min.js"></script> <script type="text/javascript" src="./js/jquery-1.3.2.min.js"></script>
<script src="lib/layui/layui.js"></script> <script src="lib/layui/layui.js"></script>
<script type="text/javascript" src="./js/xadmin.js"></script> <script type="text/javascript" src="./js/xadmin.js"></script>
@ -22,9 +25,12 @@
<body> <body>
<div class="x-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"/> <input type="hidden" value="${sessionScope.a.a_id}" name="a_id" id="a_id" class="layui-input"/>
<!-- 用户名输入框 -->
<div class="layui-form-item"> <div class="layui-form-item">
<label for="a_username" class="layui-form-label"> <label for="a_username" class="layui-form-label">
<span class="">用户名</span> <span class="">用户名</span>
@ -35,6 +41,7 @@
</div> </div>
</div> </div>
<!-- 密码输入框 -->
<div class="layui-form-item"> <div class="layui-form-item">
<label for="a_password" class="layui-form-label"> <label for="a_password" class="layui-form-label">
<span class="">密码</span> <span class="">密码</span>
@ -45,6 +52,7 @@
</div> </div>
</div> </div>
<!-- 姓名输入框 -->
<div class="layui-form-item"> <div class="layui-form-item">
<label for="a_name" class="layui-form-label"> <label for="a_name" class="layui-form-label">
<span class="">姓名</span> <span class="">姓名</span>
@ -55,6 +63,7 @@
</div> </div>
</div> </div>
<!-- 电话输入框 -->
<div class="layui-form-item"> <div class="layui-form-item">
<label for="a_phone" class="layui-form-label"> <label for="a_phone" class="layui-form-label">
<span class="">电话</span> <span class="">电话</span>
@ -65,6 +74,7 @@
</div> </div>
</div> </div>
<!-- 级别输入框 -->
<div class="layui-form-item"> <div class="layui-form-item">
<label for="a_power" class="layui-form-label"> <label for="a_power" class="layui-form-label">
<span class="">级别</span> <span class="">级别</span>
@ -75,6 +85,7 @@
</div> </div>
</div> </div>
<!-- 级别描述输入框 -->
<div class="layui-form-item"> <div class="layui-form-item">
<label for="a_describe" class="layui-form-label"> <label for="a_describe" class="layui-form-label">
<span class="">级别描述</span> <span class="">级别描述</span>
@ -85,7 +96,7 @@
</div> </div>
</div> </div>
<!-- 提交按钮 -->
<div class="layui-form-item" id="btn_xg"> <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">
修改 修改
@ -93,6 +104,9 @@
</div> </div>
</form> </form>
</div> </div>
</body>
</html>
<script> <script>
// layui.use(['form','layer','laydate'], function(){ // layui.use(['form','layer','laydate'], function(){

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

@ -9,53 +9,75 @@
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%>
<html> <html>
<head> <head>
<!-- 设置页面标题 -->
<title>修改信息</title> <title>修改信息</title>
<!-- 引入页面的图标 -->
<link rel="icon" href="/images/favicon.ico" sizes="32x32" /> <link rel="icon" href="/images/favicon.ico" sizes="32x32" />
<!-- 引入字体样式文件 -->
<link rel="stylesheet" href="/css/font.css"> <link rel="stylesheet" href="/css/font.css">
<!-- 引入xadmin的样式文件 -->
<link rel="stylesheet" href="/css/xadmin.css"> <link rel="stylesheet" href="/css/xadmin.css">
<!-- 引入自定义按钮样式文件 -->
<link rel="stylesheet" href="/css/pg_btn.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> <script type="text/javascript" src="./js/jquery-1.3.2.min.js"></script>
<!-- 引入layui库 -->
<script src="lib/layui/layui.js"></script> <script src="lib/layui/layui.js"></script>
<!-- 引入xadmin的脚本文件 -->
<script type="text/javascript" src="./js/xadmin.js"></script> <script type="text/javascript" src="./js/xadmin.js"></script>
</head> </head>
<body> <body>
<!-- 页面的主体内容区域 -->
<div class="x-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"/> <input type="hidden" value="${sessionScope.c.c_id}" name="c_id" id="c_id"/>
<!-- 班级编号的表单项 -->
<div class="layui-form-item"> <div class="layui-form-item">
<label for="c_classid" class="layui-form-label"> <label for="c_classid" class="layui-form-label">
<!-- 班级编号的标签 -->
<span class="">班级编号</span> <span class="">班级编号</span>
</label> </label>
<div class="layui-input-inline"> <div class="layui-input-inline">
<!-- 班级编号的输入框 -->
<input type="text" id="c_classid" name="c_classid" <input type="text" id="c_classid" name="c_classid"
autocomplete="off" value="${sessionScope.c.c_classid}" class="layui-input"> autocomplete="off" value="${sessionScope.c.c_classid}" class="layui-input">
</div> </div>
</div> </div>
<!-- 班级名的表单项 -->
<div class="layui-form-item"> <div class="layui-form-item">
<label for="c_classname" class="layui-form-label"> <label for="c_classname" class="layui-form-label">
<!-- 班级名的标签 -->
<span class="">班级名</span> <span class="">班级名</span>
</label> </label>
<div class="layui-input-inline"> <div class="layui-input-inline">
<!-- 班级名的输入框 -->
<input type="text" id="c_classname" name="c_classname" <input type="text" id="c_classname" name="c_classname"
autocomplete="off" value="${sessionScope.c.c_classname}" class="layui-input"> autocomplete="off" value="${sessionScope.c.c_classname}" class="layui-input">
</div> </div>
</div> </div>
<!-- 辅导员姓名的表单项 -->
<div class="layui-form-item"> <div class="layui-form-item">
<label for="c_counsellor" class="layui-form-label"> <label for="c_counsellor" class="layui-form-label">
<!-- 辅导员姓名的标签 -->
<span class="">辅导员姓名</span> <span class="">辅导员姓名</span>
</label> </label>
<div class="layui-input-inline"> <div class="layui-input-inline">
<!-- 辅导员姓名的输入框 -->
<input type="text" id="c_counsellor" name="c_counsellor" <input type="text" id="c_counsellor" name="c_counsellor"
autocomplete="off" value="${sessionScope.c.c_counsellor}" class="layui-input"> autocomplete="off" value="${sessionScope.c.c_counsellor}" class="layui-input">
</div> </div>
</div> </div>
<!-- 修改按钮的表单项 -->
<div class="layui-form-item" id="btn_xg"> <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> </button>

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

Loading…
Cancel
Save