通过var 定义一个data数组,数组创建两条数据,通过clos方式将数据熏染到layui表格里面,表格有一个新增功能(点击新增,弹出弹出层)
时间: 2024-06-10 10:05:10 浏览: 161
好的,你想了解通过var定义一个data数组并将数据渲染到layui表格中的过程,对吧。可以的,下面是一个示例代码:
```
// 定义一个data数组,包含两条数据
var data = [
{id: 1, name: '张三', age: 20},
{id: 2, name: '李四', age: 25}
];
// 渲染表格
layui.use('table', function(){
var table = layui.table;
// 渲染表格
table.render({
elem: '#demo', // 指定表格容器的选择器
data: data, // 表格数据
cols: [[ // 表头
{field: 'id', title: 'ID'},
{field: 'name', title: '姓名'},
{field: 'age', title: '年龄'}
]]
});
// 监听新增按钮点击事件
$('#addBtn').on('click', function(){
// 弹出层
layer.open({
type: 1,
title: '新增数据',
content: '<form class="layui-form"><div class="layui-form-item"><label class="layui-form-label">ID</label><div class="layui-input-block"><input type="text" name="id" lay-verify="required|number" autocomplete="off" placeholder="请输入ID" 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="name" lay-verify="required" autocomplete="off" placeholder="请输入姓名" 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" lay-verify="required|number" autocomplete="off" placeholder="请输入年龄" class="layui-input"></div></div></form>',
Yes: function(index, layero){
// 点击确定按钮时的回调函数
var id = layero.find('input[name="id"]').val();
var name = layero.find('input[name="name"]').val();
var age = layero.find('input[name="age"]').val();
// 将新增数据添加到数组中
data.push({id: id, name: name, age: age});
// 重新渲染表格
table.render({
elem: '#demo',
data: data,
cols: [[
{field: 'id', title: 'ID'},
{field: 'name', title: '姓名'},
{field: 'age', title: '年龄'}
]]
});
// 关闭弹出层
layer.close(index);
}
});
});
});
```
其中,'demo'是表格容器的ID,'#addBtn'是新增按钮的选择器。当点击新增按钮时,会弹出一个弹出层,输入新增数据并点击确定按钮后,会将数据添加到数组中,并重新渲染表格。
注意,此处使用了layui框架,如果你没有集成该框架,可以去官网查看文档:https://www.layui.com/。
阅读全文