`

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":[{
		"id":2,
		"text":"File1",
		"checked":true
	},{
		"id":3,
		"text":"Folder2",
		"state":"open",
		"children":[{
			"id":4,
			"text":"File2",
			"attributes":{
				"p1":"value1",
				"p2":"value2"
			},
			"checked":true,
			"iconCls":"icon-reload"
		},{
			"id": 8,
			"text":"Folder3",
			"state":"closed",
			"children":[{
				"id":9,
				"text":"File31"
			},{
				"id":10,
				"text":"File32"
			}]
		}]
	}]
},{
	"text":"Languages",
	"state":"closed",
	"children":[{
		"id":"j1",
		"text":"Java"
	},{
		"id":"j2",
		"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

当节点被拖拽施放时触发。
targetDOM 对象,拖放的目标节点。
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 对象,被更新的节点)、idtexticonClschecked、等等。

enableDnd

none

启用拖放功能。

disableDnd

none

禁用拖放功能。

beginEdit

nodeEl

开始编辑节点。

endEdit

nodeEl

结束编辑节点。

cancelEdit

nodeEl

取消编辑节点。

 

转载地址:http://www.cnblogs.com/Philoo/archive/2011/11/18/jeasyui_api_tree.html

分享到:
评论

相关推荐

    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-EDT-1.4.5-build1

    jQuery EasyUI 是一套基于 jQuery 的 UI 组件库,它遵循 MVC(Model-View-Controller)模式,提供了诸如对话框、表格、树形控件、下拉菜单、按钮、分页等常见的Web界面元素。它的核心优势在于简化HTML标记,通过CSS...

    jQuery EasyUI 1.5.1 版 API 中文版

    2. **组件详解**:jQuery EasyUI 提供了许多组件,如 `datagrid`(数据网格)、`dialog`(对话框)、`menu`(菜单)、`tabs`(选项卡)、`tree`(树形结构)和`form`(表单)。每个组件都有详细的配置选项、方法和...

    jquery easyui 帮助文档

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

    jqueryEasyUI

    **jQuery EasyUI 知识点详解** jQuery EasyUI 是一个基于 jQuery 的前端框架,它提供了一系列的 UI 组件,使得开发者能够快速...在实际项目中,熟练掌握 jQuery EasyUI 的使用技巧和 API,对于提升工作效率至关重要。

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

    本文档就是针对jQuery EasyUI中的Tree组件的API中文介绍,帮助开发者理解和使用Tree组件。 Tree组件能够在`&lt;ul&gt;`元素中定义,用于表示一个树状的数据结构。每个树节点可以用`&lt;li&gt;`元素来表示,而子节点则嵌套在父...

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

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

    jquery-easyui-tree学习

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

    jQuery EasyUI 1.3.2 API离线文档

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

    jQuery EasyUI 官方API中文版

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

    jQuery_easyui+jQuery1.7API

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

    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 是一个基于 jQuery 的前端...无论选择哪种格式,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 文档 ...

    初试JqueryEasyUI(附Demo)

    在初试 Jquery EasyUI 的 Demo 中,你可以通过阅读 `初试JqueryEasyUI.docx` 和 `初试JqueryEasyUI.mht` 文件了解详细步骤和示例代码。`EasyUIDemo` 文件可能是包含实际演示的 HTML 和 JavaScript 代码,可以运行...

Global site tag (gtag.js) - Google Analytics