dreamoftch

jquery easyui tree学习

/**约定的服务器返回的数据格式：{"description":"test","link":"link","nodeId":1,"nodeName":"节点0","parentNodeId":0}
 * nodeId:唯一标示节点  nodeId=1代表根节点，根节点的parentNodeId为0
 * parentNodeId：父节点nodeId
 */
var data = "[{\"description\":\"test\",\"link\":\"link\",\"nodeId\":1,\"nodeName\":\"节点0\",\"parentNodeId\":0},"
			+"{\"description\":\"test\",\"link\":\"link\",\"nodeId\":2,\"nodeName\":\"节点1\",\"parentNodeId\":1},"
			+"{\"description\":\"test\",\"link\":\"link\",\"nodeId\":3,\"nodeName\":\"节点2\",\"parentNodeId\":1},"
			+"{\"description\":\"test\",\"link\":\"link\",\"nodeId\":4,\"nodeName\":\"节点3\",\"parentNodeId\":2},"
			+"{\"description\":\"test\",\"link\":\"link\",\"nodeId\":5,\"nodeName\":\"节点4\",\"parentNodeId\":3},"
			+"{\"description\":\"test\",\"link\":\"link\",\"nodeId\":6,\"nodeName\":\"节点5\",\"parentNodeId\":3}]";

注意：

很多事件的回调方法都有一个node的参数，这个参数包含了下面的属性：

id,text,iconCls,checked,state,attributes,target

Events

Many events callback function can take the 'node' parameter, which contains following properties:

很多事件的回调方法都有一个node的参数，这个参数包含了下面的属性：

id: An identity value bind to the node.
text: Text to be showed.
iconCls: The css class to display icon.
checked: Whether the node is checked.
state: The node state, 'open' or 'closed'.
attributes: Custom attributes bind to the node.
target: Target DOM object.

处理服务器返回的数据：

/**约定的服务器返回的数据格式：{"description":"test","link":"link","nodeId":1,"nodeName":"节点0","parentNodeId":0}
 * nodeId:唯一标示节点  nodeId=1代表根节点，根节点的parentNodeId为0
 * parentNodeId：父节点nodeId
 */
//data为服务器返回的数据（json格式）
var data = "[{\"description\":\"test\",\"link\":\"link\",\"nodeId\":1,\"nodeName\":\"节点0\",\"parentNodeId\":0},"
			+"{\"description\":\"test\",\"link\":\"link\",\"nodeId\":2,\"nodeName\":\"节点1\",\"parentNodeId\":1},"
			+"{\"description\":\"test\",\"link\":\"link\",\"nodeId\":3,\"nodeName\":\"节点2\",\"parentNodeId\":1},"
			+"{\"description\":\"test\",\"link\":\"link\",\"nodeId\":4,\"nodeName\":\"节点3\",\"parentNodeId\":2},"
			+"{\"description\":\"test\",\"link\":\"link\",\"nodeId\":5,\"nodeName\":\"节点4\",\"parentNodeId\":3},"
			+"{\"description\":\"test\",\"link\":\"link\",\"nodeId\":6,\"nodeName\":\"节点5\",\"parentNodeId\":3}]";
var json = JSON.parse(data);//将字符串解析为json对象
var tree = {};//定义存放结果的tree对象
//将数据添加children属性，并依据nodeId存放到tree对象中
$.each(json,function(i,obj){
	this.children = [];//添加children属性
	tree[this.nodeId] = this;//nodeId为key，当前对象为value存放到tree对象中
});
$.each(json,function(i,obj){
	if(this.parentNodeId != 0){
		tree[this.parentNodeId].children.push(this); //除了根节点之外，其余节点都追加到父节点的chileren数组中
	}
});
var temp = [];
temp.push(tree[1]);//获取根节点，其余节点不需要
tree = temp;
/**
 * 将给定的节点及其子节点(children)转为easyui要求的结构
 * @param {Object} tree1
 * @return {TypeName} 
 */
function toTree(tree1){
	var arr = [];
	var length = tree1.length;
	if(length<=0){
		return arr;
	}
	var obj = null;
	for(var i=0;i<length;i++){
		obj = {};
		obj.id = tree1[i].nodeId;
		obj.text = tree1[i].nodeName;
		obj.attributes = {
			"description":tree1[i].description,
			"link":tree1[i].link,
			"nodeName":tree1[i].nodeName,
			"parentNodeId":tree1[i].parentNodeId
		};
		obj.children = toTree(tree1[i].children);//递归children节点
		arr.push(obj);
	}
	return arr;
}
tree = toTree(tree);
console.info(JSON.stringify(tree));//得到的就是最终的easyui要求的格式

经过上面的处理得到的json数据为：

[{"id":1,"text":"节点0","attribute":{"description":"test","link":"link","nodeName":"节点0","parentNodeId":0},"children":[{"id":2,"text":"节点1","attribute":{"description":"test","link":"link","nodeName":"节点1","parentNodeId":1},"children":[{"id":4,"text":"节点3","attribute":{"description":"test","link":"link","nodeName":"节点3","parentNodeId":2},"children":[]}]},{"id":3,"text":"节点2","attribute":{"description":"test","link":"link","nodeName":"节点2","parentNodeId":1},"children":[{"id":5,"text":"节点4","attribute":{"description":"test","link":"link","nodeName":"节点4","parentNodeId":3},"children":[]},{"id":6,"text":"节点5","attribute":{"description":"test","link":"link","nodeName":"节点5","parentNodeId":3},"children":[]}]}]}]

