layui点击表格每行的按钮获取每行的内容呢
时间: 2023-09-08 16:04:20 浏览: 675
Layui事件监听的实现(表单和数据表格)
在layui中,我们可以使用表格组件中的事件监听来实现点击表格每行按钮获取每行内容的功能。
首先,我们需要在表格中定义一个按钮列,通过设置templet属性来渲染每行的按钮。例如:
```javascript
[
{field: 'id', title: '序号'},
{field: 'name', title: '姓名'},
{field: 'age', title: '年龄'},
{fixed: 'right', align: 'center', toolbar: '#toolbar', title: '操作'}
]
```
其中,`toolbar`属性指定了一个id为`#toolbar`的模板,我们需要在页面中定义这个模板:
```html
<script type="text/html" id="toolbar">
<a class="layui-btn layui-btn-xs" lay-event="detail">查看</a>
</script>
```
接下来,我们需要监听表格row事件,在监听回调函数中获取每行的数据。例如:
```javascript
table.on('tool(test)', function(obj){
var data = obj.data; //当前行的数据
var layEvent = obj.event; //当前行的事件
if(layEvent === 'detail'){ //如果点击的是查看按钮
console.log(data); //输出当前行的数据
}
});
```
在上述代码中,我们通过`obj.data`获取到了当前行的数据,然后可以根据需要进行进一步处理。
注意,`test`是表格的lay-filter属性值,需要根据实际情况进行调整。
综上所述,我们可以通过上述方法来实现在layui中点击表格每行按钮获取每行内容的功能。
阅读全文