tree后台实现代码以及结果

最新推荐文章于 2022-01-22 00:58:05 发布

VIP文章 ꧁༺心如止水༻꧂

最新推荐文章于 2022-01-22 00:58:05 发布

阅读量303

点赞数

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

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

版权

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",

最低0.47元/天解锁文章

꧁༺心如止水༻꧂

关注

0
点赞
踩
2

收藏

觉得还不错? 一键收藏
0
评论
tree后台实现代码以及结果

tree后台实现前言Tree（树）——实现多级别菜单的展示以及与后台数据的交互。接着上一篇实现tree后台。导入jar包引入js、css库路径要对写div用来存放菜单树<body class="easyui-layout"> <div data-options="region:'north',border:false" style="height:60px;background:#B3DFDA;padding:10px">xxx管理系统 </div&
复制链接

扫一扫