easyui之tree、tabs前端实现

最新推荐文章于 2023-04-24 09:02:13 发布

马六安

最新推荐文章于 2023-04-24 09:02:13 发布

阅读量125

点赞数 2

文章标签： easyui

本文链接：https://blog.csdn.net/boy_10/article/details/120242382

版权

tree树形控件

树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。

在树形控件中每个节点都具备以下属性：

id：节点ID，对加载远程数据很重要。

text：显示节点文本。

state：节点状态，'open' 或 'closed'，默认：'open'。如果为'closed'的时候，将不自动展开该节点。

checked：表示该节点是否被选中。

attributes: 被添加到节点的自定义属性。

children: 一个节点数组声明了若干节点。

创建Tree得两种方式：

①样式缺陷②不好做数据的渲染，树形结构的动态显示

1. <ul id="tt" class="easyui-tree">  
2.   <li>  
3.     <span>Folder</span>  
4.     <ul>  
5.       <li>  
6.         <span>Sub Folder 1</span>  
7.         <ul>  
8.           <li>  
9.             <span><a href="#">File 11</a></span>  
10.           </li>  
11.           <li>  
12.             <span>File 12</span>  
13.           </li>  
14.           <li>  
15.             <span>File 13</span>  
16.           </li>  
17.         </ul>  
18.       </li>  
19.       <li>  
20.         <span>File 2</span>  
21.       </li>  
22.       <li>  
23.         <span>File 3</span>  
24.       </li>  
25.     </ul>  
26.   </li>  
27.   <li>  
28.     <span>File21</span>  
29.   </li>  
30. </ul>

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

导入tree_data1.json到WebContent目录下

$(function() {

$('#stu').tree({

url: 'tree_data1.json'

})

运行结果：

Tabs（选项卡）

通过标签创建选项卡

通过标签可以更容易的创建选项卡，我们不需要写任何Javascript代码。只需要给<div/>标签添加一个类ID'easyui-tabs'。每个选项卡面板都通过子<div/>标签进行创建，用法和panel(面板)相同。

实例：

需求：

点击左侧菜单显示右侧tab
不能打开重复的tab
对于已经打开的选项卡，被点击时应该选中

修改tree_data1.json对应的内容（以Intel和Java举例）在attributes里面修改成要打开的界面

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">
<title>书籍后管主界面</title>
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/black/easyui.css">   
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/icon.css">   
<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>  
<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/index.js"></script>  
</head>
 
<body class="easyui-layout">   
    <div data-options="region:'north',title:'网上书城',split:true" style="height:100px;"></div>   
    <div data-options="region:'south',title:'版权信息',split:true" style="height:100px;"></div>   
    <!-- <div data-options="region:'east',iconCls:'icon-reload',title:'East',split:true" style="width:100px;"></div>    -->
    <div data-options="region:'west',title:'菜单管理',split:true" style="width:200px;">
   <ui id="stuMenu"></ui>
    </div>  
     
    <div data-options="region:'center',title:'内容'" style="padding:5px;background:#eee;">
    <div id="stuTabs" class="easyui-tabs" style="width:100%;height:100%;">   
    
</div>  
    </div>   
</body> 
</html>

index.js界面（给index.jsp添加事件）

$(function(){
	$('#stuMenu').tree({    
	    url:'tree_data1.json'  ,
	    onClick: function(node){
//		alert(node.text);  // 在用户点击的时候提示
			// add a new tab panel    
	    	var exists = $('#stuTabs').tabs('exists',node.text);
	    	if(exists){
	    		$('#stuTabs').tabs('select',node.text);    
	    	}else{
	    			
	    		$('#stuTabs').tabs('add',{    
				    title:node.text,    
				    content:'<iframe width="100%" height="100%" src="'+node.attributes.url+'"></iframe>',    
				    closable:true,    
				});  
	    	}
		
	    }
	});  
})

最后得项目应该是下面得结构：

页面效果：

马六安

关注

2
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
easyui之tree、tabs前端实现

tree树形控件树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。在树形控件中每个节点都具备以下属性：id：节点ID，对加载远程数据很重要。text：显示节点文本。state：节点状态，'open' 或 'closed'，默认：'open'。如果为'closed'的时候，将不自动展开该节点。checked：表示该节点是否被选中。attributes: 被添加到节点的自定义属性。children: 一个节点数组声明了若干节点
复制链接

扫一扫