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":"u7cfbu7edfu7ba1u7406","state":"closed"},{"id":"2","text":"u4f1au5458u7ba1u7406","state":"closed"},{"id":"3","text":"u4e3bu673au4fe1u606f","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":"u66f4u65b0u4fe1u606f","state":"open"},{"id":"7","text":"u7a0bu5e8fu4fe1u606f","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 取消编辑一个节点。