easyui的tree后台实现

最新推荐文章于 2022-05-15 13:49:52 发布

涵ヂ

最新推荐文章于 2022-05-15 13:49:52 发布

阅读量208

点赞数

本文链接：https://blog.csdn.net/TZyybhs/article/details/106885302

版权

tree后台实现

接上一次的easyui入门，来实现tree的后台

在lib包中导入jar包在这里插入图片描述
jsp代码

<%@ 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 http-equiv="Content-Type" content="text/html; charset=UTF-8">
<!-- 写全局样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/easyui.css">   
<!-- 定义图标的样式 -->
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css">   

<!--组件库源文件的js文件  -->
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>  
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>   
<script type="text/javascript" 
		src="${pageContext.request.contextPath }/static/js/index.js"></script>   

<title>登录后的主界面</title>
</head>
<body class="easyui-layout">

		<div data-options="region:'north',border:false" 
			style="height:60px;background:#B3DFDA;padding:10px">网上书城</div>
		<div data-options="region:'west',split:true,title:'目录'" 
			style="width:150px;padding:10px;">
			<ul id="tt"></ul>  
			</div>
		<div data-options="region:'east',split:true,collapsed:true,title:'右边'" 
			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:'内容'"></div>

</body>
</html>

在js文件夹下创建一个 File，命名为index.js
在这里插入图片描述
index.js的代码

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

在与index.jsp同一级中，放入一 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"
	}]
}]

运行的界面结果图
在这里插入图片描述
怎么把数据库中的表中的数据变成像tree_data1.json的代码的一样

在src中创建一个util包，放入工具类
BuildTree.java类

package com.tang.util;




import java.util.ArrayList;
import java.util.HashMap;
import java.util.

最低0.47元/天解锁文章

涵ヂ

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
easyui的tree后台实现

tree后台实现接上一次的easyui入门，来实现tree的后台在lib包中导入jar包jsp代码<%@ 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"&g
复制链接

扫一扫