第二百二十六节，jQuery EasyUI，Tree(树)组件

jQuery EasyUI，Tree(树)组件

本节课重点了解 EasyUI 中 Tree(树)组件的使用方法，这个组件依赖于 Draggable(拖 动)和 Droppable(放置)组件。

一．加载方式

class 加载方式

<ul class="easyui-tree">
    <li>
        <span>系统管理</span>
        <ul>
            <li>
                <span>主机信息</span>
                <ul>
                    <li>版本信息</li>
                    <li>数据库信息</li>
                </ul>
            </li>
            <li>更新信息</li>
            <li>程序信息</li>
        </ul>
    </li>
    <li>
        <span>会员管理</span>
        <ul>
            <li>新增会员</li>
            <li>审核会员</li>
        </ul>
    </li>
</ul>

JS 加载方式

tree()将一个ul元素执行Tree(树)组件

树控件数据格式化：注意：这些属性都是写在json远程数据里的

id：节点 ID，对加载远程数据很重要。

text：显示节点文本。(必选)

state：节点状态，'open' 或 'closed'，默认：'open'。如果为'closed'的时候， 将不自动展开该节点。

checked：表示该节点是否被选中。

attributes: 被添加到节点的自定义属性。

children: 一个节点数组声明了若干节点。

html

<ul id="box"></ul>

js

$(function () {
    $('#box').tree({
        url: 'content.json',    //远程加载数据
    });
});

注意：这些属性都是写在json远程数据里的

id：节点 ID，对加载远程数据很重要。

[
  {
    "id": 1,
    "text": "系统管理",
    "iconCls": "icon-add"
  }
]

text：显示节点文本。(必选)

[
  {
    "id": 1,
    "text": "系统管理",
    "iconCls": "icon-add"
  }
]

children: 一个节点数组声明了若干节点。

[
  {
    "id": 1,
    "text": "系统管理",
    "iconCls": "icon-add",
    "children": [
      {
        "text": "主机信息",
        "children":[
          {
            "text" : "版本信息"
          },
          {
            "text" : "数据库信息"
          }
        ]
      },
      {
        "text": "更新信息"
      },
      {
        "text": "程序信息"
      }
    ]
  },
  {
    "id": 2,
    "text": "会员管理",
    "iconCls": "icon-add",
    "children": [
      {
        "text": "新增会员"
      },
      {
        "text": "审核会员"
      }
    ]
  }
]

state：节点状态，'open' 或 'closed'，默认：'open'。如果为'closed'的时候， 将不自动展开该节点。

[
  {
    "id": 1,
    "text": "系统管理",
    "iconCls": "icon-add",
    "children": [
      {
        "text": "主机信息",
        "state":"closed",
        "children":[
          {
            "text" : "版本信息"
          },
          {
            "text" : "数据库信息"
          }
        ]
      },
      {
        "text": "更新信息"
      },
      {
        "text": "程序信息"
      }
    ]
  },
  {
    "id": 2,
    "text": "会员管理",
    "iconCls": "icon-add",
    "children": [
      {
        "text": "新增会员"
      },
      {
        "text": "审核会员"
      }
    ]
  }
]

checked：表示该节点是否被选中。

[
  {
    "id": 1,
    "text": "系统管理",
    "iconCls": "icon-add",
    "children": [
      {
        "text": "主机信息",
        "state":"closed",
        "children":[
          {
            "text" : "版本信息",
            "checked":true
          },
          {
            "text" : "数据库信息"
          }
        ]
      },
      {
        "text": "更新信息"
      },
      {
        "text": "程序信息"
      }
    ]
  },
  {
    "id": 2,
    "text": "会员管理",
    "iconCls": "icon-add",
    "children": [
      {
        "text": "新增会员"
      },
      {
        "text": "审核会员"
      }
    ]
  }
]

attributes: 被添加到节点的自定义属性。

以上属性都是写在json远程数据里的

二．属性列表

 属性表格的属性扩展自 Tree(数据表格)，属性表格新增的的属性如下：

url   string 检索远程数据的 URL 地址。

$(function () {
    $('#box').tree({
        url: 'content.json',    //远程加载数据
    });
});

method   string 检索数据的 HTTP 方法。（POST / GET）

$(function () {
    $('#box').tree({
        url: 'content.json',    //远程加载数据
        method:'POST'           //检索数据的 HTTP 方法
    });
});

animate   boolean 定义节点在展开或折叠的时候是否显示动画效果。

