easyui的聚合实验

最新推荐文章于 2024-07-20 18:16:53 发布

造梦者666777

最新推荐文章于 2024-07-20 18:16:53 发布

阅读量195

点赞数

分类专栏： jquery 文章标签： easyui 前端 javascript

本文链接：https://blog.csdn.net/zaomengzhe666777/article/details/125657034

版权

jquery 专栏收录该内容

2 篇文章 0 订阅

订阅专栏

点击左侧节点,在中心显示easyui标签

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",
			"attributes":{
				"url":"demo1.jsp",
				"p2":"Custom Attribute2"
			}
		},{
			"id":122,
			"text":"Java",
			"attributes":{
				"url":"demo2.jsp",
				"p2":"Custom Attribute2"
			}
		},{
			"id":123,
			"text":"Microsoft Office",
			"attributes":{
				"url":"../jsp/demo3.jsp",
				"p2":"Custom Attribute2"
			}
		},{
			"id":124,
			"text":"Games",
			"checked":true,
			"attributes":{
				"url":"../jsp/demo4.jsp",
				"p2":"Custom Attribute2"
			}
		}]
	},{
		"id":13,
		"text":"index.html"
	},{
		"id":14,
		"text":"about.html"
	},{
		"id":15,
		"text":"welcome.html"
	}]
}]

treeAttributes.html

<!DOCTYPE html>
<html>
<head>
	<meta charset="UTF-8">
	<title>treeAttributes</title>
	<link rel="stylesheet" type="text/css" href="../themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="../themes/icon.css">
	<link rel="stylesheet" type="text/css" href="../demo/demo.css">
	<script type="text/javascript" src="../jquery.min.js"></script>
	<script type="text/javascript" src="../jquery.easyui.min.js"></script>
</head>
<body class="easyui-layout">
	<div data-options="region:'north',title:'North Title',split:true"
		style="height: 100px;"></div>
	<div data-options="region:'south',title:'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:'West',split:true"
		style="width: 200px;">
		<ul id="stuMenu"></ul>
	</div>
	<div data-options="region:'center',title:'center title'"
		style="padding: 5px; background: #eee;">
    	<div id="stuTabs" class="easyui-tabs" style="width:100%;height:100%;">    
    	</div>  
	</div>

<script type="text/javascript">
 	$(function(){
		  $('#stuMenu').tree({    
			    url:'tree_data1.json' ,
 			    onClick: function(node){
			    	//exists which 表明指定的面板是否存在，'which'参数可以是选项卡面板的标题或索引。 
			    	var exists = $('#stuTabs').tabs('exists', node.text);
			    	//判断面板是否存在
			    	if(exists){
			    		//select which 选择一个选项卡面板，'which'参数可以是选项卡面板的标题或者索引。 
			    		$('#stuTabs').tabs('select', node.text);
			    	}else{
			    		//不存在则添加面板
						$('#stuTabs').tabs('add',{    
						    title:node.text,   
                            //从URL读取远程数据并且显示到面板。
						    href:node.attributes.url,
						    closable:true,    
						    tools:[{    
						        iconCls:'icon-mini-refresh',    
						        handler:function(){    
						            alert('refresh');    
						        }    
						    }]    
						}); 
			    	}
				} 
			});
	}) 
</script>	
</body>
</html>

tabs标签添加href属性, 从URL读取远程数据并且显示到面板.

- demo1.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>Insert title here</title>
</head>
<body>
	
<div id="p"></div>

<script type="text/javascript">
	$(function(){
		$('#p').panel({
			width:400,
			height:200,
			title:'Intel',
			content:'<h1>Intel</h1>'
		});
	});
</script>
</body>
</html>

demo1.jsp没有导入EasyUI的CSS和Javascript文件到当前页面
demo2.jsp

<div id="p1"></div>

<script type="text/javascript">
	$(function(){
		$('#p1').panel({
			width:400,
			height:200,
			title:'Java',
 			tools: [{    
			   iconCls:'icon-add',    
			   handler:function(){alert('new')}    
			   },{    
			   iconCls:'icon-save',    
			   handler:function(){alert('save')}    
			}], 
			content:'<h1>Java</h1>'
		});
	});
</script>

- demo02.jsp甚至连jsp页面的属性也没有设置
- demo01.jsp与demo02.jsp各自div中的id要设置成不同值.
通过以上实验说明通过href属性加载的远程数据被聚合到treeAttributes.html中,作为该页面的一部分, 所以共用该页面导入的EasyUI的CSS和Javascript文件.