Easyui入门（Tree简介）

最新推荐文章于 2022-05-07 20:50:50 发布

秃头程序汪

最新推荐文章于 2022-05-07 20:50:50 发布

阅读量604

点赞数

分类专栏： easyui 文章标签： easyui

本文链接：https://blog.csdn.net/qq_45464930/article/details/106885719

版权

本文介绍了Easyui的Tree组件，包括其概念、展示树形结构数据的功能。通过两个解决方案展示了如何创建Tree，强调了动态加载数据的重要性，并提供了一个从数据库获取数据并转化为json的实例。最后提醒在创建js文件时注意文件名后缀。

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

前言

今天要为大家分享的博客知识点呢，是Easyui中的Tree简介，逐步开始Easyui的入门啦！

Easyui的初步学习链接

Tree组件简介

1、Tree组件概念

树（tree）在网页中以树形结构显示分层数据。它向用户提供展开、折叠、拖拽、编辑和异步加载功能。

2、案例

例子：假如我要展示以下这张图片左边的树形结构，该怎么做呢？

解决方案1：

新建一个index.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>   
<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;">
		<div style="margin:20px 0;"></div>
	<div class="easyui-panel" style="padding:5px">
		<ul class="easyui-tree">
			<li>
				<span>My Documents</span>
				<ul>
					<li data-options="state:'closed'">
						<span>Photos</span>
						<ul>
							<li>
								<span>Friend</span>
							</li>
							<li>
								<span>Wife</span>
							</li>
							<li>
								<span>Company</span>
							</li>
						</ul>
					</li>
					<li>
						<span>Program Files</span>
						<ul>
							<li>Intel</li>
							<li>Java</li>
							<li>Microsoft Office</li>
							<li>Games</li>
						</ul>
					</li>
					<li>index.html</li>
					<li>about.html</li>
					<li>welcome.html</li>
				</ul>
			</li>
		</ul>
	</div>
			</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>

首先找到jquery-easyui-1.5.1这个文件，也就是下面我圈起来的这个：

在这里插入图片描述
然后再打开该文件夹，找到该文件夹下的demo文件夹，再找到demo文件夹下的tree文件夹，然后就会看到这些文件：

在这里插入图片描述
然后找到basic.html文件，以记事本的形式去复制代码：

在这里插入图片描述
然后把下面这一段代码复制过来：

<div style="margin:20px 0;"></div>
  <div class="easyui-panel" style="padding:5px">
	<ul class="easyui-tree">
	 <li>
	   <span>My Documents</span>
		<ul>
		 <li data-options="state:'closed'">
			<span>Photos</span>
			  <ul>
				<li>
				 <span>Friend</span>
				</li>
				<li>
				<span>Wife</span>
				</li>
				<li>
				<span>Company</span>
				</li>
				</ul>
				</li>
				<li>
				<span>Program Files</span>
				<ul>
				<li>Intel