3分钟搞定Layui树形表格treeTable行选中状态：从入门到精通-优快云博客

3分钟搞定Layui树形表格treeTable行选中状态：从入门到精通

【免费下载链接】layui 项目地址: https://gitcode.com/gh_mirrors/lay/layui

在Web开发中，树形表格（TreeTable）是展示层级数据的重要组件，而行选中状态的管理则是实现数据交互的核心功能。你是否还在为树形表格的选中状态同步、父子节点关联等问题烦恼？本文将基于Layui框架的treeTable组件，通过实际案例和代码解析，带你快速掌握行选中状态的实现方案，让你3分钟内从入门到精通。

一、treeTable组件简介

Layui的treeTable组件是基于table组件扩展而来的树形表格组件，支持常见的树组件功能，如节点展开/折叠、异步加载、行选中状态管理等。该组件从Layui 2.8版本开始引入，为层级数据展示提供了强大的支持。

官方文档：docs/treeTable/index.md

1.1 核心特性

支持复选框（checkbox）和单选框（radio）两种选中模式
提供灵活的API接口管理选中状态
支持父子节点选中状态联动
兼容table组件的所有属性和方法

二、行选中状态实现方案

2.1 基础选中功能实现

要实现行选中功能，首先需要在treeTable的列定义中添加复选框或单选框类型的列。

<!-- 树形表格列定义 -->
cols: [[
  {type: 'checkbox', fixed: 'left'},  // 复选框列
  {type: 'numbers', fixed: 'left'},   // 序号列
  {field: 'name', title: '用户名', width: 180, fixed: 'left'},
  // 其他列...
]]

示例代码路径：examples/treeTable.html

2.2 设置行选中状态的API

treeTable提供了setRowChecked方法用于设置行选中状态，该方法支持以下参数：

参数	描述	类型	默认值
index	要设置选中状态的行下标或行数据	number/object	-
checked	选中状态。true选中；false取消选中；null切换	boolean	-
callbackFlag	是否触发事件	boolean	false

官方文档：docs/treeTable/index.md

2.3 代码示例：设置单行选中

// 选中第一行
treeTable.setRowChecked('test', {
  index: 0,
  checked: true // 选中
}); 

// 取消选中第一行
treeTable.setRowChecked('test', {
  index: 0,
  checked: false // 取消选中
});

三、高级应用场景

3.1 获取选中状态数据

通过checkStatus方法可以获取当前表格的选中状态数据：

// 获取选中状态
var status = treeTable.checkStatus(tableId);
console.log(status.data); // 选中的数据数组
console.log(status.isAll); // 是否全选

示例代码路径：examples/treeTable.html

3.2 全选与取消全选

使用checkAllNodes方法可以实现全选或取消全选功能：

// 全选
treeTable.checkAllNodes('test', true);

// 取消全选
treeTable.checkAllNodes('test', false);

官方文档：docs/treeTable/index.md

3.3 父子节点联动选中

treeTable默认支持父子节点选中状态的联动，当选中父节点时，所有子节点也会被选中；当取消父节点选中时，所有子节点也会取消选中。

// 渲染时开启父子联动（默认开启）
treeTable.render({
  elem: '#test',
  // 其他配置...
  tree: {
    // 树形配置...
  },
  cols: [[
    {type: 'checkbox', fixed: 'left'},
    // 其他列...
  ]]
});

四、完整案例演示

以下是一个完整的树形表格行选中功能实现案例：

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>树形表格行选中示例</title>
  <link rel="stylesheet" href="../src/css/layui.css">
</head>
<body class="layui-padding-5">

<table class="layui-hide" id="test"></table>

<script type="text/html" id="toolbarDemo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getChecked">获取选中数据</button>
    <button class="layui-btn layui-btn-sm" lay-event="checkAll">全选</button>
    <button class="layui-btn layui-btn-sm layui-btn-danger" lay-event="uncheckAll">取消全选</button>
  </div>
</script>

<script src="../src/layui.js"></script>
<script>
layui.use(['treeTable', 'layer'], function(){
  var treeTable = layui.treeTable;
  var layer = layui.layer;

  // 渲染树形表格
  var inst = treeTable.render({
    elem: '#test',
    url: './json/treeTable/demo-1.json',
    toolbar: '#toolbarDemo',
    tree: {
      customName: {
        name: 'name'
      }
    },
    cols: [[
      {type: 'checkbox', fixed: 'left'},
      {type: 'numbers', fixed: 'left'},
      {field: 'id', title: 'ID', width: 100, sort: true},
      {field: 'name', title: '名称', width: 200},
      {field: 'city', title: '城市', width: 150},
      {field: 'createTime', title: '创建时间', width: 180}
    ]],
    page: true
  });

  // 工具栏事件
  treeTable.on('toolbar('+ inst.config.id +')', function(obj){
    var tableId = obj.config.id;
    if(obj.event === 'getChecked'){
      var status = treeTable.checkStatus(tableId);
      layer.alert(JSON.stringify(status.data, null, 2));
    } else if(obj.event === 'checkAll'){
      treeTable.checkAllNodes(tableId, true);
    } else if(obj.event === 'uncheckAll'){
      treeTable.checkAllNodes(tableId, false);
    }
  });
});
</script>
</body>
</html>

完整示例路径：examples/treeTable.html

五、注意事项

treeTable组件不支持IE8浏览器，如需支持需自行添加polyfill
使用radio类型时，不支持null（切换）状态
callbackFlag为true时，checked: false可能无效
父子节点联动是默认开启的，如需关闭需要自定义实现

官方文档：docs/treeTable/index.md

通过本文的介绍，相信你已经掌握了Layui树形表格treeTable行选中状态的实现方案。无论是基础的行选中、全选功能，还是高级的父子节点联动，treeTable都提供了简洁易用的API，帮助你快速实现复杂的数据交互需求。如果你在使用过程中遇到问题，可以查阅官方文档或参考示例代码，获取更多帮助。

【免费下载链接】layui 项目地址: https://gitcode.com/gh_mirrors/lay/layui

创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考