$(function () {
    $('#box').tree({
        url: 'content.json',    //远程加载数据
        method:'POST',           //检索数据的 HTTP 方法
        animate:true            //定义节点在展开或折叠的时候是否显示动画效果
    });
});

checkbox   boolean 定义是否在每一个借点之前都显示复选框。

$(function () {
    $('#box').tree({
        url: 'content.json',    //远程加载数据
        method:'POST',           //检索数据的 HTTP 方法
        animate:true,            //定义节点在展开或折叠的时候是否显示动画效果
        checkbox:true            //定义是否在每一个借点之前都显示复选框
    });
});

cascadeCheck   boolean 定义是否层叠选中状态。也就是选择时不关联上级目录

$(function () {
    $('#box').tree({
        url: 'content.json',    //远程加载数据
        method:'POST',           //检索数据的 HTTP 方法
        animate:true,            //定义节点在展开或折叠的时候是否显示动画效果
        checkbox:true,            //定义是否在每一个借点之前都显示复选框
        cascadeCheck:false      //定义是否层叠选中状态。也就是选择时不关联上级目录
    });
});

onlyLeafCheck   boolean 定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框

$(function () {
    $('#box').tree({
        url: 'content.json',    //远程加载数据
        method:'POST',           //检索数据的 HTTP 方法
        animate:true,            //定义节点在展开或折叠的时候是否显示动画效果
        checkbox:true,            //定义是否在每一个借点之前都显示复选框
        onlyLeafCheck:true,     //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
    });
});

lines   boolean 定义是否显示树控件上的虚线。

$(function () {
    $('#box').tree({
        url: 'content.json',    //远程加载数据
        method:'POST',           //检索数据的 HTTP 方法
        animate:true,            //定义节点在展开或折叠的时候是否显示动画效果
        checkbox:true,            //定义是否在每一个借点之前都显示复选框
        onlyLeafCheck:true,     //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        lines:true              //定义是否显示树控件上的虚线。
    });
});

dnd   boolean 定义是否启用拖拽功能。也就是支持拖拽改变层级关系

$(function () {
    $('#box').tree({
        url: 'content.json',    //远程加载数据
        method:'POST',           //检索数据的 HTTP 方法
        animate:true,            //定义节点在展开或折叠的时候是否显示动画效果
        checkbox:true,            //定义是否在每一个借点之前都显示复选框
        onlyLeafCheck:true,     //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        lines:true,              //定义是否显示树控件上的虚线。
        dnd:true                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
    });
});

data   array 节点数据加载。本地加载节点数据

$(function () {
    $('#box').tree({
        // url: 'content.json',    //远程加载数据
        method:'POST',           //检索数据的 HTTP 方法
        animate:true,            //定义节点在展开或折叠的时候是否显示动画效果
        checkbox:true,            //定义是否在每一个借点之前都显示复选框
        onlyLeafCheck:true,     //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        lines:true,              //定义是否显示树控件上的虚线。
        dnd:true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        data: [{                 //节点数据加载。本地加载节点数据
            "text": "本地数据",
            "children": [
                {
                    "text": "子目录"
                }
            ]
        }]
    });
});

formatter   function(node) 定义如何渲染节点的文本。格式化目录文本，node返回节点对象

$(function () {
    $('#box').tree({
        url: 'content.json',    //远程加载数据
        method:'POST',           //检索数据的 HTTP 方法
        animate:true,            //定义节点在展开或折叠的时候是否显示动画效果
        checkbox:true,            //定义是否在每一个借点之前都显示复选框
        onlyLeafCheck:true,     //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        lines:true,              //定义是否显示树控件上的虚线。
        dnd:true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        formatter:function (node) {     //定义如何渲染节点的文本。格式化目录文本，node返回节点对象
            return '['+node.text+']';
        }
    });
});

loader   function(param,success,error)定义如何从远程服务器加载数据。返回false 可以忽略本操作。该函数具备以下参数：param：发送到远程服务器的参数对象。success(data)：当检索数据成功的时候调用的回调函数。error()：当检索数据失败的时候调用的回调函数。

loadFilter   function(data,parent)返回过滤过的数据进行展示。返回数据是标准树格式。该函数具备以下参数：data：加载的原始数据。parent: DOM 对象，代表父节点。

三，异步加载，也就是远程数据库动态加载目录

如果想从数据库里获取导航内容，那么就必须实现一张父类子类的无限极数据库分类表。主要字段 有

