You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
SDMS/web/WEB-INF/jsp/class_list.jsp

238 lines
11 KiB

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<%--
Created by IntelliJ IDEA.
User: hkw
Date: 2018/10/31
Time: 14:06
To change this template use File | Settings | File Templates.
--%> <!-- 注释开发信息表明这是一个由IntelliJ IDEA创建的文件 -->
<%@ page contentType="text/html;charset=UTF-8" language="java" import="com.itheima.po.Class" %> <!-- 设置页面内容类型为HTML并指定UTF-8编码同时导入Class类 -->
<%@taglib uri="http://java.sun.com/jsp/jstl/core" prefix="c"%> <!-- 引入JSTL核心标签库 -->
<html>
<head>
<title>后台登录</title> <!-- 页面标题为“后台登录” -->
<meta name="renderer" content="webkit|ie-comp|ie-stand"> <!-- 指定渲染引擎,兼容浏览器 -->
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <!-- 强制使用IE最新的渲染引擎 -->
<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" />--%> <!-- 注释防止缓存通常用于移动端App -->
<link rel="icon" href="/images/favicon.ico" sizes="32x32" /> <!-- 设置页面的favicon图标 -->
<link rel="stylesheet" href="./css/font.css"> <!-- 引入字体样式 -->
<link rel="stylesheet" href="./css/xadmin.css"> <!-- 引入后台管理系统的CSS样式 -->
<script type="text/javascript" src="./js/jquery-1.3.2.min.js"></script> <!-- 引入jQuery库 -->
<script src="lib/layui/layui.js"></script> <!-- 引入layui框架 -->
<script type="text/javascript" src="./js/xadmin.js"></script> <!-- 引入自定义的xadmin.js脚本 -->
<script src="/layui_exts/excel.js"></script> <!-- 引入Excel导出功能的脚本 -->
<style type="text/css">
.layui-table{
text-align: center; /* 表格内容居中 */
}
.layui-table th{
text-align: center; /* 表头内容居中 */
}
</style>
</head>
<body>
<div class="x-nav"> <!-- 导航栏 -->
<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"> <!-- layui的栅格布局创建一个行 -->
<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>
<%-- 添加模态框 --%>
<div class="layui-row" id="test" style="display: none;"> <!-- 隐藏的模态框 -->
<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="请输入班级名"> <!-- 输入班级名称 -->
</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>
</form>
</div>
</div>
<%-- 表格数据 --%>
<table class="layui-table">
<thead>
<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> <!-- 显示班级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> <!-- 编辑图标 -->
</a>
<a title="删除" onclick="member_del(this,'${ci.c_id}')" href="javascript:;">
<i class="layui-icon">&#xe640;</i> <!-- 删除图标 -->
</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>
layui.config({
base: 'layui_exts/',
}).extend({
excel: 'excel',
});
layui.use(['jquery', 'excel','form','layer','laydate'], function(){
var form = layui.form,
$ = layui.jquery,
laydate = layui.laydate;
var excel = parent.layui.excel;
// 执行一个laydate实例
laydate.render({
elem: '#start' //指定元素
});
form.on('submit(toolbarDemo)', function(){
$.ajax({
url: '/exportclasslist',
type: 'post',
dataType: 'json',
contentType: "application/json; charset=utf-8",
success: function (data) {
console.log(data);
var dt = excel.filterExportData(data, [
'c_id', 'c_classid', 'c_classname', 'c_counsellor'
]);
dt.unshift({c_id: 'ID', c_classid: '班级编号', c_classname: '班级名', c_counsellor: '辅导员'});
var colConf = excel.makeColConfig({
'C': 90,
'D': 80
}, 60);
var timestart = Date.now();
excel.exportExcel({
sheet1: dt
}, '班级数据.xlsx', 'xlsx', {
extend: {
'!cols': colConf
}
});
var timeend = Date.now();
var spent = (timeend - timestart) / 1000;
layer.alert('导出耗时 '+spent+' s');
},
error: function () {
setTimeout(function () {window.location.href='/findClass';},2000);
}
});
});
/* 添加弹出框 */
$("#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) {
var param=data.field;
$.ajax({
url: '/addClass',
type: "post",
data:JSON.stringify(param),
contentType: "application/json; charset=utf-8",
success:function(){
layer.msg('添加成功', {icon: 1, time: 3000});
setTimeout(function () {window.location.href='/findClass';},2000);
},
error:function(){
layer.msg('添加失败',{icon:0,time:3000});
setTimeout(function () {window.location.href='/findClass';},2000);
}
});
});
});
});
/* 删除 */
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);
}
});
});
}