var定义一个data数组,通过clos方式渲染layui表格,并在表格最后一行添加一个新增功能
时间: 2024-05-04 21:16:37 浏览: 209
使用layui 渲染table数据表格的实例代码
好的,我明白了。针对您的问题,以下是代码示例:
```javascript
// 定义一个data数组
var data = [
{id: 1, name: '张三', age: 20},
{id: 2, name: '李四', age: 25},
{id: 3, name: '王五', age: 30}
];
// 通过clos方式渲染layui表格
layui.use('table', function() {
var table = layui.table;
// 定义表格字段属性
var cols = [
{field: 'id', title: 'ID'},
{field: 'name', title: '姓名'},
{field: 'age', title: '年龄'}
];
// 渲染表格
table.render({
elem: '#myTable',
data: data,
cols: [cols]
});
// 添加新增功能
$('#addBtn').click(function() {
// 获取表格数据长度
var len = table.cache['myTable'].length;
// 新增一行数据
table.addRow('#myTable', {id: len + 1, name: '', age: ''});
});
});
```
以上代码中,我们通过定义一个data数组来存储表格数据,并在使用clos方式渲染layui表格时将其作为data属性传入。在渲染完表格后,我们添加了一个新增功能的按钮,并通过table.addRow方法在表格最后一行新增一条数据。
阅读全文