id(编号)、自动编号，记录每一条目录的id号

text(名称)、记录每一条目录的名称

state(状态)、记录每一条目录是否有子目录，closed表示有子目录，open表示无子目录

tid(类别)。记录每一条目录的父级目录id，也就是所属目录的id号，一级目录用0表示

第一步，显示所有一级目录

首次打开页面，时传递数据库tid为0，获取到所有tid为0的数据，也就是获取所有一级目录

html

<ul id="box"></ul>

js

$(function () {

    $('#box').tree({
        url : 'tree.php',    //远程加目录载数据
        lines : true,        //定义是否显示树控件上的虚线。
    });

});

tree.php

<?php
    //sleep(3);
    require 'config.php';

    //$q = $_POST['q'] ? $_POST['q'] : '';

    $tid = 0;       //首次打开页面，时传递数据库tid为0，获取到所有tid为0的数据

//    if (isset($_POST['id'])) {
//        $tid = $_POST['id'];
//    }

    $query = mysql_query("SELECT id,text,state FROM think_nav WHERE tid='$tid'") or die('SQL 错误！');

    $json = '';

    while (!!$row = mysql_fetch_array($query, MYSQL_ASSOC)) {
        $json .= json_encode($row).',';
    }

    $json = substr($json, 0, -1);
    echo '['.$json.']';
    //将获取到的数据转换为json格式
    //[{"id":"1","text":"\u7cfb\u7edf\u7ba1\u7406","state":"closed"},{"id":"2","text":"\u4f1a\u5458\u7ba1\u7406","state":"closed"},{"id":"3","text":"\u4e3b\u673a\u4fe1\u606f","state":"closed"}]
    mysql_close();
?>

 第二步，动态获取子目录

当用户点击父级目录是，会自动将父级目录的id传递到远程地址，获取数据库tid为这个父级id的数据，也就是这个父级目录的子目录

tree.php

<?php
    //sleep(3);
    require 'config.php';

    //$q = $_POST['q'] ? $_POST['q'] : '';

    $tid = 0;       //首次打开页面，时传递数据库tid为0，获取到所有tid为0的数据

    if (isset($_POST['id'])) {          //判断如果，用户点击父级目录时有传递id
        $tid = $_POST['id'];            //将传递的id赋值给tid
    }

    $query = mysql_query("SELECT id,text,state FROM think_nav WHERE tid='$tid'") or die('SQL 错误！');

    $json = '';

    while (!!$row = mysql_fetch_array($query, MYSQL_ASSOC)) {
        $json .= json_encode($row).',';
    }

    $json = substr($json, 0, -1);
    echo '['.$json.']';
    //获取到tid为接收到的父亲id的数据转换为json格式
    //[{"id":"6","text":"\u66f4\u65b0\u4fe1\u606f","state":"open"},{"id":"7","text":"\u7a0b\u5e8f\u4fe1\u606f","state":"open"}]
    mysql_close();
?>

注意：这个过程是动态获取子目录的

第三步，展开所有的目录

html

<ul id="box"></ul>

js

$(function () {

    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        onLoadSuccess: function (node, data) {   //当加载完毕后执行
            //data接收返回的目录对象
            if (data) {        //判断返回的目录对象如果有值
                $(data).each(function (index, value) {        //遍历所有的目录对象
                    if (this.state == 'closed') {            //判断如果目录对象里的state等于closed,说明此目录有子目录
                        $('#box').tree('expandAll');        //展开所有子目录
                    }
                })
            }
        }
    });

});

tree.php

<?php
    //sleep(3);
    require 'config.php';

    //$q = $_POST['q'] ? $_POST['q'] : '';

    $tid = 0;       //首次打开页面，时传递数据库tid为0，获取到所有tid为0的数据

    if (isset($_POST['id'])) {          //判断如果，用户点击父级目录时有传递id
        $tid = $_POST['id'];            //将传递的id赋值给tid
    }

    $query = mysql_query("SELECT id,text,state FROM think_nav WHERE tid='$tid'") or die('SQL 错误！');

    $json = '';

    while (!!$row = mysql_fetch_array($query, MYSQL_ASSOC)) {
        $json .= json_encode($row).',';
    }

    $json = substr($json, 0, -1);
    echo '['.$json.']';
    //获取到tid为接收到的父亲id的数据转换为json格式
    mysql_close();
?>

四，事件列表

