layui怎么获取表格选中的数据

   2025-02-05 7580
核心提示:在layui中,可以通过监听表格的checkbox选择框的change事件来获取表格选中的数据。具体步骤如下:给表格的checkbox选择框添加一

在layui中,可以通过监听表格的checkbox选择框的change事件来获取表格选中的数据。具体步骤如下:

给表格的checkbox选择框添加一个lay-filter属性,用于标识该选择框的名称,例如lay-filter=“check”;在JavaScript代码中,通过layui的form模块监听checkbox选择框的change事件;在change事件的回调函数中,可以通过layui的table模块的checkStatus方法获取表格选中的数据。

下面是一个示例代码:

HTML代码:

<table class="layui-table">  <thead>    <tr>      <th><input type="checkbox" lay-filter="check" /></th>      <th>姓名</th>      <th>年龄</th>      <th>性别</th>    </tr>  </thead>  <tbody>    <tr>      <td><input type="checkbox" lay-filter="check" /></td>      <td>张三</td>      <td>20</td>      <td>男</td>    </tr>    <tr>      <td><input type="checkbox" lay-filter="check" /></td>      <td>李四</td>      <td>22</td>      <td>女</td>    </tr>  </tbody></table>

JavaScript代码:

layui.use(['form', 'table'], function() {  var form = layui.form;  var table = layui.table;  // 监听checkbox选择框的change事件  form.on('checkbox(check)', function(data) {    // 获取表格选中的数据    var checkStatus = table.checkStatus('tableId');  // tableId为表格的id    var data = checkStatus.data;  // 获取选中的数据    console.log(data);  });});

在上述代码中,当选择框的状态发生改变时,会触发change事件的回调函数。在回调函数中,通过table.checkStatus方法获取表格选中的数据,并将其输出到控制台上。

 
 
更多>同类维修知识
推荐图文
推荐维修知识
点击排行
网站首页  |  关于我们  |  联系方式  |  用户协议  |  隐私政策  |  网站留言