在
Layui 的
表格中，可以通过以下步骤来新增空行：
1. 首先，在
表格的操作栏
中添加一个“新增”按钮。
```html
<button class="
layui-btn
layui-btn-sm" lay-event="add">新增</button>
```
2. 在 JavaScript
中监听“新增”按钮的点击事件，弹出一个表单。
```javascript
table.on('toolbar(test)', function(obj) {
if (obj.event === 'add') {
layer.open({
type: 1,
title: '新增
数据',
content: $('#form-add'),
area: ['500px', '300px'],
btn: ['保存', '取消'],
yes: function(index, layero) {
// 在这里处理保存逻辑
layer.close(index);
},
btn2: function(index, layero) {
// 在这里处理取消逻辑
layer.close(index);
}
});
}
});
```
3. 在表单
中添加需要填写的字段。这里以一个简单的例子为例，只需要填写一个“姓名”字段。
```html
<form id="form-add" class="
layui-form">
<div class="
layui-form-item">
<label class="
layui-form-label">姓名</label>
<div class="
layui-input-block">
<input type="text" name="name" lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="
layui-input">
</div>
</div>
</form>
```
4. 在保存逻辑
中，
获取表单
中填写的
数据，并向
表格中插入一行空
数据。
```javascript
table.on('toolbar(test)', function(obj) {
if (obj.event === 'add') {
layer.open({
type: 1,
title: '新增
数据',
content: $('#form-add'),
area: ['500px', '300px'],
btn: ['保存', '取消'],
yes: function(index, layero) {
//
获取表单
中填写的
数据
var name = $('input[name="name"]').val();
// 在
表格中插入一行空
数据
table.insert({
name: name
});
layer.close(index);
},
btn2: function(index, layero) {
layer.close(index);
}
});
}
});
```
这样就可以在
Layui 的
表格中新增一行空
数据了。
扫一扫
450
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
