var定义data数组,数组里面创建假数据,通过clos方法,将数据渲染到layui表格里面,并像最后一行,添加一个有索引的新增按钮
时间: 2024-05-02 17:23:00 浏览: 18
好的,我明白你的问题了。根据你的要求,可以使用以下代码实现:
```javascript
// 定义data数组,并创建假数据
var data = [{
id: 1,
name: '张三',
age: 20,
}, {
id: 2,
name: '李四',
age: 25,
}, {
id: 3,
name: '王五',
age: 30,
}];
// 调用layui表格渲染方法,并传入数据
layui.table.render({
elem: '#demo',
cols: [[ // 表头
{field: 'id', title: '编号'},
{field: 'name', title: '姓名'},
{field: 'age', title: '年龄'}
]],
data: data
});
// 获取表格中最后一行的行数据
var lastRowData = layui.table.cache.demo[layui.table.cache.demo.length - 1];
// 在最后一行插入新增按钮
var $lastRow = $('#demo').next().find('.layui-table-body tbody tr:last-child');
$lastRow.append('<td><button class="layui-btn layui-btn-normal layui-btn-sm">新增</button></td>');
// 注册新增按钮点击事件
$lastRow.find('button').on('click', function() {
// 创建新行数据,其中id为最后一行id加一
var newRowData = {
id: lastRowData.id + 1
};
// 在表格数据中插入新行数据
layui.table.reload('demo', {
data: layui.table.cache.demo.concat(newRowData)
});
});
```
以上代码中,我们首先定义了一个data数组,里面包含了假数据。然后使用layui的table.render方法将数据渲染到表格中。接着获取表格中最后一行的数据,并在其后面添加一个有索引的新增按钮。最后,我们为新增按钮注册了点击事件,当点击按钮时会在表格数据中插入一条新的数据。