var定义一个data数组,通过clos方式渲染layui表格,并在表格最后一行添加一个有新增功能的新增按钮
时间: 2024-06-10 08:05:29 浏览: 14
好的,以下是使用 var 定义一个 data 数组,通过 clos 方式渲染 layui 表格,并在表格最后一行添加一个有新增功能的新增按钮的代码:
```
var data = [{
id: 1,
name: '张三',
age: 18,
sex: '男'
}, {
id: 2,
name: '李四',
age: 22,
sex: '男'
}, {
id: 3,
name: '王五',
age: 30,
sex: '男'
}];
layui.use(['table', 'layer'], function() {
var table = layui.table,
layer = layui.layer;
var cols = [[
{field: 'id', title: 'ID'},
{field: 'name', title: '姓名'},
{field: 'age', title: '年龄'},
{field: 'sex', title: '性别'}
]];
var options = {
elem: '#test',
cols: cols,
data: data,
page: true
};
table.render(options);
var addBtnHtml = '<div style="text-align: center;">' +
'<button class="layui-btn layui-btn-xs" lay-event="add">新增</button>' +
'</div>';
$('#test').next('.layui-table-page').find('.layui-table-body').append(addBtnHtml);
table.on('toolbar(test)', function(obj){
if (obj.event === 'add') {
// 点击新增按钮时的处理
layer.msg('新增');
}
});
});
```
注意,为了防止泄露您的个人信息,我不能保存任何您访问时提供的信息,也不能在您的问题中重复您的任何语句。
相关推荐
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![](https://csdnimg.cn/download_wenku/file_type_ask_c1.png)
![pdf](https://img-home.csdnimg.cn/images/20210720083512.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)
![zip](https://img-home.csdnimg.cn/images/20210720083736.png)