网页布局五之json方式的页面链接

最新推荐文章于 2025-11-08 00:56:17 发布

原创最新推荐文章于 2025-11-08 00:56:17 发布 · 9k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#Web #easyui #jquery #布局 #json

本文介绍如何使用JSON格式配置Tree的点击事件，包括利用attributes属性设置链接，以及使用jQuery实现点击响应并打开新页面的过程。

首先，在使用json方式对Tree的children nodes来进行点击事件的链接，我觉得首要任务是要熟悉json的属性有什么，若是连json的基本用法的概念都没有，那何谈去使用，更不用说灵活运用了。

下面列举出json的全部属性，所有节点都包含以下属性:

***************************************************************************************************************************************************************************************

id:节点id,这个很重要到加载远程服务器数据 which is important to load remote data
text: 显示的节点文本
state: 节点状态, 'open' 或者 'closed', 默认是 'open'. 当设置为 'closed', 节点所有的子节点将从远程服务器站点加载
checked: 指明检查节点是否选中.
attributes: 可以添加到节点的自定义属性
children: 一个节点数组,定义一些子节点

一些示例:

[{  
    "id":1,  
    "text":"Folder1",  
    "iconCls":"icon-save",  
    "children":[{  
        "text":"File1",  
        "checked":true  
    },{  
        "text":"Books",  
        "state":"open",  
        "attributes":{  
            "url":"/demo/book/abc",  
            "price":100  
        },  
        "children":[{  
            "text":"PhotoShop",  
            "checked":true  
        },{  
            "id": 8,  
            "text":"Sub Bookds",  
            "state":"closed"  
        }]  
    }]  
},{  
    "text":"Languages",  
    "state":"closed",  
    "children":[{  
        "text":"Java"  
    },{  
        "text":"C#"  
    }]  
}]

异步加载树

tree 支持内置的异步加载模式,用户创建一个空的 tree,然后定义一个远程服务器站点返回json数据用于填充tree来异步满足异步加载需求.例如:

<ul class="easyui-tree" data-options="url:'get_data.php'"></ul>

tree 的加载是通过URL 'get_data.php'站点. 子节点的加载依赖于父节点的状态 .当展开一个关闭节点,如果节点没有子节点加载,将发送节点id值作为http参数,参数命名为'id'到远程服务器,通过以上URL定义.检索子节点数据
看看这个从服务器返回的数据

[{  
    "id": 1,  
    "text": "Node 1",  
    "state": "closed",  
    "children": [{  
        "id": 11,  
        "text": "Node 11"  
    },{  
        "id": 12,  
        "text": "Node 12"  
    }]  
},{  
    "id": 2,  
    "text": "Node 2",  
    "state": "closed"  
}]

节点1和节点2都是closed状态的,可以直接显示它们的子节点,当展开节点2时,发送值2到远程服务器检索子节点
这个教程创建异步的树click me!!! ,展示如何写服务器端代码根据需求返回tree数据.

属性

Name	Type	Description	Default
url	string	一个从远程服务器检索数据的URL.	null
method	string	检索数据的http方法类型.	post
animate	boolean	定义当展开/折叠节点的时候是否显示效果.	false
checkbox	boolean	定义是否显示checkbox在所有节点之前.	false
cascadeCheck	boolean	定义是否级联选择.	true
onlyLeafCheck	boolean	定义是否仅仅只是在叶子节点显示checkbox.	false
lines	boolean	定义是否显示树线.	false
dnd	boolean	定义是否启用drag and drop.	false
data	array	这个节点数据将被加载. $('#tt').tree({ data: [{ text: 'Item1', state: 'closed', children: [{ text: 'Item11' },{ text: 'Item12' }] },{ text: 'Item2' }] });	null
loader	function(param,success,error)	定义如何从远程服务器加载数据.返回false将终止这个动作.这个函数提供以下参数: param: 这个参数对象将传送给远程服务器. success(data): 当检索数据成功之后的回调函数. error(): 当检索数据出现异常的时候调用的回调函数.	json loader
loadFilter	function(data,parent)	返回显示过滤后的数据. 返回的数据是标准的tree格式.这个函数提供以下参数: data:装载的是原始数据. parent: DOM 对象, 指定父节点.

事件

许多回调函数提供'node'参数, 都包含以下属性:

id: 绑定到节点的标识值.
text:显示文本.
iconCls: 显示icon的css样式.
checked: 节点是否选中.
state: 节点状态, 'open' 或者 'closed'.
attributes: 绑定到节点的自定义属性.
target: 目标 DOM 对象.

