easyui_02(tree前端工作)

怣795

于 2022-05-06 19:34:34 发布

阅读量563

点赞数 1

文章标签： easyui 前端 javascript

本文链接：https://blog.csdn.net/qq_65716482/article/details/124616779

版权

一、思维导图：

二、tree控件的使用：

1、树控件也可以定义在一个空<ul>元素中并使用Javascript加载数据

2、每个节点都具备以下属性：

id：节点ID，对加载远程数据很重要。
text：显示节点文本。
state：节点状态，'open' 或 'closed'，默认：'open'。如果为'closed'的时候，将不自动展开该节点。
checked：表示该节点是否被选中。
attributes: 被添加到节点的自定义属性。
children: 一个节点数组声明了若干节点。

案例：

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!-- 引入公共页面  包含 -->
<%@ include file="common/head.jsp"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	//页面载入函数
	$(function() {
		//加载树的数据 ajax
		$('#myTree').tree({
			url : ctx + '/data/tree_data1.json', //请求地址 servlet 
			animate : true, //展开或者收缩节点显示动画效果
			onDblClick : function(node) {//节点=对象
				//alert(node.text + "  " + node.id + "  " + node.state); // 在用户双击的时候提示
				//alert(node.url);
				//判断是否是子节点
				//拿到的是所有的后代节点的集合
				var nodes = $('#myTree').tree('getChildren',node.target);
				//alert(nodes.length);
				if(nodes.length==0){
					//判断选项卡是否存在
					var f = $('#myTab').tabs('exists',node.text);
					if(!f){//说明不存在
						//就新增一个选项卡
						$('#myTab').tabs('add',{ //iconCls:'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: 85px; text-align: center;">
		<h1>书籍后台管理</h1>
	</div>
	<div data-options="region:'south',split:true"
		style="height: 68px; 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-bullet-home'" title="首页" style="padding: 10px; display: none;">
			     <img src="images/lb1.png" style="width: 100%; height: 100%; " >
			</div>
			
		</div>

	</div>
</body>
</html>

效果如下：

三、easyui图标的使用：

在js中加入

在body中加入

四、tabs控件的使用：

1、选项卡显示一批面板。但在同一个时间只会显示一个面板。每个选项卡面板都有头标题和一些小的按钮工具菜单，包括关闭按钮和其他自定义按钮。

在body里建一个div

 <!-- 中间的tabs控件 -->
		<div id="myTab" class="easyui-tabs" style="width: 100%; height: 100%;">
			<div data-options="iconCls:'icon-bullet-home'" title="首页" style="padding: 10px; display: none;">
			     <img src="images/lb1.png" style="width: 100%; height: 100%; " >
			</div>

js里放

//就新增一个选项卡
						$('#myTab').tabs('add',{ //iconCls:'icon-mini-refresh',   
						    title:node.text,     //标题
						    content:'<iframe scrolling="no" frameborder="0" src="'+node.url+'" width="100%" height="100%"></iframe>',   //内容
						    closable:true,       //是否可以关闭
						    iconCls:node.iconCls //图标
						});

怣795

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyui_02(tree前端工作)

一、思维导图：二、tree控件的使用：1、树控件也可以定义在一个空<ul>元素中并使用Javascript加载数据2、每个节点都具备以下属性： id：节点ID，对加载远程数据很重要。 text：显示节点文本。 state：节点状态，'open'或 'closed'，默认：'open'。如果为'closed'的时候，将不自动展开该节点。 checked：表示该节点是否被选中。 attributes: 被添加到节点的自定义属性。 .
复制链接

扫一扫