很多事件的回调函数都包含'node'参数对象，其具备如下属性：

　　id：绑定节点的标识值。

　　text：显示的节点文本。

　　iconCls：显示的节点图标 CSS 类 ID。

　　checked：该节点是否被选中。

　　state：节点状态，'open' 或 'closed'。

　　attributes：绑定该节点的自定义属性。

　　target：目标 DOM 对象。

onClick   node 在用户点击一个节点的时候触发。

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        onClick:function (node) {                    //点击目录后触发
            $.each(node, function (attr, value){    //遍历出目录对象
                alert(attr + '：' + value);            //打印出对象里的数据
            });
        }
    });
});

onDblClick   node 在用户双击一个节点的时候触发。

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        onDblClick:function (node) {                //双击目录后触发
            $.each(node, function (attr, value){    //遍历出目录对象
                alert(attr + '：' + value);            //打印出对象里的数据
            });
        }
    });
});

onBeforeLoad   node,param在请求加载远程数据之前触发，返回false 可以取消加载操作。

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        onBeforeLoad:function (node,param) {        //在请求加载远程数据之前触发，返回false 可以取消加载操作。
            alert(node);    //接收的目录信息对象
            alert(param);    //接收的目录id对象
            // return false;
        }
    });
});

onLoadSuccess   node, data 在数据加载成功以后触发。

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        onLoadSuccess:function (node, data) {        //在数据加载成功以后触发
            alert(node);    //接收的当前目录信息对象
            alert(data);    //接收的所有目录信息对象
        }
    });
});

onLoadError   arguments在数据加载失败的时候触发，arguments参数和 jQuery 的$.ajax()函数里面的'error'回调函数的参数相同。

$(function () {
    $('#box').tree({
        url: 'tree1.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        onLoadError:function (arguments) {        //在数据加载失败的时候触发
            // alert(arguments);    //接收错误信息对象
            // $.each(arguments, function (attr, value){
            //     alert(attr+value)
            // });
            alert(arguments.status);  //打印错误信息代码
        }
    });
});

onBeforeExpand   node 在节点展开之前触发，返回 false 可以取消展开操作。

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        onBeforeExpand:function (node) {        //在节点展开之前触发，返回 false 可以取消展开操作
            alert(node);    //接收展开目录信息对象
            // return false;
        }
    });
});

onExpand   node 在节点展开的时候触发。

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        onExpand:function (node) {        //在节点展开的时候触发
            alert(node);    //接收展开目录信息对象
            // return false;
        }
    });
});

onBeforeCollapse   node 在节点折叠之前触发，返回 false 可以取消折叠操作。

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        onBeforeCollapse:function (node) {        //在节点折叠之前触发，返回 false 可以取消折叠操作
            alert(node);    //接收折叠目录信息对象
            // return false;
        }
    });
});

onCollapse   node 在节点折叠的时候触发。

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        onCollapse:function (node) {        //在节点折叠的时候触发
            alert(node);    //接收折叠目录信息对象
        }
    });
});

onBeforeCheck   node,checked在用户点击勾选复选框之前触发，返回false 可以取消选择动作。

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        onBeforeCheck:function (node,checked) {        //在用户点击勾选复选框之前触发，返回false 可以取消选择动作
            alert(node);    //接收勾选目录信息对象
            alert(checked); //接收勾选状态，布尔值
        }
    });
});

onCheck   node,checked 在用户点击勾选复选框的时候触发。

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        onCheck:function (node,checked) {        //在用户点击勾选复选框的时候触发
            alert(node);    //接收勾选目录信息对象
            alert(checked); //接收勾选状态，布尔值
        }
    });
});

onBeforeSelect   node 在用户选择一个节点之前触发，返回false 可以取消选择动作。

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        onBeforeSelect:function (node) {        //在用户选择一个节点之前触发，返回false 可以取消选择动作。
            alert(node);    //接收选择目录信息对象
        }
    });
});

onSelect   node 在用户选择节点的时候触发。

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        onSelect:function (node) {        //在用户选择节点的时候触发
            alert(node);    //接收选择目录信息对象
        }
    });
});

onContextMenu   e, node 在右键点击节点的时候触发。

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        onContextMenu:function (node) {        //在右键点击节点的时候触发
            alert(node);    //接收点击目录信息对象
            //可以制作右击弹出菜单
        }
    });
});