然后在页面显示：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
  <head>
    <title>test1.html</title>
	
    <meta http-equiv="keywords" content="keyword1,keyword2,keyword3">
    <meta http-equiv="description" content="this is my page">
    <meta http-equiv="content-type" content="text/html; charset=UTF-8">
    <link rel="stylesheet" type="text/css" href="jquery_easyui/themes/default/easyui.css">
	<link rel="stylesheet" type="text/css" href="jquery_easyui/themes/icon.css">
	<script type="text/javascript" src="jquery_easyui/jquery-1.4.2.min.js"></script>
	<script type="text/javascript" src="jquery_easyui/jquery.easyui.min.js"></script>
	<script type="text/javascript">
		$(function(){
			$('#tt2').tree({
				data:data  //data就是上面的 json 数据
			});
		});
	/**  添加些额外的处理
		$(function(){
			$('#tt2').tree({
				data:tree,
				checkbox:false,
				onlyLeafCheck:false,
				dnd:false,
				onClick:function(node){//点击事件
					$("#tt2").tree("toggle",node.target);//当前被点击的节点自动关闭/展开
                                        console.info(node.attributes.link);//获取自定义的属性
				}
			});
		});
	*/
	</script>
  </head>
  
  <body>
    jquery easyui test demo: <br><br>
    <ul id="tt2"></ul>
  </body>
</html>

就可以看到树状结构了。

参考资料：

easyui树形菜单中文参考

easyui官网

树形菜单

使用$.fn.tree.defaults重载默认值。

依赖关系

一般拖动
拖动至容器

使用方法

树形菜单可以用<ul>标签定义，它可以定义叶子节点和子节点，代码示例如下：

     
   
<ul id="tt">  
    <li>  
        <span>Folder</span>  
        <ul>  
            <li>  
                <span>Sub Folder 1</span>  
                <ul>  
                    <li>  
                        <span><a href="#">File 11</a></span>  
                    </li>  
                    <li>  
                        <span>File 12</span>  
                    </li>  
                    <li>  
                        <span>File 13</span>  
                    </li>  
                </ul>  
            </li>  
            <li>  
                <span>File 2</span>  
            </li>  
            <li>  
                <span>File 3</span>  
            </li>  
        </ul>  
    </li>  
    <li>  
        <span>File21</span>  
    </li>  
</ul>  

也可以用不带<li>的<ul>标签来定义：

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

     
   
$('#tt').tree({  
    url:'tree_data.json'  
});  

树形菜单的数据格式

每个节点都拥有以下属性：

id：节点id，对载入远程数据很重要。
text：显示在节点的文本。
state：节点状态，'open' or '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#"  
    }]  
}]  

属性

名称类型描述 默认值

url（超链接）	string（字符串）	用以载入远程数据的超链接地址。	null
method（方法）	string（字符串）	获取数据的HTTP方法。	post
animate（动画）	boolean（布尔型）	定义当节点打开或关闭时是否显示动画效果。	false
checkbox（复选框）	boolean（布尔型）	定义是否在每个节点之前显示复选框。	false
cascadeCheck（级联选择）	boolean（布尔型）	定义是否支持级联选择。	true
onlyLeafCheck（只选叶子节点）	boolean（布尔型）	定义是否只在叶子节点之前显示复选框。	false
dnd（拖放）	boolean（布尔型）	定义是否支持拖放。	false
data（数据）	array（数组）	将被载入的节点数据。	null

事件

多数事件回调函数都有'node'参数，该参数包含如下属性：

id：节点的唯一标识。
text：显示在节点上的文本。
checked：节点是否被选择。
attributes：节点的自定义属性。
target：目标DOM对象。

名称参数描述

onClick	node	当用户点击节点时触发，node参数包含如下属性： id：节点id。 text：显示在节点上的文本。 checked：节点是否被选择。 attributes：节点的自定义属性。 target：被点击的目标DOM对象。
onDblClick	node	当用户双击节点时触发。
onBeforeLoad	node, param	在请求载入数据之前触发，返回false将取消载入。
onLoadSuccess	node, data	当数据载入成功时触发。
onLoadError	arguments	当数据载入失败时触发，arguments参数跟jQuery.ajax的'error'函数一样。
onBeforeExpand	node	在节点打开之前触发，返回false将取消打开。
onExpand	node	在节点被打开时触发。
onBeforeCollapse	node	在节点被关闭之前触发，返回false将取消关闭。
onCollapse	node	当节点被关闭时触发。
onCheck	node, checked	当用户点击复选框时触发。
onBeforeSelect	node	在节点被选择之前触发，返回false将取消选择。
onSelect	node	当节点被选择时触发。
onContextMenu	e, node	当节点被鼠标右键点击时触发。
onDrop	target, source, point	当节点位置被（拖动）更换时触发。 target：DOM对象，需要被拖动动的目标节点。 source：原始节点。 point：指明拖动方式，可选值：'append'，'top'或者'bottom'。
onBeforeEdit	node	在编辑节点之前触发。
onAfterEdit	node	在编辑节点之后触发。
onCancelEdit	node	当取消编辑时触发。

方法