easyui(tree树)

最新推荐文章于 2022-05-06 17:33:47 发布

陨落.190

最新推荐文章于 2022-05-06 17:33:47 发布

阅读量538

点赞数

文章标签： easyui javascript ecmascript

本文链接：https://blog.csdn.net/weixin_65795413/article/details/124607602

版权

本文介绍了EasyUI中tree控件的使用，包括导入json数据的步骤，以及如何添加图标。同时讲解了tabs控件的使用，特别是处理有子节点时的选项卡展示方式。

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

首先老样子先看思维导图：

所以我们分三个来讲：

一.tree控件的使用：当我们使用的tree控件的时候先要导入一个tree_data1.json的json文件然后在引用即可

代码如下：（注意路径）

//页面载入函数
	$(function() {
		//加载树的数据  ajax
		$('#myTree').tree({
			url : ctx + '/data/tree_data1.json', //请求地址
	
})
}

效果：

二.easyui图标的使用

我们只需要在tree_data1.json你想加的地方加上一个键和值

代码如下：

[
	{
		"id": 1,
		"text": "My Documents",
		"iconCls": "icon-heart",
		"children": [
			{
				"id": 11,
				"text": "Photos",
				"state": "closed",
				"children": [
					{
						"id": 111,
						"iconCls": "icon-heart",
						"text": "Friend"
					},
					{
						"id": 112,
						"iconCls": "icon-heart",
						"text": "Wife"
					},
					{
						"id": 113,
						"iconCls": "icon-heart",
						"text": "Company"
					}
				]
			},

效果如下：

三.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>
<script type="text/javascript">
	//页面载入函数
	$(function() {
		//加载树的数据  ajax
		$('#myTree').tree({
			url : ctx + '/data/tree_data1.json', //请求地址
			animate : true,//展开或者收缩节点显示动画效果
			onClick : function(node) {//节点=对象
				//alert(node.text); // 在用户双击的时候提示

				//判断是否是子节点
				var nodes = $('#myTree').tree('getChildren',node.target); // get checked nodes
				//alert(nodes.length)
				if(nodes.length==0){//说明没有子节点
					//判断选项卡是否存在
					var f = $('#myTab').tabs('exists', node.text); // 获取选择的面板
					if (!f) {//说明不存在
						//就新增一个选项卡
						$('#myTab').tabs('add', { //icon-mini-refresh 
							title : node.text, //标题
							content : node.text, //內容 
							closable : true, //是否可以关闭
							iconCls:node.iconCls//图标
						});
					} else {//存在就让其对应选中
						$('#myTab').tabs('select', node.text);
					}
				}
				
			}

		});
	})
</script>

</head>
<body class="easyui-layout">
	<div data-options="region:'north',split:true"
		style="height: 100px; text-align: center; background:">
		<h1>书籍后台管理${ctx}</h1>
	</div>
	<div data-options="region:'south',split:true"
		style="height: 70px; text-align: center;">
		<h4>&copy;沉山工作室版权所有，维权使用必究</h4>
	</div>
	<div data-options="region:'west',title:'功能导航',split:true"
		style="width: 150px;">
		<!-- 左侧tree控件 -->
		<ul id="myTree" class="easyui-tree">
		</ul>

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

			</div>


		</div>
</body>

</html>

效果如下：