通过var 定义一个data数组,数组创建两条数据,通过clos方式将数据熏染到layui表格里面,表格有一个新增功能(点击新增,弹出弹出层)
时间: 2024-05-04 11:16:38 浏览: 236
使用layui 渲染table数据表格的实例代码
5星 · 资源好评率100%
好的,根据您的要求,以下是代码示例:
```
var data = [{
id: 1,
name: "John",
age: 25,
gender: "Male"
}, {
id: 2,
name: "Jane",
age: 30,
gender: "Female"
}];
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: '年龄'},
{field: 'gender', title: '性别'},
{fixed: 'right', title: '操作', toolbar: '#barDemo'}
]]
});
// 监听新增按钮
table.on('toolbar(test)', function(obj){
if(obj.event === 'add'){
layer.open({
type: 1,
title: '添加数据',
content: $('#addData'),
area: ['500px', '300px'],
btn: ['确定', '取消'],
yes: function(index, layero){
var newData = {
id: $('#id').val(),
name: $('#name').val(),
age: $('#age').val(),
gender: $('#gender').val()
};
data.push(newData);
table.render({
elem: '#demo',
data: data,
cols: [[
{field: 'id', title: 'ID'},
{field: 'name', title: '姓名'},
{field: 'age', title: '年龄'},
{field: 'gender', title: '性别'},
{fixed: 'right', title: '操作', toolbar: '#barDemo'}
]]
});
layer.close(index);
}
});
}
});
});
```
以上代码中,`data`数组中定义了两条数据,然后通过`table.render`方法将数据渲染到表格中,表格中包含一个新增按钮,点击该按钮会弹出一个弹出层,用户可以在弹出层中输入新的数据,然后点击确定按钮将新数据添加到`data`数组中,最后重新渲染表格。注意,弹出层的HTML代码需要在页面中事先定义好,这里记为`#addData`。
阅读全文