【前端框架】基于layui树形菜单写的树形列表（treetable）

最新推荐文章于 2025-05-26 12:38:52 发布

weixin_34210740

最新推荐文章于 2025-05-26 12:38:52 发布

阅读量3k

点赞数

CC 4.0 BY-SA版权

文章标签： javascript 前端框架前端 ViewUI

原文链接：https://segmentfault.com/a/1190000011812724

介绍了一个基于layui的树形表格插件treetable，该插件扩展了layui的树形菜单功能，提供了丰富的配置选项以满足不同场景的需求。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

最新版本是基于layui v2.2.3, 附件中有layui v1.0.7

代码地址

Gitee: https://gitee.com/shaojiepeng...
Github: https://github.com/shaojiepen...

demo地址

https://shaojiepeng.github.io...

图片描述

介绍

首先介绍一下layui，是一个模块化前端UI框架，遵循原生HTML/CSS/JS的书写与组织形式，门槛极低，拿来即用。
前段时间，自己闲来写一个后端管理系统，引进了layui，使用了树形菜单的内置模块，可是该功能并未完全满足需求。由于layui是开源包，为满足需求，故基于layui-tree写了一个treetable.

使用

页面元素

<div id="demo"></div>

js代码

var layout = [
        {name: '菜单名称', treeNodes: true, headerClass: 'value_col', colClass: 'value_col', style: 'width: 60%'}
];
layui.use(['tree', 'layer', 'form'], function(){
          var layer = layui.layer, $ = layui.jquery;
          var form = layui.form();
      
          layui.treeGird({
            elem: '#demo',   //传入元素选择器
            nodes: [
                      {
                          "id": "1",
                          "name": "父节点1",
                          "children": [
                              {
                                  "id": "11",
                                  "name": "子节点11"
                              },
                              {
                                  "id": "12",
                                  "name": "子节点12"
                              }
                          ]
                      },
                      {
                          "id": "2",
                          "name": "父节点2",
                          "children": [
                              {
                                  "id": "21",
                                  "name": "子节点21",
                                  "children": [
                                      {
                                          "id": "211",
                                          "name": "子节点211"
                                      }
                                  ]
                              }
                          ]
                      }
            ],
            layout:layout
        });
    });

页面展示

方法语法：layui.treeGird(options)

options是一个对象参数，可支持的key如下表

节点数据格式nodes nodes

列表头元素layout layout

自定义的render

var layout = [
    {name: '菜单名称', treeNodes: true, headerClass: 'value_col', colClass: 'value_col', style: 'width: 60%'},
    {name: '操作', headerClass: 'value_col', colClass: 'value_col', style: 'width: 20%', render: function(row) {
        return '<a class="layui-btn layui-btn-danger layui-btn-mini" onclick="del('+row.id+')"><i class="layui-icon">&#xe640;</i> 删除</a>';   //列渲染
    }},
];

效果如下：

总结灵感来源layui，感谢layui的开源。