layui表格,表头是(序号,工作内容,完成日期,操作(操作里面是删除功能))通过clos方式(初始的表格是没有内容的只有表头)倒数第二行的位置有一个新增按钮点击,表格增加一行
时间: 2024-05-09 07:21:58 浏览: 17
Sure, 您的第一个问题是如何实现一个带有layui表格的新增按钮和删除功能的表格?可以通过clos方式实现,以实现类似于以下的表头和行:
| 序号 | 工作内容 | 完成日期 | 操作(删除)|
| --- | --- | --- | --- |
| 1 | 完成登录页面 | 2021-01-01 | 删除 |
| 2 | 完成注册页面 | 2021-01-02 | 删除 |
| 3 | 完成订单页面 | 2021-01-03 | 删除 |
| ...| ... | ... | ... |
| 新增 | 添加新任务 | - | - |
这个表格可以通过以下步骤来实现:
1. 在HTML文件中,添加一个空的表格,只有表头。可以通过layui的table组件来实现。
```html
<table id="task-table" lay-filter="task-table">
<thead>
<tr>
<th lay-data="{field:'id', title:'序号'}">序号</th>
<th lay-data="{field:'task', title:'工作内容'}">工作内容</td>
<th lay-data="{field:'date', title:'完成日期'}">完成日期</td>
<th lay-data="{field:'operation', title:'操作', toolbar: '#operation'}">操作</td>
</tr>
</thead>
<tbody></tbody>
</table>
```
2. 在JavaScript文件中,初始化这个表格,并且添加操作列中的删除功能。
```javascript
layui.use('table', function() {
var table = layui.table;
// 初始化表格,使用ajax从服务器获取数据
table.render({
elem: '#task-table',
url: '/api/tasks',
cols: [[
{field:'id', title:'序号'},
{field:'task', title:'工作内容'},
{field:'date', title:'完成日期'},
{field:'operation', title:'操作', toolbar: '#operation'}
]]
});
// 监听操作列中的事件,例如删除
table.on('tool(task-table)', function(obj) {
if (obj.event === 'delete') {
var data = obj.data; // 获取表格中的数据
// 使用ajax向服务器发送删除请求
$.ajax({
url: '/api/delete_task',
type: 'POST',
data: {id: data.id}, // 发送删除请求时需要将数据id传递给服务器
success: function(res) {
if (res.code === 0) {
// 删除成功后,重新加载表格
table.reload('task-table');
} else {
// 删除失败,弹出提示框
layer.alert('删除失败:' + res.msg, {icon: 2});
}
},
error: function() {
layer.alert('与服务器通信失败', {icon: 2});
}
});
}
});
// 监听新增按钮的事件
$('#task-table').next('.layui-table-tool').find('.layui-btn').on('click', function() {
// 手动弹出一个表单来添加新任务
layer.open({
type: 1,
title: '添加新任务',
content: $('#add-task-form'),
btn: ['确定', '取消'],
yes: function(index, layero) {
// 在这里向服务器发送添加请求,并且关闭弹出层
$.ajax({
url: '/api/add_task',
type: 'POST',
data: {
task: $('#add-task-form input[name="task"]').val(),
date: $('#add-task-form input[name="date"]').val()
},
success: function(res) {
if (res.code === 0) {
// 添加成功后,重新加载表格
table.reload('task-table');
// 关闭弹出层
layer.close(index);
} else {
// 添加失败,弹出提示框
layer.alert('添加失败:' + res.msg, {icon: 2});
}
},
error: function() {
layer.alert('与服务器通信失败', {icon: 2});
}
});
}
});
});
});
```
在添加新任务的表单中,包含了两个输入框,一个用于输入任务内容,一个用于输入完成日期。用户输入完毕并且点击确认按钮后,允许JavaScript代码向服务器发送POST请求,添加新任务并且返回一个状态码。如果状态码为0,表示添加成功,此时JavaScript代码重新加载表格,从服务器获取最新的数据。如果状态码不为0,则表示添加失败,弹出一个错误提示框。
```html
<div id="add-task-form" style="display:none;">
<div class="layui-form-item">
<label class="layui-form-label">任务内容</label>
<div class="layui-input-block">
<input type="text" name="task" placeholder="请输入任务内容" autocomplete="off" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">完成日期</label>
<div class="layui-input-block">
<input type="date" name="date" placeholder="请选择完成日期" class="layui-input">
</div>
</div>
</div>
```
好了,这就是一个简单的带有新增按钮和删除功能的layui表格了,如果您还有其他问题,欢迎随时提出。
相关推荐
![doc](https://img-home.csdnimg.cn/images/20210720083327.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)