tree后台实现代码以及结果

最新推荐文章于 2021-09-13 12:04:41 发布

꧁༺心如止水༻꧂

最新推荐文章于 2021-09-13 12:04:41 发布

阅读量457

点赞数

分类专栏：笔记文章标签： java

本文链接：https://blog.csdn.net/qq_47906421/article/details/106925063

版权

本文档介绍了如何使用Java实现后台生成树形菜单，包括导入必要的jar包，引入js和css库，编写js代码与后台交互，以及从数据库中获取数据并转化为tree_data1.json格式的过程。

摘要由CSDN通过智能技术生成

tree后台实现代码以及结果

前言

Tree（树）——实现多级别菜单的展示以及与后台数据的交互。接着上一篇实现tree后台。

一、tree后台实现

1.1 导入jar包

在这里插入图片描述

1.2 引入js、css库

在这里插入图片描述
路径要对

1.3 写div用来存放菜单树

<body class="easyui-layout">
	<div data-options="region:'north',border:false"
	 style="height:60px;background:#B3DFDA;padding:10px">xxx管理系统
	 </div>
	<div data-options="region:'west',split:true,title:'West'"
	 style="width:150px;padding:10px;">
		<ul id="tt"></ul>  
	 </div>
	<div data-options="region:'east',split:true,collapsed:true,title:'East'"
	 style="width:100px;padding:10px;">east region
	 </div>
	<div data-options="region:'south',border:false"
	 style="height:50px;background:#A9FACD;padding:10px;">版权所有
	 </div>
	<div data-options="region:'center',title:'Center'">
	</div>
	</body>

1.4 编写js代码，与后台进行交互

代码如下：

$(function(){
   
	$('#tt').tree({
       
	    url:'tree_data1.json'   
	});  
})

1.5 与index.jsp同级

在这里插入图片描述

1.6 界面结果图

在这里插入图片描述

二、如何把数据库中表中的数据实现成tree_data1.json的代码的一样

数据库表数据：
在这里插入图片描述
tree_data1.json内的代码如下：

[{
   
	"id":1,
	"text":"My Documents",
	"children":[{
   
		"id":11,
		"text":"Photos",
		"state":"closed",
		"children":[{
   
			"id":111,
			"text":"Friend"
		},{
   
			"id":112,
			"text":"Wife"
		},{
   
			"id":113,
			"text":"Company"
		}]
	},{
   
		"id":12,
		"text":"Program Files",
		"children":[{
   
			"id":121,
			"text":"Intel"
		},{
   
			"id":122,
			"text":"Java",
			"attributes":{
   
				"p1":"Custom Attribute1",
				"p2":"Custom Attribute2"
			}
		},{
   
			"id":123,
			"text":"Microsoft Office"
		},{
   
			"id":124,
			"text":"Games",
			"checked":true
		}]
	},{
   
		"id":13,
		"text":"index.html"
	},{
   
		"id":14,
		"text":"about.html"
	},{
   
		"id":15,
		"text":"welcome.html"