onBeforeDrag   node 在开始拖动节点之前触发，返回 false 可以拒绝拖动。

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        onBeforeDrag:function (node) {        //在开始拖动节点之前触发，返回 false 可以拒绝拖动
            alert(node);    //接收拖动目录信息对象
        }
    });
});

onStartDrag   node 在开始拖动节点的时候触发。

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        onStartDrag:function (node) {        //在开始拖动节点的时候触发
            alert(node);    //接收拖动目录信息对象
        }
    });
});

onStopDrag   node 在停止拖动节点的时候触发。

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        onStopDrag:function (node) {        //在停止拖动节点的时候触发
            alert(node);    //接收拖动目录信息对象
        }
    });
});

onDragEnter   target,source在拖动一个节点进入到某个目标节点并释放的时候触发，返回 false 可以拒绝拖动。target：释放的目标节点元素。source：开始拖动的源节点。

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        onDragEnter:function (target,source) {        //在拖动一个节点进入到某个目标节点并释放的时候触发，返回 false 可以拒绝拖动
            alert(target);    //target：释放的目标节点元素
            alert(source);    //source：开始拖动的源节点对象
        }
    });
});

onDragOver   target,source在拖动一个节点经过某个目标节点并释放的时候触发，返回 false 可以拒绝拖动。target：释放的目标节点元素。source：开始拖动的源节点。

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        onDragOver:function (target,source) {        //在拖动一个节点经过某个目标节点并释放的时候触发，返回 false 可以拒绝拖动
            alert(target);    //target：释放的目标节点元素
            alert(source);    //source：开始拖动的源节点对象
        }
    });
});

onDragLeave   target,source在拖动一个节点离开某个目标节点并释放的时候触发，返回 false 可以拒绝拖动。target：释放的目标节点元素。source：开始拖动的源节点。

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        onDragLeave:function (target,source) {        //在拖动一个节点离开某个目标节点并释放的时候触发，返回 false 可以拒绝拖动
            alert(target);    //target：释放的目标节点元素
            alert(source);    //source：开始拖动的源节点对象
        }
    });
});

onBeforeDrop   target,source,point在拖动一个节点放置之前触发，返回 false 可以拒绝拖动。target：释放的目标节点元素。source：开始拖动的源节点。point：表示哪一种拖动操作，可用值有：'append','top' 或 'bottom'。

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        onBeforeDrop:function (target,source,point) {        //在拖动一个节点放置之前触发，返回 false 可以拒绝拖动
            alert(target);    //target：释放的目标节点元素
            alert(source);    //source：开始拖动的源节点对象
            alert(point);    //point：表示哪一种拖动操作，可用值有：'append','top' 或 'bottom'。
        }
    });
});

onDrop   target,source,point当节点位置被拖动放置时触发。target：DOM 对象，需要被拖动动的目标节点。source：源节点。point：表示哪一种拖动操作，可用值有：'append','top' 或 'bottom'。

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        onDrop:function (target,source,point) {        //当节点位置被拖动放置时触发
            alert(target);    //target：释放的目标节点元素
            alert(source);    //source：开始拖动的源节点对象
            alert(point);    //point：表示哪一种拖动操作，可用值有：'append','top' 或 'bottom'。
        }
    });
});

onBeforeEdit   node 在编辑节点之前触发。

onAfterEdit   node 在编辑节点之后触发。

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd: true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        onDblClick: function (node) {                    //双击一个节点时
            $('#box').tree('beginEdit', node.target);    //开始编辑一个节点
        },
        onAfterEdit: function (node) {                        //在编辑节点之后触发
            alert('执行服务器端');
            alert(node);
        }
    });
});

onCancelEdit   node 在取消编辑操作的时候触发。

五，方法列表

options   none 返回树控件属性。

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
    });
    alert($('#box').tree('options'));        //返回树控件属性
});

loadData   data 读取树控件数据。也就是读取一个本地数据替换原来的数据

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
    });

    //点击一个按钮
    $('#anl').click(function () {
        $('#box').tree('loadData', [
            {
                text: '加载'
            }
        ]);
    });
});

getNode   target 获取指定节点对象。

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        onClick : function (node) {
            alert($('#box').tree('getNode', node.target)); //获取指定节点对象
        }
    });
});

getData   target 获取指定节点数据，包含它的子节点。

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        onClick : function (node) {
            alert($('#box').tree('getData', node.target)); //获取指定节点数据，包含它的子节点。
        }
    });
});

