tree前段实现_$("#tree").tree({-优快云博客

本文链接：https://blog.youkuaiyun.com/m0_60390944/article/details/120297620

本文介绍了如何使用EasyUI库在jsp页面中创建tree控件和选项卡。对于tree控件，讲解了从静态HTML结构到动态加载JSON数据的过程，指出了样式和动态渲染的挑战。在选项卡部分，展示了如何根据tree节点点击事件动态添加新的选项卡内容，并优化了重复添加的逻辑。通过这些实践，读者可以更好地理解和应用EasyUI进行界面构建。

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

一，tree控件的使用

思路：

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

2、将tree-data1-json文件导入到web—content里

3、新建jsp文件实现效果

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

有缺点

1、样式缺陷
2、不好做数据渲染，树形结构动态显示（重点）

<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空元素加载js数据

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

但它只是一个空盒我们要将

tree_data1.json文件导入与之前建好的js文件中

[{
	"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界面引用js文件

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

显示效果

二.制作选项卡

<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界面，给右侧菜单添加点击事件点击时可以切换到相对于的界面

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

            }
    }); 
})

优化后的界面代码


 
	$('#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');    
				        }    
				    }]    
				});  
			}
		}
 
	}); 
})

显示结果