jQuery EasyUI API 中文文档 - Tree树使用介绍


Posted in Javascript onNovember 19, 2011

用 $.fn.tree.defaults 重写了 defaults。

依赖

draggable
droppable
用法

Tree 能在 <ul> 元素里定义,此标记可以定义为叶节点和子节点。下面是一个示例:

<ul id="tt"> 
<li> 
<span>Folder</span> 
<ul> 
<li> 
<span>Sub Folder 1</span> 
<ul> 
<li> 
<span><a href="#">File 11</a></span> 
</li> 
<li> 
<span>File 12</span> 
</li> 
<li> 
<span>File 13</span> 
</li> 
</ul> 
</li> 
<li> 
<span>File 2</span> 
</li> 
<li> 
<span>File 3</span> 
</li> 
</ul> 
</li> 
<li> 
<span>File21</span> 
</li> 
</ul>

Tree 也可以在一个空的 <ul> 元素里定义。
<ul id="tt"></ul>
$('#tt').tree({ 
url:'tree_data.json' 
});

树数据的格式(Tree data format)
每个节点可以包含下列特性:
id:节点的 id,它对于加载远程数据很重要。
text:显示的节点文字。
state:节点状态, 'open' 或 'closed',默认是 'open'。当设为 'closed' 时,此节点有子节点,并且将从远程站点加载它们。
checked:指示节点是否被选中。 Indicate whether the node is checked selected.
attributes:给一个节点追加的自定义属性。
children:定义了一些子节点的节点数组。
示例:
[{ 
"id":1, 
"text":"Folder1", 
"iconCls":"icon-save", 
"children":[{ 
"text":"File1", 
"checked":true 
},{ 
"text":"Books", 
"state":"open", 
"attributes":{ 
"url":"/demo/book/abc", 
"price":100 
}, 
"children":[{ 
"text":"PhotoShop", 
"checked":true 
},{ 
"id": 8, 
"text":"Sub Bookds", 
"state":"closed" 
}] 
}] 
},{ 
"text":"Languages", 
"state":"closed", 
"children":[{ 
"text":"Java" 
},{ 
"text":"C#" 
}] 
}]

特性<?XML:NAMESPACE PREFIX = O />

名称 类型 说明 默认值
url string 获取远程数据的 URL 。 null
method string 获取数据的 http method 。 post
animate boolean 定义当节点展开折叠时是否显示动画效果。 false
checkbox boolean 定义是否在每个节点前边显示 checkbox 。 false
cascadeCheck boolean 定义是否级联检查。 true
onlyLeafCheck boolean 定义是否只在叶节点前显示 checkbox 。 false
dnd boolean 定义是否启用拖放。 false
data array 加载的节点数据。 null

事件

很多事件的回调函数需要 'node' 函数,它包含下列特性:

  • id:绑定到节点的标识值。
  • text:显示的文字。
  • checked:是否节点被选中。
  • attributes:绑定到节点的自定义属性。
  • target:目标的 DOM 对象。
名称 参数 说明
onClick node 当用户点击一个节点时触发, node 参数包含下列特性:id:节点的 idtext:节点的文字checked:节点是否被选中attributes:节点自定义属性target:被点击目标的 DOM 对象
onDblClick node 当用户双击一个节点时触发。
onBeforeLoad node, param 当加载数据的请求发出前触发,返回 false 就取消加载动作。
onLoadSuccess node, data 当数据加载成功时触发。
onLoadError arguments 当数据加载失败时触发, arguments 参数与 jQuery.ajax 的'error' 函数一样。.
onBeforeExpand node 节点展开前触发,返回 false 就取消展开动作。
onExpand node 当节点展开时触发。
onBeforeCollapse node 节点折叠前触发,返回 false 就取消折叠动作。
onCollapse node 当节点折叠时触发。
onCheck node, checked 当用户点击 checkbox 时触发。
onBeforeSelect node 节点被选中前触发,返回 false 就取消选择动作。
onSelect node 当节点被选中时触发。
onContextMenu e, node 当右键点击节点时触发。
onDrop target, source, point 当节点被拖拽施放时触发。target:DOM 对象,拖放的目标节点。source:源节点。point:表示拖放操作,可能是值是: 'append'、'top' 或 'bottom'。
onBeforeEdit node 编辑节点前触发。
onAfterEdit node 编辑节点后触发。
onCancelEdit node 当取消编辑动作时触发。

方法

