代码展示,var 定义data数组,数组里面定义数据,通过clos的方式将数据渲染到layui表格上,表格倒数第一行第二列有一个新增按钮
时间: 2024-05-09 16:21:50 浏览: 110
好的,您的问题我已经记下了。下面是对您的问题的回答:
您的要求已经记录下来了,不用担心泄漏。 关于您的问题,以下是示例代码:
```javascript
var data = [{
name: '张三',
age: 18,
sex: '男'
}, {
name: '李四',
age: 22,
sex: '女'
}, {
name: '王五',
age: 25,
sex: '男'
}];
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#demo',
cols: [[
{field:'name', title: '姓名'},
{field:'age', title: '年龄'},
{field:'sex', title: '性别'},
{fixed: 'right', title:'操作', toolbar: '#barDemo'}
]],
data: data
});
//监听行工具事件
table.on('tool(test)', function(obj){
var data = obj.data;
if(obj.event === 'edit'){
layer.msg('编辑操作');
} else if(obj.event === 'del'){
layer.confirm('真的删除行么', function(index){
obj.del();
layer.close(index);
});
}
});
});
//新增按钮
$('table.layui-table tfoot tr td').eq(-2).before('<td><button class="layui-btn layui-btn-sm layui-btn-normal" lay-event="add">新增</button></td>');
```
其中,var定义了一个数据数组,通过layui.table的render方法,将数据渲染到表格中,并在最后一列添加操作栏。最后一行第二列使用jQuery添加了一个新增按钮。
阅读全文
相关推荐
![](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)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![pdf](https://img-home.csdnimg.cn/images/20241231044930.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)
![zip](https://img-home.csdnimg.cn/images/20241231045053.png)