layui实现可编辑可视化课表
时间: 2023-08-13 21:06:24 浏览: 263
layui表格动态添加|layui表格可编辑
5星 · 资源好评率100%
要实现可编辑可视化课表,可以使用Layui框架中的table组件和form组件。
首先,需要在HTML中添加一个table元素,用于展示课程表。然后使用Layui的form组件创建表单,用于编辑课程信息。在表格中,可以使用Layui的table组件中的edit功能,使表格变为可编辑状态。当用户编辑完课程信息后,可以通过Ajax将数据提交到后台进行保存。
以下是一个简单的示例代码:
```html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>可编辑课表</title>
<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.5.6/css/layui.min.css">
</head>
<body>
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md12">
<table class="layui-table" lay-skin="line" lay-filter="course-table">
<thead>
<tr>
<th lay-data="{field:'week', width:80}">周次</th>
<th lay-data="{field:'monday', width:100}">星期一</th>
<th lay-data="{field:'tuesday', width:100}">星期二</th>
<th lay-data="{field:'wednesday', width:100}">星期三</th>
<th lay-data="{field:'thursday', width:100}">星期四</th>
<th lay-data="{field:'friday', width:100}">星期五</th>
<th lay-data="{field:'saturday', width:100}">星期六</th>
<th lay-data="{field:'sunday', width:100}">星期日</th>
</tr>
</thead>
<tbody>
<tr>
<td>第1-2周</td>
<td lay-event="edit">高数</td>
<td></td>
<td></td>
<td lay-event="edit">英语</td>
<td></td>
<td></td>
<td></td>
</tr>
<tr>
<td>第3-4周</td>
<td lay-event="edit">物理</td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
<td></td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<script src="https://cdn.staticfile.org/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdn.staticfile.org/layui/2.5.6/layui.min.js"></script>
<script>
layui.use(['form', 'table'], function() {
var form = layui.form;
var table = layui.table;
// 监听表格编辑事件
table.on('edit(course-table)', function(obj) {
console.log(obj.value); // 当前编辑的值
console.log(obj.field); // 当前编辑的字段名
console.log(obj.data); // 当前行的数据
// TODO: 将编辑后的数据保存到后台
});
});
</script>
</body>
</html>
```
在上述代码中,通过使用Layui的table组件中的edit功能,使表格变为可编辑状态。当用户编辑完课程信息后,可以通过Ajax将数据提交到后台进行保存。同时,通过使用Layui的form组件创建表单,用于编辑课程信息。
阅读全文