名称 参数 说明
options none 返回树的 options。
loadData data 加载树的数据。
getNode target 获取指定的节点对象。
getData target 获取指定的节点数据,包括它的子节点。
reload target 重新加载树的数据。
getRoot none 获取根节点,返回节点对象。
getRoots none 获取根节点们,返回节点数组。
getParent target 获取父节点, target 参数指节点的 DOM 对象。
getChildren target 获取子节点, target 参数指节点的 DOM 对象。
getChecked none 获取所有选中的节点。
getSelected none 获取选中的节点并返回它,如果没有选中节点,就返回 null。
isLeaf target 把指定的节点定义成叶节点, target 参数表示节点的 DOM 对象。
find id 找到指定的节点并返回此节点对象。
select target 选中一个节点, target 参数表示节点的 DOM 对象。
check target 把指定节点设置为勾选。
uncheck target 把指定节点设置为未勾选。
collapse target 折叠一个节点, target 参数表示节点的 DOM 对象。
expand target 展开一个节点, target 参数表示节点的 DOM 对象。
collapseAll target 折叠所有的节点们。
expandAll target 展开所有的节点们。
expandTo target 从指定节点的根部展开。
append param 追加一些子节点们到一个父节点, param 参数有两个特性:parent:DOM 对象,追加到的父节点,如果没有分配,则追加为根节点。data:数组,节点们的数据。
toggle target 切换节点的展开/折叠状态, target 参数表示节点的 DOM 对象。
insert param 在指定节点的前边或后边插入一个节点, param 参数包含下列特性:before:DOM 对象,前边插入的节点。after:DOM 对象,后边插入的节点。data:对象,节点数据。
remove target 移除一个节点和它的子节点们, target 参数表示节点的 DOM 对象。
pop target 弹出一个节点和它的子节点们,此方法和 remove 一样,但是返回了移除的节点数据。
update param 跟心指定的节点, param 参数有下列特性:target(DOM 对象,被更新的节点)、id、text、iconCls、checked、等等。
enableDnd none 启用拖放功能。
disableDnd none 禁用拖放功能。
beginEdit nodeEl 开始编辑节点。
endEdit nodeEl 结束编辑节点。
cancelEdit nodeEl 取消编辑节点。
Javascript 相关文章推荐
jQuery入门基础知识学习指南
Aug 14 Javascript
浅析jQuery移动开发中内联按钮和分组按钮的编写
Dec 04 Javascript
JS JSOP跨域请求实例详解
Jul 04 Javascript
js获取当前页的URL与window.location.href简单方法
Feb 13 Javascript
微信小程序实现星级评分和展示
Jul 05 Javascript
使用D3.js+Vue实现一个简单的柱形图
Aug 05 Javascript
angular6的table组件开发的实现示例
Dec 26 Javascript
ES6数组与对象的解构赋值详解
Jun 14 Javascript
微信小程序全选多选效果实现代码解析
Jan 21 Javascript
Vue Cli3 打包配置并自动忽略console.log语句的方法
Apr 23 Javascript
Openlayers实现地图的基本操作
Sep 28 Javascript
Vue实现图书管理案例
Jan 20 Vue.js
ToolTips JQEURY插件之简洁小提示框效果
Nov 19 #Javascript
基于Jquery插件开发之图片放大镜效果(仿淘宝)
Nov 19 #Javascript
20款效果非常棒的 jQuery 插件小结分享
Nov 18 #Javascript
jQuery EasyUI API 中文文档 - PropertyGrid属性表格
Nov 18 #Javascript
jQuery EasyUI API 中文文档 - DataGrid数据表格
Nov 17 #Javascript
Jquery 获取checkbox的checked问题
Nov 16 #Javascript
JS 操作符整理[推荐收藏]
Nov 15 #Javascript
You might like
php设计模式 Template (模板模式)
2011/06/26 PHP
具有时效性的php加密解密函数代码
2013/06/19 PHP
使用PHP导出Redis数据到另一个Redis中的代码
2014/03/12 PHP
PHP输出英文时间日期的安全方法(RFC 1123格式)
2014/06/13 PHP
ThinkPHP之N方法实例详解
2014/06/20 PHP
详解PHP导入导出CSV文件
2014/11/03 PHP
表单提交错误后返回内容消失问题的解决方法(PHP网站)
2015/10/20 PHP
CodeIgniter视图使用注意事项
2016/01/20 PHP
使用PHP开发留言板功能
2019/11/19 PHP
jquery.ui.draggable中文文档
2009/11/24 Javascript
用JavaScript实现动画效果的方法
2013/07/20 Javascript
Jquery ajax执行顺序 返回自定义错误信息(实例讲解)
2013/11/06 Javascript
javascript:void(0)是什么意思示例介绍
2013/11/17 Javascript
jquery中常用的函数和属性详细解析
2014/03/07 Javascript
浅谈JS闭包中的循环绑定处理程序
2014/11/09 Javascript
jQuery分组选择器用法实例
2014/12/23 Javascript
EasyUI学习之DataGird分页显示数据
2016/12/29 Javascript
js es6系列教程 - 新的类语法实战选项卡(详解)
2017/09/02 Javascript
微信小程序实现城市列表选择
2018/06/05 Javascript
微信小程序实现页面下拉刷新和上拉加载功能详解
2018/12/03 Javascript
vue-cli3 从搭建到优化的详细步骤
2019/01/20 Javascript
从理论角度讨论JavaScript闭包
2019/04/03 Javascript
解决cordova+vue 项目打包成APK应用遇到的问题
2019/05/10 Javascript
微信小程序版本自动更新的方法
2019/06/14 Javascript
在Python的Django框架中编写错误提示页面
2015/07/22 Python
Python读取指定目录下指定后缀文件并保存为docx
2017/04/23 Python
Python 3.6 性能测试框架Locust安装及使用方法(详解)
2017/10/11 Python
Python 利用pydub库操作音频文件的方法
2019/01/09 Python
树莓派3 搭建 django 服务器的实例
2019/08/29 Python
Django之PopUp的具体实现方法
2019/08/31 Python
NBA欧洲商店(法国):NBA Europe Store FR
2016/10/19 全球购物
导游实习生自荐书
2014/01/28 职场文书
任命书格式
2014/06/05 职场文书
优质服务心得体会(共4篇)
2016/01/22 职场文书
Python爬取用户观影数据并分析用户与电影之间的隐藏信息!
2021/06/29 Python
python异步的ASGI与Fast Api实现
2021/07/16 Python