`

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

阅读更多
用 $.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#"
}]
}]

特性

名称
类型
说明
默认值
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:节点的 id
text:节点的文字
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
取消编辑节点。
分享到:
评论

相关推荐

    jQueryEasyUI1.4.1-版-API-中文版

    这个"jQueryEasyUI1.4.1-版-API-中文版"包含了jQuery EasyUI 1.4.1版本的API文档,对于理解和使用该框架非常有帮助。 1. **jQuery EasyUI 概述** jQuery EasyUI 是由一系列预定义的jQuery插件组成的框架,它将常见...

    jquery-easyui-1.7.0.zip官方文档

    2. 组件丰富:包括对话框(Dialog)、表格(Grid)、表单(Form)、菜单(Menu)、树形控件(Tree)、下拉选择(Combobox)等多种常见UI组件,满足各种界面需求。 3. 主题支持:内置多套主题,可自定义样式,满足...

    jquery-easyui资料和文档

    此外,jQuery EasyUI的文档通常包含了详细的API说明、示例代码以及常见问题解答,使得学习和使用变得更为容易。在项目中引入jQuery EasyUI,不仅可以提升开发效率,还能确保UI的统一性和专业性,从而提高用户体验。...

    jQuery EasyUI 1.5.1 版 API 中文版

    通过深入学习这份 `jQuery EasyUI 1.5.1 版 API 中文版` 文档,开发者不仅可以提升使用 jQuery EasyUI 的能力,还能更好地理解和应用前端框架,提高开发效率,为用户创建美观且功能丰富的网页应用。无论是初学者还是...

    很好用的jquery-easyui-EDT-1.4.5-build1

    要使用jQuery EasyUI EDT 1.4.5-build1,开发者需要熟悉jQuery基础,了解基本的HTML和CSS知识,同时可以通过官方文档、示例代码和社区资源来学习和掌握各种组件的用法。 总之,jQuery EasyUI EDT 1.4.5-build1是一...

    jquery-easyui-tree学习

    总的来说,jQuery EasyUI Tree组件以其简洁的API和丰富的功能,大大简化了开发者构建树形结构的工作。通过熟练掌握其用法和扩展技巧,我们可以构建出更富有交互性和用户体验的Web应用。在实际项目中,应结合具体需求...

    jquery easyui 帮助文档

    jQuery EasyUI 的核心在于其组件系统,这些组件包括但不限于数据网格(datagrid)、下拉菜单(combobox)、对话框(dialog)、表单(form)、布局(layout)、菜单(menu)、面板(panel)、进度条(progressbar)、...

    jqueryEasyUI

    API 文档通常会详细介绍每个组件的方法、属性和事件,便于开发者查阅和应用。 ### 4. 主要应用场景 jQuery EasyUI 适用于企业级后台管理系统、数据展示界面、Web 应用的前端开发。它的组件丰富,样式统一,可以...

    jQuery EasyUI API 中文文档 - ComboTree组合树

    ComboTree是jQuery EasyUI框架中的一个组件,它结合了下拉框(Combo)和树形控件(Tree)的功能,用来展示一个层级化的数据结构,并允许用户通过下拉框选择树中的节点。ComboTree组件是易于使用的,并且它通常用于...

    jQuery_easyui+jQuery1.7API

    jQuery EasyUI和jQuery 1.7 API是Web开发中广泛使用的两个工具,它们为开发者提供了强大的功能和便捷的使用体验。本文将深入探讨这两个组件的核心概念、使用方法以及在实际项目中的应用。 一、jQuery EasyUI简介 ...

    jQuery EasyUI 1.3.2 API离线文档

    - **组件丰富**:EasyUI 提供了如对话框(dialog)、表格(datagrid)、树形结构(tree)、菜单(menu)等多种常用组件,帮助快速构建交互式Web应用。 - **主题支持**:内含多种预设主题,可轻松改变页面样式,...

    jQuery EasyUI 官方API中文版

    这个框架的官方API中文版是开发者的重要参考资料,它详细解释了每个组件的用法、属性、方法和事件,使得国内开发者能够更加方便地理解和使用jQuery EasyUI。 首先,我们要理解jQuery EasyUI的核心概念。它主要基于...

    jQuery EasyUI 1.3.6 离线简体中文API文档

    最新版本的jQuery EasyUI 1.3.6版全中文API汉化文档火热出炉,由于很多人和我要chm格式的,所以本次API我提供了2种版本的API,一个还是以前的EXE格式,另外一个就是人气颇高的chm格式。本次还将EasyUI 1.3.6版直接...

    jquery-easyui官方示例及API文档中文版

    《jQuery EasyUI官方示例与API文档中文版详解》 jQuery EasyUI是一个基于jQuery的UI框架,它提供了丰富的组件和方便的API,使得开发者能够快速构建功能强大的Web应用。在这个"jquery-easyui-1.5.4.5"版本中,包含了...

    jQuery EasyUI 1.5.1 中文API文档 帮助手册 chm pdf demo

    中文API文档是开发者在使用jQuery EasyUI时的重要参考资料,它详细解释了各种组件的用法、选项、事件和方法,帮助开发者快速理解和应用。 此压缩包包含了三种格式的文档资源:CHM(Compiled HTML Help)、PDF 和 ...

    jQuery EasyUI 1.5.1 中文API文档(chm、exe、pdf)

    通过深入学习和实践jQuery EasyUI 1.5.1的中文API文档,开发者可以高效地构建功能丰富的Web应用程序,提升开发效率,同时保持界面的美观和用户体验。无论是初学者还是经验丰富的开发者,这些文档都是必不可少的参考...

    jQuery EasyUI 1.2.4 API 中文文档.chm

    本 chm 文档是根据博客园“风流涕淌”的《jQuery EasyUI 1.2.4 API 中文文档(完整)目录》整理而成 http://www.cnblogs.com/Philoo/archive/2011/11/17/jeasyui_api_index.html Base 基础 Documentation 文档 ...

    jquery easyui 中文api

    - `jquery easyui 1.5中文文档.exe` 包含的是 EasyUI 1.5 版本的中文 API 文档,这个文档提供了详尽的组件介绍、方法说明和示例代码,是学习和使用 EasyUI 的重要参考资料。 - 通过阅读文档,开发者可以快速了解每...

Global site tag (gtag.js) - Google Analytics