tree组件前端实现

最新推荐文章于 2024-04-22 19:26:15 发布

迟早嘚秃

最新推荐文章于 2024-04-22 19:26:15 发布

阅读量873

点赞数

文章标签： easyui javascript

本文链接：https://blog.csdn.net/m0_54067126/article/details/120260830

版权

easyui中的tree组件

一、tree的使用（两种方法)

一

树控件使用

元素定义。标签能够定义分支和子节点。节点都定义在
- 列表内的
- 元素中。以下显示的元素将被用作树节点嵌套在
  - 元素中。

<ul id="tt" class="easyui-tree">  
    <li>  
        <span>Folder</span>  
        <ul>  
            <li>  
                <span>Sub Folder 1</span>  
                <ul>  
                    <li>  
                        <span><a href="#">File 11</a></span>  
                    </li>  
                    <li>  
                        <span>File 12</span>  
                    </li>  
                    <li>  
                        <span>File 13</span>  
                    </li>  
                </ul>  
            </li>  
            <li>  
                <span>File 2</span>  
            </li>  
            <li>  
                <span>File 3</span>  
            </li>  
        </ul>  
    </li>  
    <li>  
        <span>File21</span>  
    </li>  
</ul>

缺陷：数据是提前写死死的无法变通，代码多且繁琐

二

①jsp页面：
在api里面有代码，导入easyui的文件
树控件也可以定义在一个空

元素中并使用Javascript加载数据。
easyui里面提供了方法可以读取指定文件的内容（josn)

<%@ 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">
<link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/static/js/jquery-easyui-1.5.1/themes/default/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> 
 
<title>书籍后管主界面</title>
</head>
<body>
<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:'west',title:'菜单管理',split:true" style="width:200px;">
	<ul id="stuMenu"></ul>  
 
    </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>  
</body>
</html>

②在demo文件中找到tree

③.打开tree文件夹，将tree_data1.josn文件复制到WebContent中
这是使用者提供的josn文件我们使用
josn文件中的只能读取这些属性
每个节点都具备以下属性：
id：节点ID，对加载远程数据很重要。
text：显示节点文本。
state：节点状态，‘open’ 或 ‘closed’，默认：‘open’。如果为’closed’的时候，将不自动展开该节点。
checked：表示该节点是否被选中。
attributes: 被添加到节点的自定义属性。
children: 一个节点数组声明了若干节点。

[{
	"id":1,
	"text":"My Documents",
	"children":[{
		"id":11,
		"text":"Photos",
		"state":"closed",
		"children":[{
			"id":111,
			"text":"Friend"
		},{
			"id":112,
			"text":"Wife"
		},{
			"id":113,
			"text":"Company"
		}]
	},{
		"id":12,
		"text":"Program Files",
		"children":[{
			"id":121,
			"text":"Intel",
			"attributes":{
				"url":"demo1.jsp",
				"p2":"Custom Attribute2"
			}
		},{
			"id":122,
			"text":"Java",
			"attributes":{
				"url":"demo2.jsp",
				"p2":"Custom Attribute2"
			}
		},{
			"id":123,
			"text":"Microsoft Office"
		},{
			"id":124,
			"text":"Games",
			"checked":true
		}]
	},{
		"id":13,
		"text":"index.html"
	},{
		"id":14,
		"text":"about.html"
	},{
		"id":15,
		"text":"welcome.html"
	}]
}]

⑤在js目录下建一个文本 index.js建立连接，然后在页面引入刚刚的josn文件

 <script type="text/javascript" src="${pageContext.request.contextPath }/static/js/index.js"></script> 
$(function(){
$('#stuMenu').tree({    
    url:'tree_data1.json',
}); 
})

运行结果：

二.tabs控件
①将代码复制在内容区

<div id="stuTabs" class="easyui-tabs" style="width:100%;height:100%;">   
		</div> 
②在js文件里面导入代码
csharp
$('#stuMenu').tree({    
// 文件路径名字
	    url:'tree_data1.json',
	   
	    //点击事件
	    onClick: function(node){
  //	判断当前将要打开的tab页是否存在
	    	var exists=$('#stuTabs').tabs('exists',node.text);
	    	if(exists){
	    	//如果存在就跳转到之前打开过的页面不在重复打开
	    		$('#stuTabs').tabs('select',node.text);
	    	}else{
	    		//生成新的tab页面
	    		$('#stuTabs').tabs('add',{    
		    	    title:node.text,    
		    	    //导入一个想要生成的页面
		    	    content:'<iframe width="100%" height="100%" src="'+node.attributes.url+'"></iframe>',    
		    	    closable:true,    
		    	    tools:[{    
		    	        iconCls:'icon-mini-refresh',    
		    	        handler:function(){    
		    	            alert('refresh');    
		    	        }    
		    	    }]    
		    	});  
	    	}
	    	
		}
	});  
})

运行结果：
在这里插入图片描述

下次在接着讲如何讲后台数据库的数据转化为josn文件让前端的easyui中的组件识别

迟早嘚秃

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
tree组件前端实现

easyui中的tree组件一、tree的使用（两种方法)一树控件使用元素定义。标签能够定义分支和子节点。节点都定义在列表内的元素中。以下显示的元素将被用作树节点嵌套在元素中。<ul id="tt" class="easyui-tree"> <li> <span>Folder</span> <ul> <li> &l
复制链接

扫一扫