easyUI_02(Tree前端工作)

1.tree概述：
使用$.fn.tree.defaults重写默认值对象。

树控件在web页面中一个将分层数据以树形结构进行显示。它提供用户展开、折叠、拖拽、编辑和异步加载等功能。

2.案例
树控件使用<ul>元素定义。标签能够定义分支和子节点。节点都定义在<ul>列表内的<li>元素中。以下显示的元素将被用作树节点嵌套在<ul>元素中。
 

 <base href = "${pageContext.request.servletContext.contextPath}/static/">    
 
    var globalPath = "${pageContext.request.servletContext.contextPath}";

页面缓存

 
    <meta http-equiv="pragma" content="no-cache">
    <meta http-equiv="cache-control" content="no-cache">
    <meta http-equiv="expires" content="0">  

postman使用

接口测试工具；postman发送请求给服务器，然后从服务器接受响应，最后在postman中展示出来。

 tree组件实现JSON数据绑定 

 
    标签实现——不推荐
    JSON实现
	$('#tt').tree({    
    		url:'tree_data.json'   
	}); 
 

tree组件实现JSON数据绑定 

 
    标签实现——不推荐
    JSON实现
    $('#tt').tree({    
            url:'tree_data.json'   
    }); 
 

动态添加选项卡

1.  

   $(function(){
   			//绑定属性菜单绑定数据
   			$("#menuTree").tree({    
   				//实际开发中这里应该获取的是后台的数据（从servlet中获取）
   			    url:'tree_data.json',
   			    //在用户点击一个节点的时候触发。
   			    onClick: function(node){
   					//alert(node.text);  // 在用户点击的时候提示
   					console.log(node.id,node.text,node.children);
   					if(node.id === "-1"){
   						return;
   					}
   					//判断选项卡是否存在选中
   					var flag = $("#tabs_index").tabs('exists',node.text);
   					//alert(flag);
   					if(flag){
   						$("#tabs_index").tabs('select',node.text);
   						return;
   					}
   					
   			    	// 添加一个未选中状态的选项卡面板
   			    	$('#tabs_index').tabs('add',{
   			    		title: node.text,
   			    		content:node.text,
   			    		closable:true,  
   			    	});
   				}
   			});  
   		});
    
    

案例：

 

 

<!-- 树形菜单 -->
<script type="text/javascript">
	$(function() {
		$("#menuTree").tree({
			url:'static/data/tree_data.json',
			onClick:function(node){
				addoDiv(node);
			}
		});
	});

<div data-options="fit:true" class="easyui-layout">
		<!-- 头部 -->
		<div data-options="region:'north',title:'后台管理系统',split:true"
			style="height: 30px;"></div>
		<div data-options="region:'south',title:'首页底部',split:true"
			style="height: 100px;">
			<div class="form-group" style="margin-top: 20px;">
				<p>&copy;&copy;所有版权信息归碰哒鬼集团所有</p>
			</div>
		</div>
		<div data-options="region:'west',title:'后台菜单',split:true"
			style="width: 160px;">
			<ul id="menuTree" class="easyui-tree">
 
 
			</ul>
		</div>
		<div data-options="region:'center',title:'内容展示📕'"
			style="padding: 5px; background: #eee;">
			<!-- 选项卡 -->
			<div id="oDiv" class="easyui-tabs" data-options="fit:true"></div>
 
		</div>
	</div>