easyui02(tree前端工作)

南山有谷堆

已于 2022-05-10 22:53:42 修改

阅读量164

点赞数

文章标签： easyui

于 2022-05-09 21:31:59 首次发布

本文链接：https://blog.csdn.net/weixin_63531940/article/details/124675904

版权

本文介绍了如何在前端工作中使用EasyUI框架，包括树形控件(tree)的JSON数据导入，图标资源的引用，以及tabs组件的布局和配置。示例代码展示了在后台书籍管理界面中，如何结合这些元素来构建一个简洁的用户界面。

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

嗨喽大家好！今天咱们来讲一下关于tree前端工作的知识

话不多说，直接上图！

一、tree空间的使用

首先创建一个文件夹把我们要用的JSON格式的模块导入

tree_data1.json在我们之前下载的那个easyui文件夹里的tree里面

然后我们导入要用的tree代码

然后使用即可！

二、easyui图标的使用

下载好的easyui文件夹里面有相对应的图标文件夹，我们可以在里面使用其图标进行修饰界面

三、tabs控件的使用

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<%@ include file="common/head.jsp"%>
<!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">
<title>Insert title here</title>
</head>
<body class="easyui-layout">
	<div data-options="region:'north',split:true"
		style="height: 85px; text-align: center;">
		<h1>后台书籍管理</h1>
	</div>
	<div data-options="region:'south',split:true"
		style="height: 70px; text-align: center;">
		<b>&copy;玉渊工作室,未经允许不可随意使用</b>
	</div>
	<div data-options="region:'west',title:'功能导航${ctx }',split:true"
		style="width: 150px;">
		<!-- 左侧tree控件 -->
		<ul id="myTree" class="easyui-tree">

		</ul>

	</div>
	<div data-options="region:'center'" style="padding: 5px; background: #fff;">
		<!-- 中间的tab控件 -->
		<div id="myTab" data-options="pill:true" class="easyui-tabs" style="width:100%; height:100%;">
			<div data-options="iconCls:'icon-application-home'" title="首页" style="padding: 10px; display: none;">
				<img  src="images/lb4.jpeg" width=100% height=100%>
			</div>
		</div>
	</div>
</body>
</html>

这就是上面页面的代码；还有一些功能的代码下次再说哈！

那么今天就到这里啦！如果大家有什么问题可以及时跟博主沟通或者留言哈！

咱们下次再见！