jQuery树形菜单(2)jquery-easyui

利用jquery-easyui进行树形结构的建立，资料见http://jquery-easyui.wikidot.com，http://jquery-easyui.wikidot.com/local--files/download:v105/jquery-easyui-1.0.5.zip可下载
jquery-easyui-1.0.5版本，使用时只要在页面中引入jquery-1.4.2.min.js、jquery.easyui.min.js，tree.css，这些文件在资料中都有，要保证tree.css和压缩文件中images文件夹的
相对位置，即它们要在同一目录下，有两种方式来构建树，一是利用页面的元素进行构建，你可以定义<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>
当然树也可用一个空元素<ul/>进行构建：
<ul id="tt"></ul>
利用jQuery的方法进行树的生成：$('#tt').tree(options);
options有url，animate，url是指向远端数据源的地址，要求返回json数据格式：[{node1},{node2}]，可以是一个文件。
animate:定义在展开或者收起树的时候是否有相应的动作，为true表示有，默认为false。
如果利用页面<ul/>元素构建不用给url，animate也是可选的。
树节点是一个js对象包含了一下很有用的属性：id，用于区分树节点的值，可以相同；
text:树节点显示的内容；attributes:可以给节点附加的属性信息，用json格式等；
target：生成树后的Dom对象。
也可以利用json数据进行树的生成：
[{
"text":"Folder1",
"iconCls":"icon-save",
"children":[{
"text":"File1"
},{
"text":"Books",
"state":"open",
"attributes":{
"url":"/demo/book/abc",
"price":100
},
"children":[{
"text":"PhotoShop"
},{
"id": 8,
"text":"Sub Bookds",
"state":"closed"
}]
}]
},{
"text":"File2"
}]
提供的事件有onClick(node)，表示点击节点时触发，会把节点对象传递给该函数。
常用的方法：reload()、getSelected()、select(node.target)、collapse(node.target)、expand(node.target)、
append(array)、remove(node.target)。
下面是用json生成树过程：
1、准备数据，tree_data1.json
[{
"text":"Folder1",
"iconCls":"icon-save",
"children":[{
"text":"File1"
},{
"text":"Books",
"state":"open",
"attributes":{
"url":"/demo/book/abc",
"price":100
},
"children":[{
"text":"PhotoShop"
},{
"id": 8,
"text":"Sub Bookds",
"state":"closed"
}]
}]
},{
"text":"File2"
}]
iconCls--是节点样式的名称
2、页面元素树的容器：
<div id="treedemo"></div>
3、用jQuery提供的方法生成树：
$(function(){
$("#treedemo").tree({
url: "tree_data1.json",
onClick:function(node){
for(var x in node){
alert(x+"-----"+eval("node."+x));
}
if(node.attributes!=undefined){
alert("node's attributes is:"+node.attributes.url+"--"+node.attributes.name)
}
}
});
});
常用方法：
$("#treedemo").tree("reload");
var selectedNode=$("#treedemo").tree("getSelected");
$("#treedemo").tree("expand",selectedNode.target);
$("#treedemo").tree("collapse",selectedNode.target);
$("#treedemo").tree("append",{
parent:selectedNode.target,
data:[{"id":5,
"text":"newFolder",
"children":[{"id":6,"text":"subfile"}]

}]
});
$("#treedemo").tree("remove",selectedNode.target);