Name	Parameters	Description
onClick	node	当用户点击节点的时候触发. 示例代码: `$('#tt').tree({ onClick: function(node){ alert(node.text); // alert node text property when clicked } });`
onDblClick	node	当用户双击一个节点的时候触发.
onBeforeLoad	node, param	当一个请求加载数据在前触发, 返回false取消加载动作.
onLoadSuccess	node, data	当数据加载成功之后触发.
onLoadError	arguments	当数据加载失败触发,arguments参数和ajax jQuery 的'error'一样 .
onBeforeExpand	node	节点展开之前触发,返回false取消展开动作.
onExpand	node	当节点展开之后触发.
onBeforeCollapse	node	节点折叠之前触发,返回false将取消折叠动作.
onCollapse	node	当节点折叠之后触发.
onCheck	node, checked	当用户点击checkbox的时候触发.
onBeforeSelect	node	节点被选中之前触发,返回false取消选择动作.
onSelect	node	当节点选中之后触发.
onContextMenu	e, node	当在节点上右键点击的时候触发,代码示例: // 右键点击节点然后显示上下文菜单 $('#tt').tree({ onContextMenu: function(e, node){ e.preventDefault(); // 选择节点 $('#tt').tree('select', node.target); // 显示上下文菜单 $('#mm').menu('show', { left: e.pageX, top: e.pageY }); } }); //上下文菜单定义如下: <div id="mm" class="easyui-menu" style="width:120px;"> <div onclick="append()" data-options="iconCls:'icon-add'">Append</div> <div onclick="remove()" data-options="iconCls:'icon-remove'">Remove</div> </div>
onDrop	target, source, point	当节点被放置的时候触发. target: DOM 对象,这个节点是被放置的目标. source: 源节点. point:指明drop操作,可用值有: 'append','top' or 'bottom'.
onBeforeEdit	node	在编辑节点之前触发.
onAfterEdit	node	编辑节点之后触发.
onCancelEdit	node	取消编辑动作时候触发.

方法

Name	Parameter	Description
options	none	返回tree 的options.
loadData	data	加载tree数据.
getNode	target	得到特定的节点对象.
getData	target	得到特定节点数据, 包含其子节点.
reload	target	重新加载tree数据.
getRoot	none	得到根节点, 返回节点对象
getRoots	none	得到根节点, 返回节点数组.
getParent	target	得到父节点,target参数指明节点DOM对象.
getChildren	target	得到子节点, target 参数指明节点DOM对象 .
getChecked	none	得到所有选中节点.
getSelected	none	得到选择节点和返回它,如果没有选择节点将返回null.
isLeaf	target	解决特定的节点是否是叶子节点, target 参数指明节点DOM对象 .
find	id	查找特定的节点和返回节点对象,代码示例: // 查找一个节点然后返回它 var node = $('#tt').tree('find', 12); $('#tt').tree('select', node.target);
select	target	选择一个节点, target 参数指明节点DOM对象 .
check	target	设置特定的节点选中.
uncheck	target	设置特定的节点取消选中.
collapse	target	折叠一个节点, target 参数指明节点DOM对象 .
expand	target	展开一个节点, target 参数指明节点DOM对象,当节点的状态是closed的时候和没有子节点,节点id值(参数命名为'id')将发送给服务器请求子节点数据 .
collapseAll	target	折叠所有节点.
expandAll	target	展开所有节点.
expandTo	target	展开从根节点到指定的节点 .
append	param	附加一些子节点到父节点中. param参数有两个属性: parent: DOM 对象,被添加到的父节点,如果没有分配,附加到根节点. data: array, the nodes data. Code example: `// 添加一些节点到选择的节点 var selected = $('#tt').tree('getSelected'); $('#tt').tree('append', { parent: selected.target, data: [{ id: 23, text: 'node23' },{ text: 'node24', state: 'closed', children: [{ text: 'node241' },{ text: 'node242' }] }] });`
toggle	target	切换expanded/collapsed 节点的状态, target 参数指明节点DOM对象 .
insert	param	插入一个节点到特定节点的之前或之后.'param'参数包含以下属性: before: DOM 对象,节点插入到之前. after: DOM 对象, 节点插入到之后. data: object, 节点数据. 以下代码展示,如何插入新节点到选择节点之前: `var node = $('#tt').tree('getSelected'); if (node){ $('#tt').tree('insert', { before: node.target, data: { id: 21, text: 'node text' } }); }`
remove	target	移除一个节点和其子节点, target 参数指明节点DOM对象 .
pop	target	移除一个节点和其子节点 ,这个方法和remove类似,但是它返回移除的节点数据.
update	param	更新特定的节点. 'param'参数包含以下属性: target(DOM 对象, 更新的节点),id,text,iconCls,checked,等等. 示例代码: // 更新选择的节点文本 var node = $('#tt').tree('getSelected'); if (node){ $('#tt').tree('update', { target: node.target, text: 'new text' }); }
enableDnd	none	启用 drag 和 drop 功能.
disableDnd	none	禁用 drag 和drop 功能.
beginEdit	target	开始编辑一个节点.
endEdit	target	结束编辑一个节点.
cancelEdit	target	取消编辑一个节点.

