layui获取选中行数据的实例讲解

发布时间：2023-05-18 12:54:27

layui是一款轻量级模块化前端UI库，它在开发中应用广泛。在layui中，表格(table)是经常使用的一种组件，我们可以通过表格来展示数据，并对数据进行编辑、删除等操作。在实际应用中，我们经常需要获取表格中选中行的数据，这篇文章将阐述如何在layui中获取选中行数据。

首先，我们需要知道layui中表格组件的基本用法。

1. 引入layui组件

要使用layui的表格组件，我们需要先引入layui组件库。在页面中引入layui.js文件即可。

<script src="layui.js"></script>

2. 定义表格结构

接下来，我们需要在html中定义表格的结构和属性，以便后续的数据展示和操作。

<table id="demo" lay-filter="test"></table>

其中，id="demo"表示表格的id；lay-filter="test"是layui表格组件中的一个关键属性，它用于给表格过滤器赋值，以便后续通过表格过滤器获取表格对象。同时，我们还可以使用lay-skin属性来定义表格的皮肤样式，具体用法可以参考layui官方文档。

3. 加载数据

我们需要在javascript中加载表格数据，这里我们模拟加载了10条数据。

layui.use('table', function(){
  var table = layui.table;
  
  //加载表格数据
  table.render({
    elem: '#demo',
    height: 315,
    url: '/demo/table/user/',
    page: true,
    cols: [[
      {checkbox: true, fixed: true},
      {field: 'id', title: 'ID', width: 80, sort: true, fixed: true},
      {field: 'username', title: '用户名', width: 120},
      {field: 'email', title: '邮箱', minWidth: 150},
      {field: 'sign', title: '签名', minWidth: 160},
      {field: 'sex', title: '性别', width: 80, templet: '#sexTpl'},
      {field: 'city', title: '城市', width: 100},
      {field: 'experience', title: '积分', width: 80, sort: true},
      {field: 'ip', title: 'IP', width: 120},
      {field: 'logins', title: '登录次数', width: 100, sort: true},
      {field: 'joinTime', title: '加入时间', width: 120},
      {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
    ]]
  });
});

4. 获取选中行数据

接下来，我们需要编写javascript代码，来获取表格中选中的行数据。在layui中，我们可以通过监听表格的checkbox事件来获取选中行的数据。

layui.use('table', function(){
  var table = layui.table;
  
  //监听checkbox事件
  table.on('checkbox(test)', function(obj){
    console.log(obj)
  });
});

在以上代码中，我们添加了table.on('checkbox(test)', function(obj){})事件监听，其中，test就是我们在表格中的lay-filter属性所定义的过滤器名称。obj是一个回调参数，其中包括数据的选中状态、对应的数据等信息。我们可以通过obj.data来获取选中行的数据。

layui.use('table', function(){
  var table = layui.table;
  
  //监听checkbox事件
  table.on('checkbox(test)', function(obj){
    console.log(obj.data);  //获取选中行数据
  });
});

综合以上代码，我们就可以实现在layui中获取选中行数据的功能。具体实现代码如下：

<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>layui获取选中行数据</title>
	<link rel="stylesheet" type="text/css" href="layui/css/layui.css">
</head>
<body>
	<table id="demo" lay-filter="test"></table>

	<!-- 模板 -->
	<script type="text/html" id="barDemo">
	  <a class="layui-btn layui-btn-xs" lay-event="edit">编辑</a>
	  <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del">删除</a>
	</script>

	<script type="text/javascript" src="layui/layui.js"></script>
	<script type="text/javascript">
	layui.use('table', function(){
	  var table = layui.table;
	  
	  //加载表格数据
	  table.render({
	    elem: '#demo',
	    height: 315,
	    url: '/demo/table/user/',
	    page: true,
	    cols: [[
	      {checkbox: true, fixed: true},
	      {field: 'id', title: 'ID', width: 80, sort: true, fixed: true},
	      {field: 'username', title: '用户名', width: 120},
	      {field: 'email', title: '邮箱', minWidth: 150},
	      {field: 'sign', title: '签名', minWidth: 160},
	      {field: 'sex', title: '性别', width: 80, templet: '#sexTpl'},
	      {field: 'city', title: '城市', width: 100},
	      {field: 'experience', title: '积分', width: 80, sort: true},
	      {field: 'ip', title: 'IP', width: 120},
	      {field: 'logins', title: '登录次数', width: 100, sort: true},
	      {field: 'joinTime', title: '加入时间', width: 120},
	      {fixed: 'right', title:'操作', toolbar: '#barDemo', width:150}
	    ]]
	  });

	  //监听checkbox事件
	  table.on('checkbox(test)', function(obj){
	    console.log(obj.data);  //获取选中行数据
	  });
	});
	</script>
</body>
</html>

以上代码中，我们定义了一个简单的表格，利用layui加载其中的数据。然后通过table.on('checkbox(test)', function(obj){})监听选中行的事件，并通过obj.data获取选中行的数据。最终效果如下：

![image](https://user-images.githubusercontent.com/88364050/128967882-2c79e3f8-0a89-4df8-acaf-e224ce509bbd.png)

总结：

通过以上实例，我们可以看到，在layui中获取选中行数据非常简单。只需要通过table.on('checkbox(test)', function(obj){})监听表格的checkbox事件，然后通过obj.data获取选中行的数据即可。需要注意的是，在监听checkbox事件之前，我们需要先加载表格数据，并且需要给表格过滤器赋值。layui的表格组件非常强大，我们可以在其中添加各种自定义操作，使得表格更加灵活、方便。