layUI树形菜单后端动态加载数据和遇到的bug

关注

VIP免费原创最新推荐文章于 2026-03-11 17:20:11 发布 3.8k 阅读 AI 写同款· GEO 优化 ›

【LayUI】LayUI拓展组件：TreeSelect树形下拉选择器基于 layui 的树形下拉选择器。支持异步加载，提供点击回调函数，提供设置占位符、选中节点等方法。组件下载地址：https://gitee.com/sang93/treeselect。阅读详情

layUI树形菜单后端动态加载数据

前言
基本功能演示
实现步骤
- 动态加载数据
总结

前言

这篇博客主要讲述了layUI树形菜单的各种形态以及配合MySQL数据库中的数据动态加载节点！

基本功能演示

在这里插入图片描述
这上面是一个比较全面的树形菜单，下面是有关它的详述图：

实现步骤

第一步肯定是要导入layUI的包啦！

没有的小伙伴们火速下载熬：
https://www.layui.com/

下载完是这样的：
在这里插入图片描述

啊有一个注意事项：我在观看layUI的示例时，我只在其中看到了两个导入的路径：

 <link rel="stylesheet" href="static/layui/css/layui.css"  media="all">
 <script src="static/layui/layui.js" charset="utf-8"></script>

但是，如果你在下载的文件里面只把layui.css和layui.js放入项目当中，如下图：

在这里插入图片描述

不仅效果出不来还会报错哦！这里可以看到报的是一个404错误

在这里插入图片描述
点进去会看到这样子一个，我大胆猜测使用layui中的tree组件是需要一个tree.js，但是这个文件在我导进去的两个文件中没有，那么为什么官方示例却又ok呢？

因为爱情？不不不，这边我找到两种解决方法：

第一，像官方示例中一样导入layui.js，但是导文件的时候将整个layui导进去。

在这里插入图片描述

在这里插入图片描述
第二，导入layui.all.js这个js文件，看到中间那个all就知道它比layui.js要高大上啦嘿嘿嘿，它会比layui.js更加全一点，我也不知道为啥要这样，我看到效果有就完了！

在这里插入图片描述
具体实现代码：

通过 tree.render() 方法指定一个元素，便可快速创建一个 tree 实例，我这边是模拟了一串数据，后面讲讲动态加载树形菜单熬：

<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
  <meta charset="utf-8">
  <title>Layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="static/layui/css/layui.css"  media="all">
</head>
<body>
<script src="static/layui/layui.js" charset="utf-8"></script>
 <div id="test1"></div>

<script>
layui.use('tree', function(){
	var tree = layui.tree;
  //模拟数据
    var data = [{
    title: '一级1'
    ,id: 1
    ,field: 'name1'
    ,checked: true
    ,spread: true
    ,children: [{
      title: '二级1-1 可允许跳转'
      ,id: 3
      ,field: 'name11'
      ,href: 'https://www.layui.com/'
      ,children: