wsy182
/
SmartRollCall
Archived
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

更新 attendance-teacher.html

master
wangsiyuan 2023-12-26 19:01:06 +08:00
parent 072a9d3359
commit 8aff863916
1 changed files with 92 additions and 11 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

103
app/templates/attendance-teacher.html
View File

@ -6,7 +6,7 @@
<meta name="renderer" content="webkit"/>
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"/>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<link href="static/css/layui.css" rel="stylesheet">
<link href="/static/css/layui.css" rel="stylesheet">
</head>
<body>
@ -14,14 +14,14 @@
<div class="layui-header">
<div class="layui-logo layui-hide-xs layui-bg-black">网上上课点名系统</div>
<!-- 头部区域（可配合layui 已有的水平导航） -->
<ul class="layui-nav layui-layout-left">
<!-- 移动端显示 -->
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
<i class="layui-icon layui-icon-spread-left"></i>
</li>
<li class="layui-nav-item layui-hide-xs"><a href="/attendance-teacher/attendance">签到</a></li>
<li class="layui-nav-item layui-hide-xs"><a href="/attendance-teacher/import-class">导入班级</a></li>
</ul>
<ul class="layui-nav layui-layout-left">
<!-- 移动端显示 -->
<li class="layui-nav-item layui-show-xs-inline-block layui-hide-sm" lay-header-event="menuLeft">
<i class="layui-icon layui-icon-spread-left"></i>
</li>
<li class="layui-nav-item layui-hide-xs"><a href="/attendance-teacher/attendance">签到</a></li>
<li class="layui-nav-item layui-hide-xs"><a href="/attendance-teacher/import-class">导入班级</a></li>
</ul>
<ul class="layui-nav layui-layout-right">
<li class="layui-nav-item layui-hide layui-show-sm-inline-block">
<a href="javascript:;">
@ -50,10 +50,29 @@
</ul>
</div>
</div>
<div class="layui-body">
<table id="attendanceTable" class="layui-table">
<!-- 表头 -->
<thead>
<tr>
<th>课程名称</th>
<th>课程代码</th>
<th>学分</th>
<th>班级名称</th>
<th>专业</th>
<th>签到</th>
</tr>
</thead>
<tbody>
<!-- 表格数据将在这里填充 -->
</tbody>
</table>
<div id="pagination"></div>
</div>
</div>
<script src="static/jquery.min.js"></script> <!-- 确保已经引入jQuery -->
<script src="static/layui.js"></script>
<script src="/static/jquery.min.js"></script> <!-- 确保已经引入jQuery -->
<script src="/static/layui.js"></script>
<script>
// 请求后端获取菜单数据
$.get('/api/menu', function (menuItems) {
@ -67,8 +86,70 @@
layui.element.render('nav', 'test');
});
layui.use(['laypage', 'element', 'jquery', 'dropdown'], function () {
var laypage = layui.laypage;
var $ = layui.jquery;
function renderTable(page) {
// 发送GET请求到服务器端点
$.get('/api/get-teacher-attendance-table?page=' + page, function (response) {
var $tbody = $('#attendanceTable tbody');
$tbody.empty(); // 清空表格内容
// 遍历返回的数据数组
response.data.forEach(function (item) {
// 创建新的行并填充数据
var $row = $('<tr></tr>');
$row.append(`<td>${item.course_name}</td>`);
$row.append(`<td>${item.course_code}</td>`);
$row.append(`<td>${item.credits}</td>`);
$row.append(`<td>${item.class_name}</td>`);
$row.append(`<td>${item.major}</td>`);
$row.append(`
<td>
<div class="layui-btn-group">
<button class="layui-btn layui-btn-normal layui-btn-sm dropdown-toggle" type="button">
签到 <span class="layui-icon layui-icon-down"></span>
</button>
<dl class="dropdown-menu" style="display:none;">
<dd><a href="javascript:void(0);" onclick="markAttendance(this, 'present')">出勤</a></dd>
<dd><a href="javascript:void(0);" onclick="markAttendance(this, 'absent')">缺席</a></dd>
<dd><a href="javascript:void(0);" onclick="markAttendance(this, 'late')">迟到</a></dd>
<dd><a href="javascript:void(0);" onclick="markAttendance(this, 'excused')">请假</a></dd>
</dl>
</div>
</td>
`);
$tbody.append($row);
});
// 渲染分页控件
laypage.render({
elem: 'pagination', // 分页容器的id
count: response.count, // 总条数
limit: 10, // 每页显示条数
curr: page, // 当前页
jump: function (obj, first) {
if (!first) { // 首次不执行
renderTable(obj.curr); // 根据页码加载数据
}
}
});
});
}
// 初始加载第一页
renderTable(1);
});
layui.use(['jquery'], function () {
var laypage = layui.laypage;
// 普通用法
laypage.render({
elem: 'attendance_teacher_page',
count: 100 // 数据总数
});
var $ = layui.jquery; // 获取Layui的jQuery对象
$('#logoutLink').on('click', function () {