var 定义data数组,通过cols方式创建layui表格,里面有一个新增功能,新增按钮位置在最后一行第二列
时间: 2023-06-09 20:05:57 浏览: 217
layui点击数据表格添加或删除一行的例子
好的,谢谢你的提醒,我明白了。针对你的问题,我认为你需要在cols参数中定义一个工具栏,并在其中添加一个按钮,代码如下:
```
var data = [
{id: 1, name: '张三', age: 18},
{id: 2, name: '李四', age: 20},
{id: 3, name: '王五', age: 22},
];
var cols = [[
{field: 'id', title: 'ID', width: 80},
{field: 'name', title: '姓名', width: 120},
{field: 'age', title: '年龄', width: 80},
{fixed: 'right', align: 'center', toolbar: '#table-toolbar'}
]];
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#table',
data: data,
cols: cols
});
table.on('toolbar(table)', function(obj){
if(obj.event === 'add'){
var newData = {id: data.length+1, name: '', age: ''};
data.push(newData);
table.reload('table', {
data: data
});
}
});
});
```
解释一下代码,首先我们定义了一个数据源data和一个表格列的配置cols,其中新增功能的按钮位置在最后一行第二列,因此我们在cols的参数中添加一个工具栏toolbar,然后在该工具栏中添加一个按钮。接着使用layui的table模块渲染表格,并且监听表格toolbar中的按钮点击事件,当新增按钮被点击时,我们向数据源中加入一个新的空数据,并使用table.reload()方法重新加载表格。
希望我的回答对你有所帮助,如果你有其他的问题或疑问,欢迎随时向我提问。
阅读全文