easyUI的tree后台实现

最新推荐文章于 2022-05-11 12:51:55 发布

青猫锅锅

最新推荐文章于 2022-05-11 12:51:55 发布

阅读量481

点赞数 1

分类专栏：笔记

本文链接：https://blog.csdn.net/qq_46964039/article/details/106898525

版权

本文介绍了如何使用easyUI创建前端tree框架，并详细讲解了如何实现tree的后台数据支持。通过导入jquery-easyui-1.5.1库，设置样式，创建js文件来定义tree控件。接着，展示了如何结合数据库数据，使用统一的节点结构类，后台导入必要的jar包和工具类，最终成功将tree结构与后台数据结合，呈现动态效果。

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

easyUI的tree后台实现

前言

今天所要实现的效果是tree的结构，实现的功能展开，折叠
需要实现的效果图
在这里插入图片描述

一、easyui入门手写前端框架图

1、首先我们应该想写出一个前端展示出来大致框架
导入一个文件jquery-easyui-1.5.1
在这里插入图片描述
想要调用jquery-easyui-1.5.1中的样式，应该要的代码
有些人存放的路径不同，那么就改一下路径就可以了

<!-- 全局样式 -->
<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/default/easyui.css">
<script type="text/javascript"
	src="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.1/jquery.min.js"></script>
<!-- 组件库源码的js文件 -->
<script type="text/javascript"
	src="${pageContext.request.contextPath}/static/js/jquery-easyui-1.5.1/jquery.easyui.min.js"></script>

再找一些你比较喜欢的框架样式
比如：

<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:'West'"
		style="width: 150px; padding: 10px;">west content</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;">可乐姐姐and七汐哥哥@qq.com.1506574857</div>
	<div data-options="region:'center',title:'Center'"></div>
</body>