layui如何获取table某一行的值

介绍

layui是一款轻量级的前端UI库，被广泛运用于后台管理系统等场景下。其中的table组件是我们经常使用的一个组件。当我们需要获取table中某一行的值的时候，该怎么做呢？本文将介绍layui如何获取table某一行的值。

方法

方法一：使用on('row')

layui提供了一个on绑定事件的方法，我们可以使用on('row')方法来获取table中某一行的值。

首先需要给table设置一个lay-filter属性：

<table class="layui-table" lay-data="{…}" lay-filter="test">…</table>

然后在JavaScript中绑定on('row')事件：

layui.use('table', function(){

  var table = layui.table;
  table.on('row(test)', function(obj){
    console.log(obj.data) // 当前行数据
    console.log(obj.tr) // 当前行tr的DOM对象
    console.log(obj.tool) // 当前行的所有tool按钮DOM对象，若存在
  });
});

上述代码中，test即为我们设置的lay-filter属性的值。当我们点击table中的某一行时，就会触发该行的on('row')事件，并将该行的数据、DOM对象以及所有tool按钮DOM对象传递给回调函数。

方法二：使用getSelected()

除了on('row')方法，layui还提供了另外一种获取table中某一行的值的方法——getSelected()。

layui.use('table', function(){

  var table = layui.table;
  table.on('checkbox(test)', function(obj){
    console.log(obj.checked); // 当前是否选中状态
    console.log(obj.data); // 选中行的相关数据
    console.log(obj.type); // 如果触发的是全选，则为：all，如果触发的是单选，则为：one
    // 获取选中行的所有数据
    var checkStatus = table.checkStatus('test');
    // 获取选中行的第一行数据
    var data = checkStatus.data[0];
    // 获取选中行的第一行数据的某一列的值
    var column_value = data.column_name;
  });
});

上述代码中，我们在table的checkbox事件中绑定了一个回调函数。当选中某一行时，该行数据、相关状态以及obj.type等参数会传递给回调函数中。在回调函数中，我们调用了table.checkStatus('test')方法来获取所有选中行的数据，并将第一行数据中的某一列值赋值给了column_value。

总结

以上就是layui获取table某一行数据的两种方法。需要注意的是，这两种方法都需要在JavaScript中绑定相关事件回调函数，回调函数中才可以获取table中具体行的数据。获取数据后，我们可以对其进行处理，例如更新或删除某一行的数据。