HTML5教程

tree前端实现

本文主要是介绍tree前端实现，对大家解决编程问题具有一定的参考价值，需要的程序猿们随着小编来一起学习吧！

目标

 1、首先要在js文件专门建一个写js代码的file文件（index.js）

 

$(function(){
 $('#stuMenu').tree({    
     url:'tree_data1.json'  ,
     onClick: function(node){
//  alert(node.text);  // 在用户点击的时候提示
      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,    
    });  
      }
  
     }
 });  
})

将我们需要的tree-data1-json文件导入到web—content中

[{
 "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"
 }]
}]

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>

树控件使用<ul>元素定义。标签能够定义分支和子节点。节点都定义在<ul>列表内的<li>元素中。

<div class="easyui-panel" style="padding:5px">
		<ul class="easyui-tree">
			<li>
				<span>My Documents</span>
				<ul>
					<li data-options="state:'closed'">
						<span>Photos</span>
						<ul>
							<li>
								<span>Friend</span>
							</li>
							<li>
								<span>Wife</span>
							</li>
							<li>
								<span>Company</span>
							</li>
						</ul>
					</li>
					<li>
						<span>Program Files</span>
						<ul>
							<li>Intel</li>
							<li>Java</li>
							<li>Microsoft Office</li>
							<li>Games</li>
						</ul>
					</li>
					<li>index.html</li>
					<li>about.html</li>
					<li>welcome.html</li>
				</ul>
			</li>
		</ul>
	</div>

，我们将树控件定义在一个空<ul>元素中并使用Javascript加载数据。

即使用下面一行代码代替上面的一段代码

<ul id="tt"></ul> 

这篇关于tree前端实现的文章就介绍到这儿，希望我们推荐的文章对大家有所帮助，也希望大家多多支持为之网！
您可能喜欢
栏目导航