reload   target 重新载入树控件数据。也就是重新加载一下数据相当于刷新

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
    });
    //点击一个按钮
    $('#anl').click(function () {
        $('#box').tree('reload');    //重新载入树控件数据。也就是重新加载一下数据相当于刷新
    });
});

getRoot   none 获取根节点，返回节点对象。也就是获取一级目录

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
    });
    //点击一个按钮
    $('#anl').click(function () {
        alert($('#box').tree('getRoot'));    //获取根节点，返回节点对象。
    });
});

getRoots   none 获取所有根节点，返回节点数组。也就是获取所有一级目录

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
    });
    //点击一个按钮
    $('#anl').click(function () {
        alert($('#box').tree('getRoots'));    //获取所有根节点，返回节点数组。也就是获取所有一级目录
    });
});

getParent   target 获取父节点，'target'参数代表节点的 DOM对象。

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        onClick : function (node) {
            alert($('#box').tree('getParent', node.target)); //获取父节点，'target'参数代表节点的 DOM对象。
        }
    });
    //点击一个按钮
    // $('#anl').click(function () {
     //    alert($('#box').tree('getRoots'));    //获取所有根节点，返回节点数组。也就是获取所有一级目录
    // });
});

getChildren   target 获取所有子节点，'target'参数代表节点的DOM 对象。

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        onClick : function (node) {
            alert($('#box').tree('getChildren', node.target));     //获取所有子节点，'target'参数代表节点的DOM 对象
        }
    });
    //点击一个按钮
    // $('#anl').click(function () {
     //    alert($('#box').tree('getRoots'));    //获取所有根节点，返回节点数组。也就是获取所有一级目录
    // });
});

getChecked   state获取所有选中的节点。'state'可用值有：'checked获取勾选的','unchecked获取没勾选的','indeterminate获取未知状态的'。如果'state'第二个参数未指定，将返回'checked'节点。

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        // onClick : function (node) {
        //     alert($('#box').tree('getChildren', node.target));     //获取所有子节点，'target'参数代表节点的DOM 对象
        // }
    });
    //点击一个按钮
    $('#anl').click(function () {
        alert($('#box').tree('getChecked','unchecked'));    //获取勾选或者未勾选的节点对象
    });
});

getSelected   none获取选择节点并返回它，如果未选择则返回null。

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        // onClick : function (node) {
        //     alert($('#box').tree('getChildren', node.target));     //获取所有子节点，'target'参数代表节点的DOM 对象
        // }
    });
    //点击一个按钮
    $('#anl').click(function () {
        alert($('#box').tree('getSelected'));    //获取选择节点并返回它，如果未选择则返回null
    });
});

isLeaf   target 判断指定的节点是否是叶子节点，target 参数是一个节点 DOM 对象。

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        onClick : function (node) {
            alert($('#box').tree('isLeaf', node.target));     //判断指定的节点是否是叶子节点
        }
    });
    //点击一个按钮
    // $('#anl').click(function () {
     //    alert($('#box').tree('getSelected'));    //获取选择节点并返回它，如果未选择则返回null
    // });
});

find   id 查找指定节点并返回节点对象。通过id查找指定节点

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        // onClick : function (node) {
        //     alert($('#box').tree('isLeaf', node.target));     //判断指定的节点是否是叶子节点
        // }
    });
    //点击一个按钮
    $('#anl').click(function () {
        var node = $('#box').tree('find',2);    //查找指定节点并返回节点对象。通过id查找指定节点
        $('#box').tree('select',node.target);    //选择一个节点，'target'参数表示节点的 DOM对象
    });
});

select   target 选择一个节点，'target'参数表示节点的 DOM对象。

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        // onClick : function (node) {
        //     alert($('#box').tree('isLeaf', node.target));     //判断指定的节点是否是叶子节点
        // }
    });
    //点击一个按钮
    $('#anl').click(function () {
        var node = $('#box').tree('find',2);    //查找指定节点并返回节点对象。通过id查找指定节点
        $('#box').tree('select',node.target);    //选择一个节点，'target'参数表示节点的 DOM对象
    });
});

check   target 选中指定节点。勾选一个节点

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        // onClick : function (node) {
        //     alert($('#box').tree('isLeaf', node.target));     //判断指定的节点是否是叶子节点
        // }
    });
    //点击一个按钮
    $('#anl').click(function () {
        var node = $('#box').tree('find',7);    //查找指定节点并返回节点对象。通过id查找指定节点
        $('#box').tree('check',node.target);    //选中指定节点。勾选一个节点
    });
});

