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

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": "审核会员"
}
]
}
]

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

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": "审核会员"
}
]
}
]

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

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

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

二.属性列表

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

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

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

第二百二十六节,jQuery EasyUI,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 //定义是否在每一个借点之前都显示复选框
});
});

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

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

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

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

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

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

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

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

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

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

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": "子目录"
}
]
}]
});
});

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

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+']';
}
});
});

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

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表示

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

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

首次打开页面,时传递数据库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();
?>

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

 第二步,动态获取子目录

当用户点击父级目录是,会自动将父级目录的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();
?>

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

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

第三步,展开所有的目录

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

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

四,事件列表

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

  id:绑定节点的标识值。

  text:显示的节点文本。

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

  checked:该节点是否被选中。

  state:节点状态,'open' 或 'closed'。

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

  target:目标 DOM 对象。

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

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

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

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

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

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

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 在取消编辑操作的时候触发

五,方法列表

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

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

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

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

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

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 取消编辑一个节点。

上一篇:android 开发Handler源码剖析


下一篇:Linux(Fedora) 安装 Oracle XE Database