好的，下面是使用 Ajax 和
layui 实现
动态表格
增删改查的一个简单示例。
1. 引入
layui
首先需要在
页面中引入
layui 的相关文件，例如：
```html
<link rel="stylesheet" href="//cdn.
layui.com/
layui-v2.5.6/css/
layui.css">
<script src="//cdn.
layui.com/
layui-v2.5.6/
layui.js"></script>
```
2. 表格的展示
接下来需要将表格展示在
页面上，可以使用
layui 的 table 组件来创建表格。为了方便后续操作，可以给每一行的 tr 标签
添加一个唯一的 id，例如：
```html
<table id="table" lay-filter="table"></table>
```
```javascript
// 渲染表格
layui.use('table', function () {
var table =
layui.table;
table.render({
elem: '#table',
url: 'list.
php',
cols: [[
{field: 'id', title: 'ID'},
{field: 'name', title: '姓名'},
{field: 'age', title: '年龄'},
{fixed: 'right', title: '操作', toolbar: '#toolbar', width: 150}
]]
});
// 监听工具条按钮点击事件
table.on('tool(table)', function (obj) {
var data = obj.data;
if (obj.event === 'edit') {
// 编辑操作
editData(data);
} else if (obj.event === 'delete') {
// 删除操作
deleteData(data);
}
});
});
// 显示编辑模态框
function editData(data) {
layui.use('layer', function () {
var layer =
layui.layer;
layer.open({
type: 1,
title: '编辑数据',
area: ['500px', '300px'],
content: $('#edit-form'),
success: function () {
// 将数据填充到编辑表单中
$('#edit-form input[name="id"]').val(data.id);
$('#edit-form input[name="name"]').val(data.name);
$('#edit-form input[name="age"]').val(data.age);
}
});
});
}
// 删除操作
function deleteData(data) {
layui.use('layer', function () {
var layer =
layui.layer;
layer.confirm('确定删除该行数据吗？', function (index) {
var url = 'delete.
php?id=' + data.id;
$.ajax({
type: 'GET',
url: url,
success: function (response) {
layer.close(index);
layui.table.reload('table');
},
error: function () {
alert('删除数据失败');
}
});
});
});
}
```
3.
添加操作
当用户点击
添加按钮时，需要显示一个模态框，让用户输入新数据。可以使用
layui 的 layer 组件来创建模态框，使用 jQuery 的 ajax() 方法来发送请求，将新数据
添加到后端数据库中。例如：
```html
<script type="text/html" id="toolbar">
<button class="
layui-btn
layui-btn-sm" lay-event="add">
添加</button>
</script>
<div id="add-form" style="display: none;">
<form class="
layui-form" lay-filter="add-form">
<div class="
layui-form-item">
<label class="
layui-form-label">姓名</label>
<div class="
layui-input-block">
<input type="text" name="name" class="
layui-input">
</div>
</div>
<div class="
layui-form-item">
<label class="
layui-form-label">年龄</label>
<div class="
layui-input-block">
<input type="text" name="age" class="
layui-input">
</div>
</div>
</form>
</div>
<script>
//
添加操作
layui.use(['layer', 'form'], function () {
var layer =
layui.layer;
var form =
layui.form;
layui.table.on('toolbar(table)', function (obj) {
if (obj.event === 'add') {
layer.open({
type: 1,
title: '
添加数据',
area: ['500px', '300px'],
content: $('#add-form'),
success: function () {
// 清空表单数据
$('#add-form input[name="name"]').val('');
$('#add-form input[name="age"]').val('');
}
});
}
});
form.on('submit(add-form)', function (data) {
$.ajax({
type: 'POST',
url: 'add.
php',
data: data.field,
success: function (response) {
layer.closeAll();
layui.table.reload('table');
},
error: function () {
alert('
添加数据失败');
}
});
return false;
});
});
</script>
```
4. 编辑操作
当用户点击编辑按钮时，需要将该行的数据加载到编辑模态框中，让用户进行修改。可以使用
layui 的 layer 组件来创建模态框，使用 jQuery 的 ajax() 方法来发送请求，更新后端数据库中的数据。例如：
```html
<div id="edit-form" style="display: none;">
<form class="
layui-form" lay-filter="edit-form">
<div class="
本文介绍如何利用layui框架动态增删商品的规格项，同时涵盖图片上传功能的实现，涉及前端交互和后端接口调用，为电商系统开发提供参考。
最低0.47元/天 解锁文章
1241
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
