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);

转自：http://www.360renw.com/work/?10893-1.html