通过var 定义一个data数组,数组创建两条数据,通过clos方式将数据熏染到layui表格里面,表格有一个新增功能(点击新增,弹出弹出层)(完整代码)
时间: 2024-05-04 19:16:37 浏览: 86
使用layui 渲染table数据表格的实例代码
5星 · 资源好评率100%
好的,让我来解答你的问题。
以下是示例代码实现您的需求:
```
//定义一个data数组
var data = [
{"id": 1, "name": "张三", "age": 20},
{"id": 2, "name": "李四", "age": 25},
];
//使用 layui 的 table 模块,渲染表格
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#demo', //表格容器的id
data: data, //数据源
cols: [ //表头
[ //一行表头
{field: 'id', title: 'ID'},
{field: 'name', title: '姓名'},
{field: 'age', title: '年龄'}
]
]
});
//监听表格新增按钮的点击事件
table.on('toolbar(test)', function(obj){
var layEvent = obj.event; //获取事件名
if(layEvent === 'add'){ //点击了新增按钮
//弹出层,填写新增数据
layer.open({
type: 1,
title: '新增数据',
content: '<div style="padding: 20px;"><form class="layui-form"><div class="layui-form-item"><label class="layui-form-label">ID</label><div class="layui-input-inline"><input type="text" name="id" required lay-verify="required|number" placeholder="请输入ID" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">姓名</label><div class="layui-input-inline"><input type="text" name="name" required lay-verify="required" placeholder="请输入姓名" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><label class="layui-form-label">年龄</label><div class="layui-input-inline"><input type="text" name="age" required lay-verify="required|number" placeholder="请输入年龄" autocomplete="off" class="layui-input"></div></div><div class="layui-form-item"><div class="layui-input-block"><button class="layui-btn" lay-submit lay-filter="add-form-submit">提交</button></div></div></form></div>'
});
}
});
//监听新增数据表单的提交事件
form.on('submit(add-form-submit)', function(data){
//在数据源中新增一条数据
data.push(data.field);
//使用 clos 更新表格
table.reload('demo', {
data: data
});
//关闭新增数据弹出层
layer.closeAll();
return false; //阻止表单跳转
});
});
```
以上就是本次对您问题的解答,希望能够帮到您。
阅读全文