mysql关系型数据库生成树形结构，Layui页面渲染树型结构图（详细）

最新推荐文章于 2025-04-27 11:34:36 发布

超级无敌宇宙CV战士

最新推荐文章于 2025-04-27 11:34:36 发布

阅读量2.8k

点赞数 1

CC 4.0 BY-SA版权

分类专栏： layui 前端后台管理文章标签： layui 树结构 mysql 前端

本文链接：https://blog.csdn.net/weixin_48845078/article/details/121570515

前端同时被 3 个专栏收录

5 篇文章

订阅专栏

layui

4 篇文章

订阅专栏

后台管理

4 篇文章

订阅专栏

本文介绍了如何使用DTree组件在网页中展示由MySQL查询得到的数据。通过设置`dataFormat: 'list'`，无需层级结构即可渲染树状图，简化了后端数据处理。示例代码展示了如何配置DTree，包括数据加载、复选框功能及节点点击事件。同时，分享了一个MySQL查询示例，生成了DTree所需的数据格式。最后，展示了实现的效果并提供了参考资料。

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

# 前言项目使用的和本文相关的技术：Layui ，Mysql ；

在项目中需要用到树形结构来展示某些数据。通过查阅树状图相关资料发现
树状图对数据的格式有严格的要求，不仅是id，父节点，子节点，最为关键的是数据需要是层级结构。而使用Mysql并不支持查询出的结果是层级结果（可以直接渲染树状图），后端需要再次对数据进行处理，由于懒惰（不想写数据处理）。

发现了名叫DTree的树形菜单组件，而它所具有的功能很满足当前的使用。所以就是使用它实现了属性图的展示和使用。

一、学使用DTree

上代码（详细说明注释见）

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>树组件</title>
  <!--引入layuicss-->
  <link rel="stylesheet" href="../layui/css/layui.css">
  <!--引入dtree的css-->
  <link rel="stylesheet" href="../Dtree/layui_ext/dtree/dtree.css">
  <link rel="stylesheet" href="../Dtree/layui_ext/dtree/font/dtreefont.css">
</head>
<body>
	<!--加载树的元素-->
	<ul id="demoTree" class="dtree" data-id="0"></ul>
	<!--按钮-->
	<button class="layui-btn layui-btn-normal" id="btn">提交</button>
	<!--引入layui js-->
  <script src="../layui/layui.js"></script>
  <script>
  	
  	/*加载dtree模块  注意；路径不能错*/
  	layui.extend({
    dtree: '../Dtree/layui_ext/dtree/dtree'   
  	}).use(['dtree','layer','jquery'], function(){
    //引用layui模块
    var dtree = layui.dtree,
    layer = layui.layer,
    $ = layui.jquery;
    
    //静态数据测试用
    var data=[{"checkArr":"{\"checked\":\"1\"}","id":1,"title":"用户管理","parentId":0},{"checkArr":"{\"checked\":\"1\"}","id":2,"title":"用户信息","parentId":1},{"checkArr":"{\"checked\":\"1\"}","id":5,"title":"管理信息","parentId":1},{"checkArr":"{\"checked\":\"1\"}","id":7,"title":"检测报告","parentId":0},{"checkArr":"{\"checked\":\"1\"}","id":8,"title":"遗传分析","parentId":7},{"checkArr":"{\"checked\":\"1\"}","id":9,"title":"基因测序","parentId":7},{"checkArr":"{\"checked\":\"1\"}","id":12,"title":"类型管理","parentId":7},{"checkArr":"{\"checked\":\"1\"}","id":13,"title":"医患关联","parentId":0},{"checkArr":"{\"checked\":\"1\"}","id":14,"title":"医患关联","parentId":13},{"checkArr":"{\"checked\":\"1\"}","id":15,"title":"医院管理","parentId":0},{"checkArr":"{\"checked\":\"1\"}","id":16,"title":"医院管理","parentId":15},{"checkArr":"{\"checked\":\"1\"}","id":17,"title":"权限分配","parentId":0},{"checkArr":"{\"checked\":\"1\"}","id":18,"title":"权限管理","parentId":17}];
    
		//初始化树
    var DemoTree = dtree.render({
      elem: "#demoTree" //对应元素id
      ,data: data // 使用data加载
      ,dataStyle: "layuiStyle"//使用layui风格的数据格式
      ,dataFormat:"list"//数据为集合类型  
      ,response:{message: "msg",statusCode:200}//修改response中返回数据的定义
      ,icon: "2"  //修改二级图标样式
      ,checkbar: true //是否显示复选框
      ,initLevel: "1" //默认为2 树状图收缩状态
      ,none: "数据加载异常，请重新尝试？" //没有加载数据时提示信息
//	  ,url:"../Dtree/layui_ext/json/list_.json" // 使用url加载（可与data加载同时存在）
    });
    // 绑定节点点击
    dtree.on("node('demoTree')" ,function(obj){
      //点哪个obj就是哪个
    });
    
    // 点击按钮获取所有选中节点值
	$("#btn").click(function(){
		//获取选中的元素
	  var params = dtree.getCheckbarNodesParam("demoTree");
	  //打印
	  console.log(JSON.stringify(params));
	  //这里可以进行向后端传数据
	  $.ajax({
		//进行异步调用 注意：传递的数据要转json格式 -->JSON.stringify(数据)
		ajax内容
		});
	});
  });
  </script>
</body>
</html>

引入结构

在这里插入图片描述

说明 dataFormat:“list”

主要是使用了

var DemoTree = dtree.render({
     //省略其他属性
      ,dataFormat:"list"//数据为集合类型  
      ,dataStyle: "layuiStyle"//使用layui风格的数据格式
      ,checkbar: true //是否显示复选框
      
    });

dataFormat:“list” ：使用集合类型进行树状图渲染，当然还支持其他类型的的数据结构。详细见参考。
不用使用层级结构就能进行树状图的渲染。这就是使用它的理由！

dataStyle: “layuiStyle” ： url请求获取到的数据是layui风格的数据

checkbar: true ：树状图是否开启复选模式，

要想达到复选效果数据中，必须有 “checkArr”: [{“type”: “0”, “checked”: “0”}], // 加载复选框必填（我使用中没使用type）

二、使用MySQL查询结果

说明

需要获取到树形组件所能识别的数据格式：
这里使用了
（节点id id，
节点名称 title ，
父级节点 parentId，
成为复选框必须要有的 checkArr ）。

1，字段名起别名

2，别名不够用就用字段拼接

-- 要实现树状图必须要有的字段
-- 字段名称对不上的起别名
SELECT a.id, a.menu_name title ,a.parent_id parentId,
-- 起别名达不到想要的效果就来拼接
CONCAT('{\"checked\":\"',
-- 判断拼接 为复选框默认选中做铺垫 
CASE WHEN (ISNULL(ar.role_id)=1) THEN  '0' ELSE '1' END
,'\"}') checkArr 
-- 查询的表
from authority a 
--左连接查询其他表 
LEFT JOIN (SELECT * FROM authority_role WHERE role_id=4) ar ON a.id=ar.authority_id
-- 进行排序，最好是树形结构从上往下的顺序 （不是这样的顺序，还没尝试） 
WHERE a.state=0 ORDER BY id ;
# 以上sql查询的数据是 ： 查询角色拥有的权限，并生成树状图可识别的格式 （可变参数rid）