uncheck   target 取消选中指定节点。取消勾选一个节点

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        // onClick : function (node) {
        //     alert($('#box').tree('isLeaf', node.target));     //判断指定的节点是否是叶子节点
        // }
    });
    //点击一个按钮
    $('#anl').click(function () {
        var node = $('#box').tree('find',7);    //查找指定节点并返回节点对象。通过id查找指定节点
        $('#box').tree('uncheck',node.target);    //取消选中指定节点。取消勾选一个节点
    });
});

collapse   target 折叠一个节点，'target'参数表示节点的 DOM对象。

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        // onClick : function (node) {
        //     alert($('#box').tree('isLeaf', node.target));     //判断指定的节点是否是叶子节点
        // }
    });
    //点击一个按钮
    $('#anl').click(function () {
        var node = $('#box').tree('find',1);    //查找指定节点并返回节点对象。通过id查找指定节点
        $('#box').tree('collapse',node.target);    //折叠一个节点
    });
});

expand   target展开一个节点，'target'参数表示节点的 DOM对象。在节点关闭或没有子节点的时候，节点ID 的值(名为'id'的参数)将会发送给服务器请求子节点的数据。

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        // onClick : function (node) {
        //     alert($('#box').tree('isLeaf', node.target));     //判断指定的节点是否是叶子节点
        // }
    });
    //点击一个按钮
    $('#anl').click(function () {
        var node = $('#box').tree('find',1);    //查找指定节点并返回节点对象。通过id查找指定节点
        $('#box').tree('expand',node.target);    //展开一个节点，'target'参数表示节点的 DOM对象。在节点关闭或没有子节点的时候，节点ID 的值(名为'id'的参数)将会发送给服务器请求子节点的数据。
    });
});

collapseAll   target 折叠所有节点。

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        // onClick : function (node) {
        //     alert($('#box').tree('isLeaf', node.target));     //判断指定的节点是否是叶子节点
        // }
    });
    //点击一个按钮
    $('#anl').click(function () {
        // var node = $('#box').tree('find',1);    //查找指定节点并返回节点对象。通过id查找指定节点
        $('#box').tree('collapseAll');    //折叠所有节点。
    });
});

expandAll   target 展开所有节点。

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        // onClick : function (node) {
        //     alert($('#box').tree('isLeaf', node.target));     //判断指定的节点是否是叶子节点
        // }
    });
    //点击一个按钮
    $('#anl').click(function () {
        // var node = $('#box').tree('find',1);    //查找指定节点并返回节点对象。通过id查找指定节点
        $('#box').tree('expandAll');    //展开所有节点。
    });
});

expandTo   target 打开从根节点到指定节点之间的所有节点。

scrollTo   target 滚动到指定节点。

append   param追加若干子节点到一个父节点，param 参数有2 个属性：parent：DOM 对象，将要被追加子节点的父节点，如果未指定，子节点将被追加至根节点。data：数组，节点数据。

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        // onClick : function (node) {
        //     alert($('#box').tree('isLeaf', node.target));     //判断指定的节点是否是叶子节点
        // }
    });
    //点击一个按钮
    $('#anl').click(function () {
        var node = $('#box').tree('find',1);    //查找指定节点并返回节点对象。通过id查找指定节点
        $('#box').tree('append',{        //追加若干子节点到一个父节点，param 参数有2 个属性：parent：DOM 对象，将要被追加子节点的父节点，如果未指定，子节点将被追加至根节点。data：数组，节点数据。
            parent:node.target,            //要插入的父节点
            data:[{                        //要插入的节点
                text:'添加节点1'
            }]
        });
    });
});

toggle   target 打开或关闭节点的触发器，也就是展开关闭来回切换器，target 参数是一个节点 DOM 对象。

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        // onClick : function (node) {
        //     alert($('#box').tree('toggle', node.target));     //打开或关闭节点的触发器，target 参数是一个节点 DOM 对象
        // }
    });
    //点击一个按钮
    $('#anl').click(function () {
        var node = $('#box').tree('find',1);    //查找指定节点并返回节点对象。通过id查找指定节点
        $('#box').tree('toggle',node.target);    //打开或关闭节点的触发器，也就是展开关闭来回切换器，target 参数是一个节点 DOM 对象。
    });
});

