var定义data,创建一个带新增功能的layui表格,新增按钮在表格的倒数第一行第二个位置,并前面添加序列号
时间: 2024-05-14 14:16:37 浏览: 102
Layui给数据表格动态添加一行并跳转到添加行所在页的方法
好的,我理解您的要求了。对于您的问题,可以采用以下代码来实现:
```javascript
// 定义数据
var data = [
{id: 1, name: '张三', age: 18},
{id: 2, name: '李四', age: 20},
{id: 3, name: '王五', age: 22},
]
// 创建表格
layui.use('table', function(){
var table = layui.table;
// 渲染表格
table.render({
elem: '#demo', // 指定元素
data: data, // 指定数据
toolbar: '#toolbarDemo', // 指定工具栏
page: true, // 开启分页
limit: 10, // 每页显示的条数
limits: [10, 20, 30], // 每页显示的条数选择项
cols: [ // 指定表头
{type: 'numbers', title: '序号'},
{field: 'id', title: 'ID'},
{field: 'name', title: '姓名'},
{field: 'age', title: '年龄'},
{fixed: 'right', title: '操作', toolbar: '#barDemo', width: 100},
]
});
// 监听工具栏新增按钮
table.on('toolbar(test)', function(obj){
if(obj.event === 'add'){
// 获取表格中最后一行的数据
var lastData = table.cache.demo[table.cache.demo.length-1];
// 获取新增的序号
var id = parseInt(lastData.id) + 1;
// 手动添加一条数据
table.addRow('#demo', {id: id, name: '', age: null});
}
});
// 监听行工具栏删除按钮
table.on('tool(test)', function(obj){
if(obj.event === 'delete'){
// 删除该行数据
table.deleteRow('#'+obj.tr.attr('data-index'));
}
});
});
```
在上面的代码中,我们使用了 layui 中的 table 组件来创建表格,并通过 toolbar 参数指定了新增按钮的位置和样式。同时,在表格的最后一列,我们还添加了一个列操作列,用于实现删除功能。
注意,在监听工具栏新增按钮的代码块中,我们手动获取了最后一行的数据,并计算出新的序号。这是因为 layui 的 table 组件没有提供自动为数据添加序号的功能,所以我们需要手动实现。同样地,在监听行工具栏删除按钮的代码块中,我们需要手动获取该行的索引并删除对应的数据。
阅读全文