easyui tree控件的使用 tabs控件的使用

本文详细介绍了如何在EasyUI框架中使用tree和tabs控件,从基本概念到核心代码展示,帮助开发者更好地理解和应用这两个组件。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

 tabs控件

tree控件 

 

部分代码

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html>
<!-- 引入公共包含页面 -->
<%@ include file="common/head.jsp"%>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
<script type="text/javascript">
	$(function() {

		/* 加载数的数据 */
		$('#myTree').tree({
			url : cp + '/data/tree_data1.json', //请求地址
			animate : true,//展开或搜节点显示动画效果
			onDblClick : function(node) {//节点=对象
				//alert(node.text + "  " + node.id + "  " + node.state); // 在用户点击的时候提示
				//判断是否是子节点
				//拿到的是所有后代节点的集合
				var nodes = $('#myTree').tree('getChildren',node.target);	
				if(nodes.length==0){//说明没有子节点
					//判断选项卡是否存在
					var f = $('#myTab').tabs('exists',node.text);
					if(!f){//说明不存在
						//不存在就新增一个选项卡
						$('#myTab').tabs('add',{    
						    title:node.text,	//标题   
						    content:node.text,  //内容
						    closable:true, 		//是否可以关闭
							iconCls:node.iconCls,  //图标
						});  	
					}else{//存在就让其对应选中
						var f = $('#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%;">
			<!-- padding 内间距 -->
			<div data-options="iconCls:'icon-bullet-home'" title="首页" style="padding: 10px; display: none">
				<img src="images/1.jpg" style="width: 100%; height: 100%">
			</div>
		</div>

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

核心代码  

<script type="text/javascript">
	$(function() {

		/* 加载数的数据 */
		$('#myTree').tree({
			url : cp + '/data/tree_data1.json', //请求地址
			animate : true,//展开或搜节点显示动画效果
			onDblClick : function(node) {//节点=对象
				//alert(node.text + "  " + node.id + "  " + node.state); // 在用户点击的时候提示
				//判断是否是子节点
				//拿到的是所有后代节点的集合
				var nodes = $('#myTree').tree('getChildren',node.target);	
				if(nodes.length==0){//说明没有子节点
					//判断选项卡是否存在
					var f = $('#myTab').tabs('exists',node.text);
					if(!f){//说明不存在
						//不存在就新增一个选项卡
						$('#myTab').tabs('add',{    
						    title:node.text,	//标题   
						    content:node.text,  //内容
						    closable:true, 		//是否可以关闭
							iconCls:node.iconCls,  //图标
						});  	
					}else{//存在就让其对应选中
						var f = $('#myTab').tabs('select',node.text);
					}
				}
							

			}

		});

	})
</script>

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值