easyui与ztree结合实战实例

我就是我 2022-04-14 07:12 146阅读 0赞

> jQuery EasyUI是一组基于jQuery的UI插件集合，而jQuery EasyUI的目标就是帮助web开发者更轻松的打造出功能丰富并且美观的UI界面。开发者不需要编写复杂的javascript，也不需要对css样式有深入的了解，开发者需要了解的只有一些简单的html标签。但功能相对没extjs强大，但页面也是相当好看的。一些功能也足够开发者使用，相对于extjs更轻量。               jQuery EasyUI为我们提供了大多数UI控件的使用，如：accordion，combobox，menu，dialog，tabs，validatebox，datagrid，window，tree等等。 好了，这里也不做太多解释说明，直接上代码提供大家参考学习

<%@ 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>ztree</title>
    
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/default/easyui.css">
    
    <link rel="stylesheet" type="text/css" href="${pageContext.request.contextPath }/js/easyui/themes/icon.css">
    
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/jquery-1.8.3.js"></script>
    
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/easyui/jquery.easyui.min.js"></script>
    
    <link rel="stylesheet" href="${pageContext.request.contextPath }/js/ztree/zTreeStyle.css" type="text/css">
    <script type="text/javascript" src="${pageContext.request.contextPath }/js/ztree/jquery.ztree.all-3.5.js"></script>
    
    </head>
    <body class="easyui-layout">
    	
    	<div title="中国政府管理系统" style="height: 100px" data-options="region:'north'">北部区域</div>
    	<div title="系统菜单" style="width: 200px" data-options="region:'west'">
    		
    		<div class="easyui-accordion" data-options="fit:true">
    			
    			<div  title="面板一">
    				<a id="but1" class="easyui-linkbutton">添加一个选项卡</a>
    				<script type="text/javascript">
    					$(function(){
    						//页面加载完成后，为上面的按钮绑定事件
    						$("#but1").click(function(){
    							//判断“系统管理”选项卡是否存在
    							var e = $("#mytabs").tabs("exists","系统管理");
    							if(e){
    								//已经存在，选中就可以
    								$("#mytabs").tabs("select","系统管理");
    							}else{
    								//调用tabs对象的add方法动态添加一个选项卡
    								$("#mytabs").tabs("add",{
    									title:'系统管理',
    									iconCls:'icon-edit',
    									closable:true,
    									content:'<iframe frameborder="0" height="100%" width="100%" src="https://www.baidu.com"></iframe>'
    								});
    							}
    						});
    					});
    				</script>
    			</div>
    			
    			
    			<div data-options="iconCls:'icon-cut'" title="面板五">
    				<a id="but2" class="easyui-linkbutton">添加一个选项卡</a>
    				<script type="text/javascript">
    					$(function(){
    						//页面加载完成后，为上面的按钮绑定事件
    						$("#but2").click(function(){
    							//判断“系统管理”选项卡是否存在
    							var e = $("#mytabs").tabs("exists","系统管理");
    							if(e){
    								//已经存在，选中就可以
    								$("#mytabs").tabs("select","系统管理");
    							}else{
    								//调用tabs对象的add方法动态添加一个选项卡
    								$("#mytabs").tabs("add",{
    									title:'系统管理',
    									iconCls:'icon-edit',
    									closable:true,
    									/* content:'<iframe frameborder="0" height="100%" width="100%" src="https://www.taobao.com"></iframe>', */
    									content:'<iframe frameborder="0" height="100%" width="100%" src="<%=request.getContextPath()%>/pages/admin/userlist.jsp"></iframe>'
    								});
    							}
    						});
    					});
    				</script>
    			</div>
    			
    			<div title="面板二">
    				
    				<ul id="ztree1" class="ztree"></ul>
    				<script type="text/javascript">
    					$(function(){
    						//页面加载完成后，执行这段代码----动态创建ztree
    						var setting = {};
    						//构造节点数据
    						var zNodes = [
    						              {"name":"节点一","children":[
    						                                        	{"name":"节点一_1"},
    						                                        	{"name":"节点一_2"}
    						                                        ]},//每个json对象表示一个节点数据
    						              {"name":"节点二"},
    						              {"name":"节点三"}
    						              ];
    						//调用API初始化ztree
    						$.fn.zTree.init($("#ztree1"), setting, zNodes);
    					});
    				</script>
    			</div>
    			<div title="面板三">
    				
    				<ul id="ztree2" class="ztree"></ul>
    				<script type="text/javascript">
    					$(function(){
    						//页面加载完成后，执行这段代码----动态创建ztree
    						var setting2 = {
    								data: {
    									simpleData: {
    										enable: true//使用简单json数据构造ztree节点
    									}
    								}
    						};
    						//构造节点数据
    						var zNodes2 = [
    							              {"id":"1","pId":"2","name":"节点一"},//每个json对象表示一个节点数据
    							              {"id":"2","pId":"3","name":"节点二"},
    							              {"id":"3","pId":"0","name":"节点三"}
    						              ];
    						//调用API初始化ztree
    						$.fn.zTree.init($("#ztree2"), setting2, zNodes2);
    						
    					});
    				</script>
    			</div>
    			<div title="面板四">
    				
    				<ul id="ztree3" class="ztree"></ul>
    				<script type="text/javascript">
    					$(function(){
    						//页面加载完成后，执行这段代码----动态创建ztree
    						var setting3 = {
    								data: {
    									simpleData: {
    										enable: true//使用简单json数据构造ztree节点
    									}
    								},
    								callback: {
    									//为ztree节点绑定单击事件
    									onClick: function(event, treeId, treeNode){
    										if(treeNode.page != undefined){
    											//判断选项卡是否已经存在
    											var e = $("#mytabs").tabs("exists",treeNode.name);
    											if(e){
    												//已经存在，选中
    												$("#mytabs").tabs("select",treeNode.name);
    											}else{
    												//动态添加一个选项卡
    												$("#mytabs").tabs("add",{
    													title:treeNode.name,
    													closable:true,
    													content:'<iframe frameborder="0" height="100%" width="100%" src="'+treeNode.page+'"></iframe>'
    												});
    											}
    										}
    									}
    								}
    						};
    						
    						//发送ajax请求，获取json数据
    						//jQuery提供 的ajax方法：ajax、post、get、load、getJSON、getScript
    						var url = "${pageContext.request.contextPath}/json/menu2.json";
    						$.post(url,{},function(data){
    							//调用API初始化ztree
    							$.fn.zTree.init($("#ztree3"), setting3, data);
    						},'json');
    					});
    				</script>
    			</div>
    		</div>
    	</div>
    	<div data-options="region:'center'">
    		
    		<div id="mytabs" class="easyui-tabs" data-options="fit:true">
    			
    			<div data-options="closable:true" title="面板一">我是面板一</div>
    			<div data-options="closable:true" title="面板二">2222</div>
    			<div data-options="closable:true" title="面板三">3333</div>
    		</div>
    	</div>
    	<div style="width: 100px" data-options="region:'east'">东部区域</div>
    	<div style="height: 50px" data-options="region:'south'">南部区域</div>
    </body>
    </html>

最 后效果图如下：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNzY0OTkx_size_16_color_FFFFFF_t_70][]

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3FxXzMwNzY0OTkx_size_16_color_FFFFFF_t_70]: /images/20220414/791c94aecbe245df9339d56a0a3771e7.png