insert   param在一个指定节点之前或之后插入节点，'param'参数包含如下属性：before：DOM 对象，在某个节点之前插入。after：DOM 对象，在某个节点之后插入。data：对象，节点数据。

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        // onClick : function (node) {
        //     alert($('#box').tree('toggle', node.target));     //打开或关闭节点的触发器，target 参数是一个节点 DOM 对象
        // }
    });
    //点击一个按钮
    $('#anl').click(function () {
        var node = $('#box').tree('find',2);    //查找指定节点并返回节点对象。通过id查找指定节点
        $('#box').tree('insert',{                //在一个指定节点之前或之后插入节点
            before:node.target,
            data:[
                {
                    text:'插入节点'
                }
            ]
        });
    });
});

remove   target 移除一个节点和它的子节点，'target'参数是该节点的 DOM 对象。

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        // onClick : function (node) {
        //     alert($('#box').tree('toggle', node.target));     //打开或关闭节点的触发器，target 参数是一个节点 DOM 对象
        // }
    });
    //点击一个按钮
    $('#anl').click(function () {
        var node = $('#box').tree('find',2);    //查找指定节点并返回节点对象。通过id查找指定节点
        $('#box').tree('remove',node.target);    //移除一个节点和它的子节点
    });
});

pop   target移除一个节点和它的子节点，该方法跟remove 方法一样，不同的是它将返回被移除的节点数据。

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        // onClick : function (node) {
        //     alert($('#box').tree('toggle', node.target));     //打开或关闭节点的触发器，target 参数是一个节点 DOM 对象
        // }
    });
    //点击一个按钮
    $('#anl').click(function () {
        var node = $('#box').tree('find',2);    //查找指定节点并返回节点对象。通过id查找指定节点
        alert($('#box').tree('pop',node.target));    //移除一个节点和它的子节点，该方法跟remove 方法一样，不同的是它将返回被移除的节点数据。
    });
});

update   param修改指定节点。'param'参数包含以下属性：target(DOM 对象，将被更新的目标节点)，id，text，iconCls，checked 等。

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        // onClick : function (node) {
        //     alert($('#box').tree('toggle', node.target));     //打开或关闭节点的触发器，target 参数是一个节点 DOM 对象
        // }
    });
    //点击一个按钮
    $('#anl').click(function () {
        var node = $('#box').tree('find',2);    //查找指定节点并返回节点对象。通过id查找指定节点
        $('#box').tree('update',{
            target:node.target,                    //要修改的目标
            text:'修改'                            //修改名称
        });
    });
});

enableDnd   none 启用拖拽功能。

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        // onClick : function (node) {
        //     alert($('#box').tree('toggle', node.target));     //打开或关闭节点的触发器，target 参数是一个节点 DOM 对象
        // }
    });
    //点击一个按钮
    $('#anl').click(function () {
        // var node = $('#box').tree('find',2);    //查找指定节点并返回节点对象。通过id查找指定节点
        $('#box').tree('enableDnd');            //启用拖拽功能
    });
});

disableDnd   none 禁用拖拽功能。

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd : true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        // onClick : function (node) {
        //     alert($('#box').tree('toggle', node.target));     //打开或关闭节点的触发器，target 参数是一个节点 DOM 对象
        // }
    });
    //点击一个按钮
    $('#anl').click(function () {
        // var node = $('#box').tree('find',2);    //查找指定节点并返回节点对象。通过id查找指定节点
        $('#box').tree('disableDnd');            //禁用拖拽功能
    });
});

beginEdit   target 开始编辑一个节点。

$(function () {
    $('#box').tree({
        url: 'tree.php',    //远程加目录载数据
        lines: true,        //定义是否显示树控件上的虚线。
        animate : true,        //在展开或者折叠时显示动画效果
        checkbox : true,    //定义节点显示复选框
        cascadeCheck : false,    //定义是否层叠选中状态。也就是选择时不关联上级目录
        onlyLeafCheck : true,    //定义是否只在末级节点之前显示复选框。也就是只有最底层目录才显示复选框
        dnd: true,                //定义是否启用拖拽功能。也就是支持拖拽改变层级关系
        onDblClick: function (node) {                    //双击一个节点时
            $('#box').tree('beginEdit', node.target);    //开始编辑一个节点
        },
        onAfterEdit: function (node) {                        //在编辑节点之后触发
            alert('执行服务器端');
            alert(node);
        }
    });
});

endEdit   target 结束编辑一个节点。

cancelEdit   target 取消编辑一个节点。