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 相关文章推荐
JavaScript 异步调用框架 (Part 1 - 问题 &amp; 场景)
Aug 03 Javascript
Javascript 遮罩层和加载效果代码
Aug 01 Javascript
javascript实现点击按钮让DIV层弹性移动的方法
Feb 24 Javascript
JavaScript String(字符串)对象的简单实例(推荐)
Aug 31 Javascript
浅谈jQuery添加的HTML,JS失效的问题
Oct 05 Javascript
JavaScript实现经纬度转换成地址功能
Mar 28 Javascript
带你了解session和cookie作用原理区别和用法
Aug 14 Javascript
highCharts提示框中显示当前时间的方法
Jan 18 Javascript
使用JavaScrip模拟实现仿京东搜索框功能
Oct 16 Javascript
vue中实现拖动调整左右两侧div的宽度的示例代码
Jul 22 Javascript
js实现限定范围拖拽的示例
Oct 26 Javascript
Node.js文本文件BOM头的去除方法
Nov 22 Javascript
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添加MySQL数据记录代码
2008/06/07 PHP
ThinkPHP查询返回简单字段数组的方法
2014/08/25 PHP
简介WordPress中用于获取首页和站点链接的PHP函数
2015/12/17 PHP
PHP实现双链表删除与插入节点的方法示例
2017/11/11 PHP
统计jQuery中各字符串出现次数的工具
2012/05/03 Javascript
实用框架(iframe)操作代码
2014/10/23 Javascript
JS动态显示表格上下frame的方法
2015/03/31 Javascript
javascript日期计算实例分析
2015/06/29 Javascript
基于jQuery实现动态数字展示效果
2015/08/12 Javascript
jQuery animate easing使用方法图文详解
2016/06/17 Javascript
javascript稀疏数组(sparse array)和密集数组用法分析
2016/12/28 Javascript
微信小程序实现图片预加载组件
2017/01/18 Javascript
垃圾回收器的相关知识点总结
2018/05/13 Javascript
Node.js命令行/批处理中如何更改Linux用户密码浅析
2018/07/22 Javascript
详细讲解如何创建, 发布自己的 Vue UI 组件库
2019/05/29 Javascript
react koa rematch 如何打造一套服务端渲染架子
2019/06/26 Javascript
JS+CSS实现过渡特效
2021/01/02 Javascript
Python 文件操作实现代码
2009/10/07 Python
python脚本实现统计日志文件中的ip访问次数代码分享
2014/08/06 Python
pandas通过字典生成dataframe的方法步骤
2019/07/23 Python
python分布式编程实现过程解析
2019/11/08 Python
Cython编译python为so 代码加密示例
2019/12/23 Python
Jupyter Notebook 实现正常显示中文和负号
2020/04/24 Python
详解Python之Scrapy爬虫教程NBA球员数据存放到Mysql数据库
2021/01/24 Python
猫途鹰英国网站:TripAdvisor英国(旅游社区和旅游评论)
2016/08/30 全球购物
通信工程毕业生求职信
2013/11/16 职场文书
信用社员工先进事迹材料
2014/02/04 职场文书
《果园机器人》教学反思
2014/04/13 职场文书
小学数学教学经验交流材料
2014/05/22 职场文书
消防标语大全
2014/06/07 职场文书
北京奥运会口号
2014/06/21 职场文书
中学生民族团结演讲稿
2014/08/27 职场文书
公司感恩节活动策划书
2014/10/11 职场文书
感谢信怎么写
2015/01/21 职场文书
转学证明范本
2015/06/19 职场文书
关于windows server 2012 DC 环境 重启后蓝屏代码:0xc00002e2的问题
2022/05/25 Servers