layui的table单击行勾选checkbox功能方法

发布时间：2023-05-16 22:21:49

layui是一款优秀的前端UI框架，在操作表格时，我们通常需要选择某些行来进行一些操作。本文将介绍如何使用layui的table组件来实现单击行勾选checkbox的功能。

1. 安装layui

在使用layui之前，我们需要在项目中引入相应的资源文件。可以通过CDN或下载文件来使用layui。在这里我们选择下载文件来使用。

首先，在layui的官网https://www.layui.com/ 下载layui的压缩包，解压得到以下文件。

layui-v2.5.6/css/layui.css
layui-v2.5.6/layui.js

其中，"layui.css"文件是layui的样式文件，"layui.js"文件是layui的核心文件。

将以上两个文件放置到项目中，并在HTML文件中引入。

<link rel="stylesheet" href="layui-v2.5.6/css/layui.css">
<script src="layui-v2.5.6/layui.js"></script>

2. HTML结构

接下来，我们需要在HTML文件中定义一个table元素，并为表格添加表头和表体。

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

其中，"id"属性用于给表格命名，"lay-filter"属性用于过滤表格事件，后面我们会使用到这两个属性。

3. 加载数据

在JavaScript中，我们可以使用layui提供的接口来向表格添加数据。例如：

layui.use('table', function(){
  var table = layui.table;
  
  // 表格配置项
  var options = {
    elem: '#demo',
    url: './data.json', // 数据接口
    cols: [[ // 表头
      {type: 'checkbox', fixed: 'left'},
      {field: 'id', title: 'ID', width: 80},
      {field: 'username', title: '用户名', width: 120},
      {field: 'sex', title: '性别', width: 80, sort: true},
      {field: 'city', title: '城市', width: 100},
      {field: 'sign', title: '签名', width: 200},
      {field: 'experience', title: '积分', width: 80, sort: true},
      {field: 'score', title: '评分', width: 80, sort: true},
      {field: 'classify', title: '职业', width: 100},
      {field: 'wealth', title: '财富', width: 150, sort: true},
      {title: '操作', width: 150, toolbar: '#barDemo'}
    ]]
  };

  // 加载表格数据
  table.render(options);
});

以上代码中，我们使用了table.render()接口来加载表格数据。其中，"options"对象是表格的配置项，"elem"属性指定了表格所在的元素，"url"属性指定了请求数据的地址，"cols"属性指定了表头和表体的列信息。这里的"data.json"是一个本地的JSON文件，用于模拟请求数据。

4. 单击行勾选checkbox

接下来，我们需要通过layui的事件机制来实现单击行勾选checkbox的功能。

首先，在表格的列信息中添加一个类型为"checkbox"的列。

{type: 'checkbox', fixed: 'left'},

然后，我们需要监听表格的单击事件，在事件回调函数中来控制checkbox的选中状态。可参考以下代码。

// 表格配置项
var options = {
  // ...
};

// 加载表格数据
table.render(options);

// 监听表格单击事件
table.on('row(test)', function(obj){
  var checkbox = obj.tr.find("input[type='checkbox']");
  checkbox.prop('checked', !checkbox.is(':checked'));
});

以上代码中，我们使用table.on()接口来监听表格的单击事件。其中，"test"是在HTML结构中定义的"lay-filter"属性的值，用于过滤表格事件。在事件回调函数中，我们调用jQuery的prop()方法来控制checkbox的选中状态，!checkbox.is(':checked')表示取反当前选中状态。obj.tr.find()方法用于查找当前行的checkbox元素。

这样，我们就可以实现单击行勾选checkbox的功能了。

完整代码可参考以下代码。

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui table</title>
  <link rel="stylesheet" href="layui-v2.5.6/css/layui.css">
</head>
<body>

  <div class="layui-fluid">
    <table id="demo" lay-filter="test"></table>
  </div>

  <script src="layui-v2.5.6/layui.js"></script>
  <script>
    layui.use('table', function(){
      var table = layui.table;

      // 表格配置项
      var options = {
        elem: '#demo',
        url: './data.json', // 数据接口
        cols: [[ // 表头
          {type: 'checkbox', fixed: 'left'},
          {field: 'id', title: 'ID', width: 80},
          {field: 'username', title: '用户名', width: 120},
          {field: 'sex', title: '性别', width: 80, sort: true},
          {field: 'city', title: '城市', width: 100},
          {field: 'sign', title: '签名', width: 200},
          {field: 'experience', title: '积分', width: 80, sort: true},
          {field: 'score', title: '评分', width: 80, sort: true},
          {field: 'classify', title: '职业', width: 100},
          {field: 'wealth', title: '财富', width: 150, sort: true},
          {title: '操作', width: 150, toolbar: '#barDemo'}
        ]]
      };

      // 加载表格数据
      table.render(options);

      // 监听表格单击事件
      table.on('row(test)', function(obj){
        var checkbox = obj.tr.find("input[type='checkbox']");
        checkbox.prop('checked', !checkbox.is(':checked'));
      });
    });
  </script>

</body>
</html>