451 lines
18 KiB
HTML
451 lines
18 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="zh-CN">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>学生管理 - XX学校成绩管理系统</title>
|
|
<link rel="stylesheet" href="../css/style.css">
|
|
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
|
|
|
|
</head>
|
|
<body>
|
|
<!-- 导航栏 -->
|
|
<nav class="navbar">
|
|
<div class="container">
|
|
<div class="navbar-brand">
|
|
<a href="index.html">
|
|
<i class="fas fa-graduation-cap"></i>
|
|
<span>XX学校成绩管理系统</span>
|
|
</a>
|
|
</div>
|
|
<div class="navbar-menu">
|
|
<a href="index.html" class="navbar-item">
|
|
<i class="fas fa-home"></i>
|
|
<span>主页</span>
|
|
</a>
|
|
<a href="admin_dashboard.html" class="navbar-item">
|
|
<i class="fas fa-tachometer-alt"></i>
|
|
<span>控制面板</span>
|
|
</a>
|
|
<a href="student_management.html" class="navbar-item active">
|
|
<i class="fas fa-users"></i>
|
|
<span>学生管理</span>
|
|
</a>
|
|
<a href="grade_management.html" class="navbar-item">
|
|
<i class="fas fa-chart-bar"></i>
|
|
<span>成绩管理</span>
|
|
</a>
|
|
<a href="user_management.html" class="navbar-item">
|
|
<i class="fas fa-user-cog"></i>
|
|
<span>用户管理</span>
|
|
</a>
|
|
<div class="navbar-user">
|
|
<i class="fas fa-user-circle"></i>
|
|
<span>管理员</span>
|
|
<div class="user-dropdown">
|
|
<a href="#"><i class="fas fa-user"></i> 个人资料</a>
|
|
<a href="#"><i class="fas fa-cog"></i> 设置</a>
|
|
<a href="login.html"><i class="fas fa-sign-out-alt"></i> 退出登录</a>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</nav>
|
|
|
|
<!-- 主要内容区 -->
|
|
<main class="main-content">
|
|
<div class="container">
|
|
<div class="student-management">
|
|
<!-- 页面标题 -->
|
|
<div class="page-header">
|
|
<h1><i class="fas fa-users"></i> 学生管理</h1>
|
|
<p>管理学生基本信息，支持添加、编辑、删除和查询学生信息</p>
|
|
</div>
|
|
|
|
<!-- 筛选区域 -->
|
|
<div class="filter-section">
|
|
<div class="filter-row">
|
|
<div class="filter-group">
|
|
<label for="student-id"><i class="fas fa-id-card"></i> 学号</label>
|
|
<input type="text" id="student-id" placeholder="请输入学号">
|
|
</div>
|
|
<div class="filter-group">
|
|
<label for="student-name"><i class="fas fa-user"></i> 姓名</label>
|
|
<input type="text" id="student-name" placeholder="请输入姓名">
|
|
</div>
|
|
<div class="filter-group">
|
|
<label for="class-select"><i class="fas fa-school"></i> 班级</label>
|
|
<select id="class-select">
|
|
<option value="">全部班级</option>
|
|
<option value="计算机科学与技术1班">计算机科学与技术1班</option>
|
|
<option value="计算机科学与技术2班">计算机科学与技术2班</option>
|
|
<option value="软件工程1班">软件工程1班</option>
|
|
<option value="软件工程2班">软件工程2班</option>
|
|
<option value="网络工程1班">网络工程1班</option>
|
|
<option value="网络工程2班">网络工程2班</option>
|
|
</select>
|
|
</div>
|
|
<div class="filter-group">
|
|
<label for="gender-select"><i class="fas fa-venus-mars"></i> 性别</label>
|
|
<select id="gender-select">
|
|
<option value="">全部性别</option>
|
|
<option value="男">男</option>
|
|
<option value="女">女</option>
|
|
</select>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="action-buttons">
|
|
<button id="add-btn" class="btn-add">
|
|
<i class="fas fa-plus"></i>
|
|
添加学生
|
|
</button>
|
|
<button id="search-btn" class="btn-search">
|
|
<i class="fas fa-search"></i>
|
|
查询学生
|
|
</button>
|
|
<button id="reset-btn" class="btn-reset">
|
|
<i class="fas fa-redo"></i>
|
|
重置条件
|
|
</button>
|
|
<button id="export-btn" class="btn-export">
|
|
<i class="fas fa-file-export"></i>
|
|
导出数据
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- 学生表格 -->
|
|
<div class="table-responsive">
|
|
<table class="student-table">
|
|
<thead>
|
|
<tr>
|
|
<th>学号</th>
|
|
<th>姓名</th>
|
|
<th>性别</th>
|
|
<th>班级</th>
|
|
<th>联系电话</th>
|
|
<th>邮箱</th>
|
|
<th>入学时间</th>
|
|
<th>操作</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="student-table-body">
|
|
<!-- 数据将通过JavaScript动态加载 -->
|
|
<tr>
|
|
<td colspan="8" class="loading">
|
|
<i class="fas fa-spinner fa-spin"></i>
|
|
<p>正在加载学生数据...</p>
|
|
</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
|
|
<!-- 分页控件 -->
|
|
<div class="pagination" id="pagination">
|
|
<button id="prev-btn" disabled>
|
|
<i class="fas fa-chevron-left"></i>
|
|
上一页
|
|
</button>
|
|
<button class="active">1</button>
|
|
<button>2</button>
|
|
<button>3</button>
|
|
<button id="next-btn">
|
|
下一页
|
|
<i class="fas fa-chevron-right"></i>
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<!-- 页脚 -->
|
|
<footer class="footer">
|
|
<div class="container">
|
|
<p>© 2023 XX学校成绩管理系统. 版权所有.</p>
|
|
<p>技术支持: 计算机科学与技术学院</p>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
// 模拟学生数据
|
|
const mockStudents = [
|
|
{
|
|
id: '20230001',
|
|
name: '张三',
|
|
gender: '男',
|
|
class: '计算机科学与技术1班',
|
|
phone: '13800138001',
|
|
email: 'zhangsan@example.com',
|
|
enrollmentDate: '2023-09-01'
|
|
},
|
|
{
|
|
id: '20230002',
|
|
name: '李四',
|
|
gender: '女',
|
|
class: '计算机科学与技术1班',
|
|
phone: '13800138002',
|
|
email: 'lisi@example.com',
|
|
enrollmentDate: '2023-09-01'
|
|
},
|
|
{
|
|
id: '20230003',
|
|
name: '王五',
|
|
gender: '男',
|
|
class: '计算机科学与技术2班',
|
|
phone: '13800138003',
|
|
email: 'wangwu@example.com',
|
|
enrollmentDate: '2023-09-01'
|
|
},
|
|
{
|
|
id: '20230004',
|
|
name: '赵六',
|
|
gender: '女',
|
|
class: '软件工程1班',
|
|
phone: '13800138004',
|
|
email: 'zhaoliu@example.com',
|
|
enrollmentDate: '2023-09-01'
|
|
},
|
|
{
|
|
id: '20230005',
|
|
name: '钱七',
|
|
gender: '男',
|
|
class: '软件工程2班',
|
|
phone: '13800138005',
|
|
email: 'qianqi@example.com',
|
|
enrollmentDate: '2023-09-01'
|
|
},
|
|
{
|
|
id: '20230006',
|
|
name: '孙八',
|
|
gender: '男',
|
|
class: '网络工程1班',
|
|
phone: '13800138006',
|
|
email: 'sunba@example.com',
|
|
enrollmentDate: '2023-09-01'
|
|
},
|
|
{
|
|
id: '20230007',
|
|
name: '周九',
|
|
gender: '女',
|
|
class: '网络工程2班',
|
|
phone: '13800138007',
|
|
email: 'zhoujiu@example.com',
|
|
enrollmentDate: '2023-09-01'
|
|
},
|
|
{
|
|
id: '20230008',
|
|
name: '吴十',
|
|
gender: '男',
|
|
class: '计算机科学与技术1班',
|
|
phone: '13800138008',
|
|
email: 'wushi@example.com',
|
|
enrollmentDate: '2023-09-01'
|
|
}
|
|
];
|
|
|
|
// 当前页数据
|
|
let currentPage = 1;
|
|
const pageSize = 5;
|
|
let filteredStudents = [...mockStudents];
|
|
|
|
// DOM元素
|
|
const studentTableBody = document.getElementById('student-table-body');
|
|
const pagination = document.getElementById('pagination');
|
|
const prevBtn = document.getElementById('prev-btn');
|
|
const nextBtn = document.getElementById('next-btn');
|
|
const searchBtn = document.getElementById('search-btn');
|
|
const resetBtn = document.getElementById('reset-btn');
|
|
const addBtn = document.getElementById('add-btn');
|
|
const exportBtn = document.getElementById('export-btn');
|
|
|
|
// 渲染学生表格
|
|
function renderStudentTable() {
|
|
const startIndex = (currentPage - 1) * pageSize;
|
|
const endIndex = startIndex + pageSize;
|
|
const pageStudents = filteredStudents.slice(startIndex, endIndex);
|
|
|
|
if (pageStudents.length === 0) {
|
|
studentTableBody.innerHTML = `
|
|
<tr>
|
|
<td colspan="8" class="no-results">
|
|
<i class="fas fa-user-slash"></i>
|
|
<h3>没有找到学生信息</h3>
|
|
<p>请尝试调整筛选条件或添加新学生</p>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
return;
|
|
}
|
|
|
|
let tableHTML = '';
|
|
pageStudents.forEach(student => {
|
|
tableHTML += `
|
|
<tr>
|
|
<td>${student.id}</td>
|
|
<td>${student.name}</td>
|
|
<td>${student.gender}</td>
|
|
<td>${student.class}</td>
|
|
<td>${student.phone}</td>
|
|
<td>${student.email}</td>
|
|
<td>${student.enrollmentDate}</td>
|
|
<td>
|
|
<div class="action-buttons-cell">
|
|
<button class="btn-edit" onclick="editStudent('${student.id}')">
|
|
<i class="fas fa-edit"></i>
|
|
编辑
|
|
</button>
|
|
<button class="btn-delete" onclick="deleteStudent('${student.id}')">
|
|
<i class="fas fa-trash"></i>
|
|
删除
|
|
</button>
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
});
|
|
|
|
studentTableBody.innerHTML = tableHTML;
|
|
}
|
|
|
|
// 更新分页控件
|
|
function updatePagination() {
|
|
const totalPages = Math.ceil(filteredStudents.length / pageSize);
|
|
const paginationButtons = pagination.querySelectorAll('button:not(#prev-btn):not(#next-btn)');
|
|
|
|
// 更新页码按钮
|
|
paginationButtons.forEach((btn, index) => {
|
|
if (index < totalPages) {
|
|
btn.textContent = index + 1;
|
|
btn.style.display = 'inline-block';
|
|
btn.classList.toggle('active', index + 1 === currentPage);
|
|
} else {
|
|
btn.style.display = 'none';
|
|
}
|
|
});
|
|
|
|
// 更新上一页/下一页按钮状态
|
|
prevBtn.disabled = currentPage === 1;
|
|
nextBtn.disabled = currentPage === totalPages || totalPages === 0;
|
|
}
|
|
|
|
// 筛选学生
|
|
function filterStudents() {
|
|
const studentId = document.getElementById('student-id').value.trim();
|
|
const studentName = document.getElementById('student-name').value.trim();
|
|
const selectedClass = document.getElementById('class-select').value;
|
|
const selectedGender = document.getElementById('gender-select').value;
|
|
|
|
filteredStudents = mockStudents.filter(student => {
|
|
const matchesId = !studentId || student.id.includes(studentId);
|
|
const matchesName = !studentName || student.name.includes(studentName);
|
|
const matchesClass = !selectedClass || student.class === selectedClass;
|
|
const matchesGender = !selectedGender || student.gender === selectedGender;
|
|
|
|
return matchesId && matchesName && matchesClass && matchesGender;
|
|
});
|
|
|
|
currentPage = 1;
|
|
renderStudentTable();
|
|
updatePagination();
|
|
}
|
|
|
|
// 重置筛选条件
|
|
function resetFilters() {
|
|
document.getElementById('student-id').value = '';
|
|
document.getElementById('student-name').value = '';
|
|
document.getElementById('class-select').value = '';
|
|
document.getElementById('gender-select').value = '';
|
|
|
|
filteredStudents = [...mockStudents];
|
|
currentPage = 1;
|
|
renderStudentTable();
|
|
updatePagination();
|
|
}
|
|
|
|
// 添加学生
|
|
function addStudent() {
|
|
alert('添加学生功能将在后端API完成后实现');
|
|
// 这里可以打开一个模态框来添加学生信息
|
|
}
|
|
|
|
// 编辑学生
|
|
function editStudent(studentId) {
|
|
alert(`编辑学生 ${studentId} 功能将在后端API完成后实现`);
|
|
// 这里可以打开一个模态框来编辑学生信息
|
|
}
|
|
|
|
// 删除学生
|
|
function deleteStudent(studentId) {
|
|
if (confirm(`确定要删除学号为 ${studentId} 的学生吗？`)) {
|
|
alert(`删除学生 ${studentId} 功能将在后端API完成后实现`);
|
|
// 这里可以调用API删除学生
|
|
}
|
|
}
|
|
|
|
// 导出数据
|
|
function exportData() {
|
|
alert('导出数据功能将在后端API完成后实现');
|
|
// 这里可以调用API导出Excel或CSV文件
|
|
}
|
|
|
|
// 页面切换
|
|
function goToPage(page) {
|
|
currentPage = page;
|
|
renderStudentTable();
|
|
updatePagination();
|
|
}
|
|
|
|
// 初始化事件监听
|
|
function initEventListeners() {
|
|
searchBtn.addEventListener('click', filterStudents);
|
|
resetBtn.addEventListener('click', resetFilters);
|
|
addBtn.addEventListener('click', addStudent);
|
|
exportBtn.addEventListener('click', exportData);
|
|
|
|
prevBtn.addEventListener('click', () => {
|
|
if (currentPage > 1) {
|
|
goToPage(currentPage - 1);
|
|
}
|
|
});
|
|
|
|
nextBtn.addEventListener('click', () => {
|
|
const totalPages = Math.ceil(filteredStudents.length / pageSize);
|
|
if (currentPage < totalPages) {
|
|
goToPage(currentPage + 1);
|
|
}
|
|
});
|
|
|
|
// 页码按钮点击事件
|
|
pagination.addEventListener('click', (e) => {
|
|
if (e.target.tagName === 'BUTTON' &&
|
|
!e.target.id &&
|
|
!e.target.classList.contains('active')) {
|
|
const page = parseInt(e.target.textContent);
|
|
goToPage(page);
|
|
}
|
|
});
|
|
|
|
// 输入框回车搜索
|
|
document.getElementById('student-id').addEventListener('keypress', (e) => {
|
|
if (e.key === 'Enter') filterStudents();
|
|
});
|
|
|
|
document.getElementById('student-name').addEventListener('keypress', (e) => {
|
|
if (e.key === 'Enter') filterStudents();
|
|
});
|
|
}
|
|
|
|
// 页面加载完成后初始化
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
// 模拟API延迟加载
|
|
setTimeout(() => {
|
|
renderStudentTable();
|
|
updatePagination();
|
|
initEventListeners();
|
|
}, 500);
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |