layUI树形菜单后端动态加载数据和遇到的bug_layui树形菜单加载全部数据-优快云博客

本文链接：https://blog.youkuaiyun.com/JiangHu_Java/article/details/107070851

本文详细介绍了layUI树形菜单如何动态加载MySQL数据，包括基本功能演示、实现步骤及遇到的问题。在实现动态加载时，由于数据格式问题出现bug，错误显示为'未命名'节点。解决方法包括修改源码或调整节点实体类的标题属性为'title'。此外，强调了前端开发中需要注意的细节，如缓存清理和遵循框架文档。

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

前言

这篇博客主要讲述了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
    ,