以上如有错误信息,请指出,thanks!

****************************************************************************************************************************************************************************************

※中内容出自http://www.tuicool.com/articles/yuQbaa

在json中要使用链接事件，就必须使用json的attributes属性来对节点的连接地址进行设置。

例如：

在"attributes"中写入要链接的地址，如上所示：

“attributes”:{

"p2":"XX/XX.html"

}

红色字体是第一步。

二、在页面中写入要得到p2的值的jquery语句。具体写法如下：

最重要的是下面的红色部分：

$(document).ready(function(){

$("#treeid").tree({

url:'json/tree_data1.json',//此为页面获取json数据的路径

onClick:function(node){

var href = node.attributes.p1;//获得json中的页面链接地址

}

});

然后，点击tree的子节点，就可以打开所要的链接页面了。

下面附一个集合了jquery-easyui的tree、layout、tabs的完整例子。

先附上json数据：

1、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"
	}]
}]

2、tree_data2.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",
		"state":"closed",
		"children":[{
			"id":121,
			"text":"Intel"
		},{
			"id":122,
			"text":"Java"
		},{
			"id":123,
			"text":"Microsoft Office"
		},{
			"id":124,
			"text":"Games"
		}]
	},{
		"id":16,
		"text":"Actions",
		"children":[{
			"text":"Add",
			"iconCls":"icon-add"
		},{
			"text":"Remove",
			"iconCls":"icon-remove"
		},{
			"text":"Save",
			"iconCls":"icon-save"
		},{
			"text":"Search",
			"iconCls":"icon-search"
		}]
	},{
		"id":13,
		"text":"index.html",
		"attributes":{
			"p1":"http://www.baidu.com"
			
		}
	},{
		"id":14,
		"text":"about.html",
		"attributes":{
			"p1":"http://www.sohu.com"
			
		}
	},{
		"id":15,
		"text":"welcome.html"
	}]
}]

最后，附上html的页面代码：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>json里的href</title>

<link rel="stylesheet" href="js/jquery-easyui-1.3.5/themes/default/easyui.css" />
<link rel="stylesheet" href="js/jquery-easyui-1.3.5/themes/icon.css" />

<script type="text/javascript" src="js/jquery-easyui-1.3.5/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="js/jquery-easyui-1.3.5/jquery.easyui.min.js"></script>

<style type="text/css">
#mm table tr{
	letter-spacing:1px;
	text-align:center;
	display:block;
	height:22px;
	width:80px;
	border-left:1px solid #9C6;
	color:#996;
	text-decoration:none;
	padding-top:4px;
	background:url(images/nav_block.jpg) no-repeat -12px -108px;
	overflow:hidde;
	margin-left:2px;
	}
</style>

<script type="text/javascript">
var a;

$(document).ready(function(){
						   
						   $("#mm table tr td").click(function value(){
																 id = $(this).index();
																		a = id + 1;
																		alert(a);
																		
										   ////////////////////////////////////////////////////////////////////////
																		$('#navig').tree({
											 
											 							url:'tree_data'+ a +'.json',
											 								onClick:function(node){
										     							var href = node.attributes.p1;
												
																		var tabTitle = $(this).text();
																		//alert(tabTitle);
																		addPanel(tabTitle,href);
																 }
															 });
																	
											///////////////////////////////////////////////////////////////////////////////	
													});
						   
						  
						
							
							function addPanel(subtitle,url){
								if(!$('#tt').tabs('exists',subtitle)){
									$('#tt').tabs('add',{
												  title:subtitle,
												  content:createFrame(url),
												  closable:true,
												  width:$('#main').width()-10,
												  height:$('#main').height()-25
												  });
									}
								}
								
								function createFrame(url){
									var s = '<iframe name="mainFrame" scrolling="auto" frameborder="0"  src="' + url + '" style="width:100%;height:100%;"></iframe>';
               return s;
									}
								
								
							});
</script>

</head>

<body>

<div style="border:thick;background:#C7EDCC">

	<div class="easyui-layout" style="width:1500px;height:580px">
    
   	<div id="mm" region="north" style="width:1500px;height:100px">
    	
      <table style="margin:4% 20% 50% 5%">
      
       <tr>
         <td height="21">第一级菜单1</td>      
         <td> 第一级菜单2</td>
         </tr>
       </table>
    </div> 
    
    <div>
   
    
    </div>
    
    <div region="west" style="width:250px" title="Menus">
    	<ul id="navig"></ul>
    </div>
    
    <div id="main" region="center"> 
    <div id="tt" class="easyui-tabs" fit="true">
    
    <div title="欢迎使用" style="padding: 20px; overflow: hidden;" id="home" closable="true">

                <h1>Welcome to jQuery UI!</h1>

            </div>
            
    </div>
    </div>
    
    
    
    </div>
</div>
</body>
</html>

最后附上效果图: