通过var 定义一个data数组,数组创建两条数据,通过clos方式将数据熏染到layui表格里面,表格有一个新增功能(点击新增,弹出弹出层)
时间: 2024-05-23 08:09:14 浏览: 72
好的,问题已经记录下来了,让我来回答你的问题:
可以通过以下代码来定义一个data数组并创建两条数据:
var data = [{
id: 1,
name: 'John',
age: 30
}, {
id: 2,
name: 'Jane',
age: 25
}];
接下来,使用以下代码将数据渲染到layui表格中:
table.render({
elem: '#demo', // 表格的id
data: data,
cols: [[ // 表头
{field: 'id', title: 'ID', width: 80},
{field: 'name', title: '姓名', width: 120},
{field: 'age', title: '年龄', width: 80}
]]
});
至于新增功能的实现,可以通过以下代码实现:
// 点击新增按钮
$('.add').click(function () {
layer.open({
type: 1, // 弹出层类型
title: '新增数据',
content: $('#add-dialog'), // 弹出层选择器
area: ['500px', '300px'], // 弹出层尺寸
btn: ['保存', '取消'],
yes: function (index, layero) { // 点击保存按钮触发的函数
// 获取输入的数据,保存到表格中
var newRow = {
id: $('#add-id').val(),
name: $('#add-name').val(),
age: $('#add-age').val()
};
data.push(newRow);
table.reload('demo', {data: data}); // 重新渲染表格
layer.close(index); // 关闭弹出层
},
btn2: function (index, layero) { // 点击取消按钮触发的函数
layer.close(index); // 关闭弹出层
}
});
});
希望这些代码能够帮到你,如果还有问题,请继续问我。
阅读全文