3分钟上手layui树形表格：行内编辑与节点操作全攻略-优快云博客

3分钟上手layui树形表格：行内编辑与节点操作全攻略

【免费下载链接】layui 一套遵循原生态开发模式的 Web UI 组件库，采用自身轻量级模块化规范，易上手，可以更简单快速地构建网页界面。项目地址: https://gitcode.com/GitHub_Trending/la/layui

你还在为树形数据展示和编辑烦恼吗？普通表格无法呈现层级关系，树形组件又难以实现数据编辑？本文将带你用layui的treeTable组件（树表组件）快速解决这一痛点，实现从数据加载到行内编辑、节点增删改查的全流程操作。读完本文，你将掌握树形表格的核心配置、行内编辑技巧和节点操作方法，让复杂的树形数据管理变得简单高效。

为什么选择treeTable组件

treeTable是layui 2.8+版本新增的树形表格组件，基于table组件扩展而来，完美融合了表格的结构化展示和树形结构的层级关系。它支持静态数据加载、异步节点加载、行内编辑、节点增删改查等功能，且API简洁易用，无需复杂配置即可快速上手。官方文档详细介绍了组件的属性和方法，为开发提供了全面的参考。

快速开始：基础配置与渲染

引入资源

首先，需要在页面中引入layui的CSS和JS文件。推荐使用国内CDN，确保访问速度和稳定性：

<link rel="stylesheet" href="https://cdn.staticfile.org/layui/2.9.10/css/layui.css">
<script src="https://cdn.staticfile.org/layui/2.9.10/layui.js"></script>

基础渲染代码

以下是一个简单的树形表格渲染示例，包含复选框、ID、用户名、性别、积分等列，并启用了工具栏和行操作按钮：

<table id="ID-treeTable-demo"></table>

<script type="text/html" id="TPL-treeTable-demo">
  <div class="layui-btn-container">
    <button class="layui-btn layui-btn-sm" lay-event="getChecked">获取选中数据</button>
  </div>
</script>

<script type="text/html" id="TPL-treeTable-demo-tools">
  <div class="layui-btn-container">
    <a class="layui-btn layui-btn-primary layui-btn-xs" lay-event="detail">查看</a>
    <a class="layui-btn layui-btn-warm layui-btn-xs" lay-event="addChild">新增</a>
    <a class="layui-btn layui-btn-xs" lay-event="more">更多 <i class="layui-icon layui-icon-down"></i></a>
  </div>
</script>

<script>
layui.use(function(){
  var treeTable = layui.treeTable;
  var layer = layui.layer;
  var dropdown = layui.dropdown;

  // 渲染树形表格
  var inst = treeTable.render({
    elem: '#ID-treeTable-demo',
    url: '/static/json/2/treeTable/demo-1.json', // 实际使用时替换为真实接口
    tree: {
      // 异步加载子节点配置（按需开启）
      // async: {
      //   enable: true,
      //   url: '/static/json/2/treeTable/demo-async.json',
      //   autoParam: ["parentId=id"]
      // }
    },
    maxHeight: '501px',
    toolbar: '#TPL-treeTable-demo',
    cols: [[
      {type: 'checkbox', fixed: 'left'},
      {field: 'id', title: 'ID', width: 80, sort: true, fixed: 'left'},
      {field: 'name', title: '用户名', width: 180, fixed: 'left'},
      {field: 'sex', title: '性别', width: 80, sort: true},
      {field: 'experience', title: '积分', width: 90, sort: true},
      {field: 'city', title: '城市', width: 100},
      { fixed: "right", title: "操作", width: 190, align: "center", toolbar: "#TPL-treeTable-demo-tools"} 
    ]],
    page: true
  });
});
</script>

核心配置说明：

tree：树形结构相关配置，支持异步加载子节点
toolbar：表头工具栏，用于放置批量操作按钮
cols：列定义，通过toolbar属性指定行操作按钮模板

行内编辑实现方案

1. 直接编辑积分示例

通过点击"更多"按钮中的"修改积分"选项，弹出输入框修改积分值：

