layui获取表格中复选框选中的记录的值
时间: 2023-08-11 18:08:40 浏览: 2087
在 layui 中,可以通过获取表格对象 `table`,然后调用其 `checkStatus` 方法来获取选中的行数据。
具体的代码实现如下:
```javascript
// 获取表格对象
var table = layui.table;
// 监听复选框选中事件
table.on('checkbox(tableId)', function(obj){
// 获取选中的行数据
var selectedData = table.checkStatus('tableId').data;
// 遍历选中的行数据
layui.each(selectedData, function(index, item){
// 输出行数据中的值
console.log(item.fieldName);
});
});
```
在上述代码中,`tableId` 是对应的表格 id,`fieldName` 则是选中行中需要获取的字段名称。
相关问题
layui 监听表格复选框
在Layui中,我们可以通过监听表格复选框的方式来实现响应选中状态的功能。具体操作如下:
1. 首先,我们需要在表格的每一行加入一个复选框,通过配置lay-skin属性来设置复选框的样式。例如:
```
<input type="checkbox" lay-skin="primary">
```
2. 接下来,我们可以使用Layui的事件监听机制来监听复选框的选中状态。通过给复选框绑定lay-filter属性,并在表格的渲染参数中配置done回调函数,实现监听复选框选中状态的功能。例如:
```javascript
// 渲染表格
table.render({
// ...
done: function (res, curr, count) {
// 监听复选框选中状态
form.on('checkbox(check)', function (obj) {
if (obj.checked) {
// 复选框被选中时执行的逻辑
console.log('选中');
} else {
// 复选框取消选中时执行的逻辑
console.log('取消选中');
}
});
},
});
```
这里的`checkbox(check)`中的`check`是复选框的lay-filter属性值,需要与绑定的属性保持一致。
3. 最后,在复选框的监听事件中,根据选中状态执行相应的逻辑。例如,可以使用`obj.data`获取当前行的数据,并根据需要进行相关操作。
通过以上步骤,我们就可以实现在Layui中监听表格复选框选中状态的功能。
layui数据表格复选框实现单选功能
在 layui数据表格中,可以通过监听复选框的选中事件,来实现单选功能。具体实现步骤如下:
1. 在页面中定义数据表格,并设置其复选框列的lay-skin属性为primary,表示使用原始风格的复选框。
```html
<table class="layui-table" id="demo">
<thead>
<tr>
<th><input type="checkbox" name="" lay-skin="primary" lay-filter="allChoose"></th>
<th>ID</th>
<th>姓名</th>
<th>性别</th>
<th>城市</th>
</tr>
</thead>
<tbody>
<tr>
<td><input type="checkbox" name="" lay-skin="primary"></td>
<td>1</td>
<td>小明</td>
<td>男</td>
<td>北京</td>
</tr>
<tr>
<td><input type="checkbox" name="" lay-skin="primary"></td>
<td>2</td>
<td>小红</td>
<td>女</td>
<td>上海</td>
</tr>
<!-- ... -->
</tbody>
</table>
```
2. 在JavaScript代码中,监听表格的复选框选中事件,并在事件处理函数中,根据选中状态来判断是否需要取消其他行的选中状态。
```javascript
layui.use('table', function(){
var table = layui.table;
//监听表格复选框选择
table.on('checkbox(demo)', function(obj){
var checkStatus = table.checkStatus('demo');
var data = checkStatus.data;
var isChecked = obj.checked;
var rowIndex = obj.data.LAY_TABLE_INDEX;
if (isChecked) {
// 如果选中,则取消其他行的选中状态
for (var i = 0; i < data.length; i++) {
if (data[i].LAY_TABLE_INDEX != rowIndex) {
table.checkStatus('demo').data[i].LAY_CHECKED = false;
}
}
}
});
});
```
在上述代码中,我们首先获取当前表格的选中状态,然后获取当前选中的行的索引值,接着判断是否为选中状态,如果是,则遍历所有行,将除当前选中行之外的其他行的选中状态取消。这样,就可以实现单选功能了。
阅读全文