[JavaScript知识库]tree前端实现

一、目标

利用tree和tabs实现前端

1.制作树形菜单

在api中找到树形控件

?导入json格式文件

tree_data1.json

[{
	"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"
		},{
			"id":122,
			"text":"Java",
			"attributes":{
				"p1":"Custom Attribute1",
				"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文件中新建inde.js文件

$(function(){
	$('#tt').tree({    
	    url:'tree_data1.json'   
	}); 
})

?jsp界面引入index.js

<script type="text/javascript" src="${pageContext.request.contextPath }/static/js/index.js"></script> ?

?

2.制作选项卡

<div data-options="region:'center',title:'内容区'"
		style="padding: 5px; background: #eee;">
		<div id="stuTabs" class="easyui-tabs" style="width: 100%; height: 100%;">
		</div>
	</div>

新建连个jsp界面

3.点击左侧菜单显示右侧tabs

3.1给菜单添加点击事件

?

3.2调用tabs选项卡打开对应的页面

????????选项卡对应页面展示

	$('#stuMenu').tree({    
	    url:'tree_data1.json',
	    onClick: function(node){
			alert(node.text);  // 在用户点击的时候提示
			
			// add a new tab panel    
			$('#stuTabs').tabs('add',{    
			    title:'tabs.text',    
			    content:node.text+'Tab Body',    
			    closable:true,    
			    tools:[{    
			        iconCls:'icon-mini-refresh',    
			        handler:function(){    
			            alert('refresh');    
			        }    
			    }]    
			});  
		}

	}); 

4.优化

4.1 不能打开重复的tab页面? 解决方法：拿到目前所有打开的tab选项卡，与将要打开的选项卡做对比（exists）存在true ?不打开? ?存在false ?打开

4.2 对应已经存在的tab选项，被点击的时候应该默认被选中

$(function(){
	/**
	 * 1.tree方法是通过$.extends()拓展出来的
	 * 2.tree方法做的事情
	 * 	$('#tt').append("<li><span>File21</span></li>")
	 * 		.append("<li><span>File21</span></li>");
	 * 
	 * 需求：
	 * 	1.点击左侧显示右侧Tab
	 * 		1.1给菜单添加点击事件
	 * 		1.2调用tabs选项卡打开对应的页面
	 * 			选项卡打开
	 * 			选项卡对应页面展示
	 * 		1.3新建对应的打开
	 * 	2.不能打开重复的Tab
	 * 		拿到目前所有打开的tabs选项卡，与将要打开的选项卡做对比（exists）
	 * 			存在：true:不打开
	 * 			存在：false:打开
	 * 	3.对于已经存在的Tab的Tab选项，被点击的时候应该默认被选中
	 */

	$('#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){
				
			}else{
				
				$('#stuTabs').tabs('add',{    
				    title:'tabs.text',    
				    content:node.text+'Tab Body',    
				    closable:true,    
				    tools:[{    
				        iconCls:'icon-mini-refresh',    
				        handler:function(){    
				            alert('refresh');    
				        }    
				    }]    
				});  
			}
		}

	}); 
})