// 单元格工具事件
treeTable.on('tool('+ inst.config.id +')', function (obj) {
  var layEvent = obj.event;
  var trData = obj.data;
  var tableId = obj.config.id;
  
  if (layEvent === "more") {
    dropdown.render({
      elem: this,
      show: true,
      align: "right",
      data: [
        {title: "修改积分", id: "edit"},
        {title: "删除", id: "del"}
      ],
      click: function (menudata) {
        if (menudata.id === "edit") {
          layer.prompt({
              value: trData.experience,
              title: "输入新的积分"
          }, function (value, index) {
            // 更新行数据
            obj.update({ experience: value });
            // 等效于：treeTable.updateNode(tableId, trElem.attr('data-index'), {experience: value});
            layer.close(index);
          });
        }
      }
    });
  }
});

这段代码通过dropdown组件实现下拉菜单，点击"修改积分"后调用layer.prompt弹出输入框，用户输入后通过obj.update()方法更新行数据。

2. 完整行内编辑实现

对于需要编辑多个字段的场景，可以通过自定义模板实现单元格内直接编辑：

// 定义可编辑列模板
{field: 'name', title: '用户名', width: 180, fixed: 'left', templet: function(d){
  return '<input type="text" class="layui-input" value="'+ d.name +'" onblur="updateName('+ d.id +', this.value)">';
}}

// 更新用户名函数
function updateName(id, value) {
  // 调用treeTable.updateNode方法更新数据
  treeTable.updateNode('ID-treeTable-demo', getNodeIndexById(id), {name: value});
}

这种方式可以实现点击单元格直接编辑，编辑完成后失去焦点保存数据。

节点操作全指南

新增节点

通过addNodes方法可以在指定父节点下新增子节点：

// 新增子节点
var newNode = treeTable.addNodes(tableId, {
  parentIndex: trData["LAY_DATA_INDEX"], // 父节点索引
  index: -1, // 插入位置，-1表示最后
  data: { id: Date.now(), name: "新节点" } // 新节点数据
});

删除节点

使用removeNode方法删除指定节点：

// 删除节点
layer.confirm("真的删除行么", function (index) {
  obj.del(); // 等效于 treeTable.removeNode(tableId, trElem.attr('data-index'))
  layer.close(index);
});

展开/折叠节点

通过expandNode方法控制节点展开或折叠：

// 展开节点
treeTable.expandNode('ID-treeTable-demo', {
  index: 0, // 节点行索引
  expandFlag: true // true展开，false折叠
});

// 展开所有节点
treeTable.expandAll('ID-treeTable-demo', true);

获取选中节点数据

通过checkStatus方法获取选中的节点数据：

// 表头工具栏事件
treeTable.on("toolbar(ID-treeTable-demo)", function (obj) {
  if (obj.event === "getChecked") {
    var status = treeTable.checkStatus(obj.config.id);
    if(!status.data.length) return layer.msg('无选中数据');
    console.log("选中数据：", status.data);
    layer.alert("选中数据已输出到控制台");
  }
});

异步加载子节点配置

对于大数据量的树形结构，推荐使用异步加载子节点：

tree: {
  async: {
    enable: true, // 开启异步加载
    url: '/api/getChildren', // 加载子节点的接口
    autoParam: ["id=parentId"], // 自动传递父节点ID参数
    // 自定义参数
    otherParam: {token: 'xxx'}
  }
}

异步加载时，接口需要返回以下格式的数据：

{
  "code": 0,
  "msg": "",
  "count": 10,
  "data": [
    {"id": 101, "name": "子节点1", "hasChildren": true},
    {"id": 102, "name": "子节点2", "hasChildren": false}
  ]
}

实际项目应用示例

以下是一个完整的树形表格编辑功能实现，包含数据加载、行内编辑、节点增删改查等功能：

<!-- 完整示例代码路径：[examples/treeTable.html](https://link.gitcode.com/i/02c9beac0916beb09d8b0441c617721e) -->
<!-- 官方文档：[docs/treeTable/index.md](https://link.gitcode.com/i/edb1aad8813e74f151dec8b726fd2f61) -->

通过本文介绍的方法，你可以快速实现树形表格的各种编辑操作。treeTable组件的更多高级用法，如节点过滤、数据重载、自定义树形图标等，可以参考官方文档中的详细说明和示例代码。

掌握了treeTable组件，无论是实现部门管理、菜单配置还是文件目录管理，都能游刃有余。现在就动手试试，让你的树形数据管理界面焕然一新吧！

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