layui 表格复选框
时间: 2024-11-06 12:11:28 浏览: 46
layui是一个轻量级的前端 UI 框架,它提供了一个简单易用的方式来创建表格,并包含丰富的组件。在layui的表格组件中,如果需要添加复选框功能,你可以利用其`<input>`标签配合`layTable`中的配置来实现。例如:
```html
<table lay-filter="demo" lay-data="data">
<thead>
<tr>
<th lay-width="80">选择</th>
<th>姓名</th>
<th>年龄</th>
</tr>
</thead>
<tbody>
<tr lay-id="1">
<td><input type="checkbox" name="" lay-data="{id:1}" /></td>
<td>张三</td>
<td>25</td>
</tr>
<!-- ... 更多行数据 -->
</tbody>
</table>
<script>
var data = []; // 这里应该填写你的数据源
layui.use('table', function(){
var table = layui.table;
table.render({
elem: '#demo', // 表格元素ID
method: 'get', // 请求方式(get/post)
url: '', // 数据请求地址
data: {}, // 请求参数
columns: [
// 列的配置项
{field: 'check', title: '选择', checkbox: true}, // 设置第一列是复选框列
{field: 'name', title: '姓名'},
{field: 'age', title: '年龄'}
],
toolbar: [] // 工具栏配置
});
});
</script>
```
在这个例子中,`checkbox: true`表示开启复选框功能,用户可以在表格的第一列对行进行勾选。当用户操作后,可以通过`layTable.check()`方法获取选中的记录。
阅读全文