F.js v7.1.0

Class: Tree

F. Tree

new F.Tree(options)

F.Tree.js, line 3
树控件
Name Type Description
options Object 初始参数
Name Type Default Description
rootNode Object 数据源
icons boolean true 是否显示树节点图标
multiSelect boolean false 是否允许多选（通过 Ctrl, Shift 键进行多选）
keepCurrentSelection boolean false 多选时保持当前已选中节点
enableTextSelection boolean false 是否启用文本选择
singleClickExpand boolean false 单击展开树节点
singleExpand boolean false 同一级别的树节点同时只能展开一个
nodeHyperLink boolean false 是否将树节点渲染为超链接（点击节点空白处也能触发超链接）
autoLeafIdentification boolean true 是否将没有子节点的节点自动标识为叶子节点
hideHScrollbar boolean false 是否隐藏水平滚动条
hideVScrollbar boolean false 是否隐藏垂直滚动条
expanderToRight boolean false 是否将展开折叠图标移到文字右侧
headerStyle boolean false 是否启用一级树节点标题栏样式
miniMode boolean false 是否启用微型模式
miniModePopWidth boolean 200 微型模式弹出树控件的宽度
expandOnDblClick boolean true 双击展开树节点
checkbox boolean false 是否启用复选框
onlyLeafCheck boolean false 是否只显示叶子节点复选框
cascadeCheck boolean false 是否启用级联选择
clickOnContextMenu boolean true 右键点击时选中当前节点（默认为true）
showSelectedNode boolean true 显示选中的节点
nodeHoverState boolean true 启用节点的鼠标悬停样式
type string 'tree' 控件类型
Example

创建一个树，使用内联数据：

F.create({
	type: 'tree', renderTo: '#wrap1', height: 300, title: '树控件',
	rootNode: {
		expanded: true, children: [{
			text: '中国', expanded: true, children: [{
				text: '河南省', children: [{
					text: '驻马店市'
				}, {
					text: '漯河市'
				}]
			}, {
				text: '安徽省', expanded: true, children: [{
					text: '合肥市', expanded: true, children: [{
						text: '金色池塘小区'
					}, {
						text: '中国科学技术大学'
					}]
				}]
			}]
		}]
	}
});

Extends

Members

bodyEljQuery

控件主体对应的jQuery节点对象

eljQuery

控件对应的jQuery节点对象

itemsObject

子控件列表

Methods

inherited add(value)

F.Container.js, line 55
添加新的子控件到当前控件
Name Type Description
value Object | Array.<Object> 控件实例数组
Example
menu1.add(['-', {
		type: 'menuitem',
		text: '新菜单项'
}]);

inherited addTool(item)

F.PanelBase.js, line 171
添加工具图标
Name Type Description
item F.Tool 工具图标实例

checkNode(node, deep)

F.Tree.js, line 419
选中节点复选框
Name Type Description
node string | jQuery 节点标识符或者节点元素
deep boolean 是否递归调用子节点

checkNodes(nodes, deep)

F.Tree.js, line 403
选中节点复选框
Name Type Description
nodes Array.<string> 节点标识符数组
deep boolean 是否递归调用子节点

clearDirty()

F.Tree.js, line 515
不支持此方法

clearSelection()

F.Tree.js, line 496
清空全部选中节点

inherited collapse()

F.PanelBase.js, line 194
折叠面板

collapseNode(node, deep)

F.Tree.js, line 387
折叠节点
Name Type Description
node string | jQuery 节点标识符或者节点元素
deep boolean 是否递归调用子节点

collapseNodes()

F.Tree.js, line 393
折叠全部节点

deselectNode(node)

F.Tree.js, line 320
取消选中节点
Name Type Description
node string | jQuery 节点标识符或者节点元素

deselectNodes(nodeIds)

F.Tree.js, line 327
取消选中多个节点
Name Type Description
nodeIds Array.<string> 节点标识符数组

inherited disable()

F.PanelBase.js, line 102
禁用控件

inherited doLayout(startFormTopmostComonent)

F.Component.js, line 122
执行布局操作
Name Type Default Description
startFormTopmostComonent boolean false optional 从最顶层的控件开始布局

inherited enable()

F.PanelBase.js, line 108
启用控件

inherited expand()

F.PanelBase.js, line 200
展开面板

expandNode(node, deep)

F.Tree.js, line 370
展开节点
Name Type Description
node string | jQuery 节点标识符或者节点元素
deep boolean 是否递归调用子节点

expandNodePath(node)

F.Tree.js, line 360
展开节点所在路径
Name Type Description
node string | jQuery 节点标识符或者节点元素

expandNodes()

F.Tree.js, line 377
展开全部节点

expandPath(path)

F.Tree.js, line 352
展开路径
Name Type Description
path string 节点路径

inherited getAttr(key){string}

F.Component.js, line 101
获取节点属性
Name Type Description
key string 节点属性键
Returns:
Type Description
string 节点属性值

getCheckedNodes(returnNodeData){Array.<Object>}

F.Tree.js, line 437
获取复选框处于选中状态的节点
Name Type Description
returnNodeData boolean 返回包含节点对象的数组，否则返回包含节点标识符的数组
Returns:
Type Description
Array.<Object> 节点数组

getFormFields()

F.Tree.js, line 503
不支持此方法

inherited getHeight(){number}

F.Component.js, line 136
获取控件高度
Returns:
Type Description
number 高度

inherited getIconEl(){jQuery}

F.PanelBase.js, line 143
获取图标元素
Returns:
Type Description
jQuery 图标元素

inherited getIFrameEl(){jQuery}

F.PanelBase.js, line 253
获取内联框架元素
Returns:
Type Description
jQuery 内联框架元素

inherited getIFrameUrl(){string}

F.PanelBase.js, line 246
获取内联框架地址
Returns:
Type Description
string 内联框架地址

inherited getIFrameWindow(){Window}

F.PanelBase.js, line 260
获取内联框架窗体对象
Returns:
Type Description
Window 内联框架窗体对象

getIndeterminateNodes(returnNodeData){Array.<Object>}

F.Tree.js, line 445
获取复选框处于中间状态的节点
Name Type Description
returnNodeData boolean 返回包含节点对象的数组，否则返回包含节点标识符的数组
Returns:
Type Description
Array.<Object> 节点数组

inherited getItem(value){F.Component}

F.Container.js, line 112
获取子控件
Name Type Description
value number | string | function 子控件索引、标识符或者函数
Returns:
Type Description
F.Component 子控件实例

getNodeCount(onlyLeafNode){number}

F.Tree.js, line 454
获取节点个数
Name Type Description
onlyLeafNode boolean 仅包含叶子节点
Returns:
Type Description
number 节点个数

getNodeData(node){Object}

F.Tree.js, line 233
获取节点数据
Name Type Description
node string | jQuery 节点标识符或者节点元素
Returns:
Type Description
Object 节点数据

getNodeEl(node){jQuery}

F.Tree.js, line 223
获取节点元素
Name Type Description
node string | jQuery 节点标识符或者节点元素
Returns:
Type Description
jQuery 节点元素

getNodeId(node){string}

F.Tree.js, line 214
获取节点标识符
Name Type Description
node string | jQuery 节点标识符或者节点元素
Returns:
Type Description
string 节点标识符

getNodePath(node){string}

F.Tree.js, line 270
获取节点路径
Name Type Description
node string | jQuery 节点标识符或者节点元素
Returns:
Type Description
string 节点路径

getParentData(node){Object}

F.Tree.js, line 261
获取父节点数据
Name Type Description
node string | jQuery 节点标识符或者节点元素
Returns:
Type Description
Object 父节点数据

getParentEl(node){jQuery}

F.Tree.js, line 251
获取父节点元素
Name Type Description
node string | jQuery 节点标识符或者节点元素
Returns:
Type Description
jQuery 父节点元素

getParentId(node){string}

F.Tree.js, line 242
获取父节点标识符
Name Type Description
node string | jQuery 节点标识符或者节点元素
Returns:
Type Description
string 父节点标识符

getRootNode(){Object}

F.Tree.js, line 186
获取根节点
Returns:
Type Description
Object 根节点

inherited getScrollEl(){jQuery}

F.PanelBase.js, line 115
获取可滚动元素
Returns:
Type Description
jQuery 可滚动元素

getSelectedNode(returnNodeData){string}

F.Tree.js, line 343
获取选中的第一个节点
Name Type Description
returnNodeData boolean 返回节点对象，否则返回节点标识符
Returns:
Type Description
string 选中的第一个节点标识符

getSelectedNodes(returnNodeData){Array.<string>}

F.Tree.js, line 335
获取选中的节点标识符数组
Name Type Description
returnNodeData boolean 返回包含节点对象的数组，否则返回包含节点标识符的数组
Returns:
Type Description
Array.<string> 节点标识符数组

inherited getTitle(){string}

F.PanelBase.js, line 218
获取面板标题
Returns:
Type Description
string 标题文本

inherited getTitleTooltip(){string}

F.PanelBase.js, line 225
获取面板标题提示信息
Returns:
Type Description
string 标题提示信息

inherited getTooltip(){string}

F.Component.js, line 196
获取提示信息
Returns:
Type Description
string 提示信息

inherited getWidth(){number}

F.Component.js, line 130
获取控件宽度
Returns:
Type Description
number 宽度

inherited hasHScrollbar(){boolean}

F.PanelBase.js, line 122
是否存在水平滚动条
Returns:
Type Description
boolean 是否存在水平滚动条

inherited hasIcon(){boolean}

F.PanelBase.js, line 137
是否有图标
Returns:
Type Description
boolean 是否有图标

inherited hasVScrollbar(){boolean}

F.PanelBase.js, line 130
是否存在垂直滚动条
Returns:
Type Description
boolean 是否存在垂直滚动条

inherited hide()

F.PanelBase.js, line 273
隐藏面板

hideIcons()

F.Tree.js, line 198
隐藏节点图标

inherited hideLoading()

F.Container.js, line 95
隐藏加载动画

inherited insert(insertIndex, value)

F.Container.js, line 44
插入新的子控件到当前控件
Name Type Description
insertIndex number 插入的位置
value Object | Array.<Object> 控件实例数组
Example
menu1.insert(0, ['-', {
		type: 'menuitem',
		text: '新菜单项'
}]);

inherited insertTool(item, insertIndex)

F.PanelBase.js, line 179
插入工具图标
Name Type Description
item F.Tool 工具图标实例
insertIndex number 插入的位置

inherited isCollapsed(){boolean}

F.PanelBase.js, line 188
是否处于折叠状态
Returns:
Type Description
boolean 折叠状态

isDirty()

F.Tree.js, line 511
不支持此方法

inherited isDisabled(){boolean}

F.Component.js, line 224
是否禁用
Returns:
Type Description
boolean 是否禁用

isNodeSelected(nodeId){boolean}

F.Tree.js, line 288
节点是否处于选中状态
Name Type Description
nodeId string 节点标识符
Returns:
Type Description
boolean 节点是否处于选中状态

inherited isType(value){boolean}

F.Base.js, line 23
检测当前实例是否指定的控件类型
Name Type Description
value Object 控件类型
Returns:
Type Description
boolean 如果当前实例是指定的控件类型，返回true；否则返回false
Example
grid1.isType('panel') // 返回true
grid1.isType('grid')  // 返回true

isValid()

F.Tree.js, line 507
不支持此方法

inherited isVisible(){boolean}

F.Component.js, line 216
是否可见
Returns:
Type Description
boolean 是否可见

loadData(parentNodeId, data)

F.Tree.js, line 167
重新加载数据
Name Type Description
parentNodeId string optional 需要加载的父节点（如果不传入此参数，则表示更新根节点数据）
data Array.<Object> 节点数据

moveNode(node, targetNode, position){string}

F.Tree.js, line 280
移动节点
Name Type Description
node string | jQuery 需要移动的节点（节点标识符或者节点元素）
targetNode string | jQuery 目标节点（节点标识符或者节点元素）
position string 相对于目标节点的位置（可选项为：before, after, append, prepend）
Returns:
Type Description
string 节点路径

inherited off(eventNames, fn)

F.Component.js, line 181
移除事件
Name Type Description
eventNames string 事件名称（可以空格分割多个事件名称）
fn F_Component_on 之前注册的事件处理函数

inherited on(eventNames, fn)

F.Component.js, line 174
注册事件
Name Type Description
eventNames string 事件名称（可以空格分割多个事件名称）
fn F_Component_on 触发事件时执行的函数

inherited refreshIFrame()

F.PanelBase.js, line 267
刷新内联框架

inherited remove()

F.Component.js, line 115
删除父控件中移除当前控件

inherited removeAttr(key)

F.Component.js, line 108
删除节点属性
Name Type Description
key string 节点属性键

inherited removeTooltip()

F.Component.js, line 208
删除提示信息

reset()

F.Tree.js, line 519
不支持此方法

resolveNode(fn, startNode)

F.Tree.js, line 473
遍历节点
Name Type Description
fn F_Tree_resolveNode 遍历节点的回调函数
startNode Object 遍历开始节点

scrollToNode(node)

F.Tree.js, line 488
滚动到节点
Name Type Description
node number | string | jQuery 节点索引、节点标识符或者节点元素

selectNode(node, options)

F.Tree.js, line 301
选中节点
Name Type Description
node string | jQuery 节点标识符或者节点元素
options Object 参数
Name Type Default Description
keep boolean false 是否保持已选中节点
keepUnselectable boolean true 是否保持不可选择节点的选中状态（options.keep=true时，此参数无效）
scrollTo boolean true 是否滚动到选中节点（仅有一个节点处于选中状态时有效）

selectNodes(nodeIds, options)

F.Tree.js, line 313
选中多个节点
Name Type Description
nodeIds Array.<string> 节点标识符数组
options Object 参数
Name Type Default Description
keep boolean false 是否保持已选中节点
keepUnselectable boolean true 是否保持不可选择节点的选中状态（options.keep=true时，此参数无效）
scrollTo boolean true 是否滚动到选中节点（仅有一个节点处于选中状态时有效）

inherited setAttr(key, value)

F.Component.js, line 94
设置节点属性
Name Type Description
key string 节点属性键
value string 节点属性值

inherited setAttrs(attrs)

F.Component.js, line 86
设置节点属性
Name Type Description
attrs Object 节点属性对象

inherited setDisabled(disabled)

F.Component.js, line 248
设置控件的禁用状态
Name Type Description
disabled boolean 是否禁用

inherited setEnabled(enabled)

F.Component.js, line 254
设置控件的启用状态
Name Type Description
enabled boolean 是否启用

inherited setHeight(height)

F.Component.js, line 143
设置控件高度
Name Type Description
height number 高度

inherited setHidden(hidden)

F.Component.js, line 286
设置控件的隐藏状态
Name Type Description
hidden boolean 是否隐藏

inherited setIcon(icon)

F.PanelBase.js, line 152
设置图标地址
Name Type Description
icon string 图标地址
Example
F.ui.panel1.setIcon('../res/images/16/1.png');

inherited setIconFont(iconFont)

F.PanelBase.js, line 161
设置图标字体
Name Type Description
iconFont string 图标字体
Example
F.ui.panel1.setIconFont('bank');

inherited setIFrameUrl(url)

F.PanelBase.js, line 239
设置内联框架地址
Name Type Description
url string 内联框架地址

setNodeText(nodeId, newText)

F.Tree.js, line 481
设置节点文本
Name Type Description
nodeId string 树节点标识符
newText string 节点文本

setRootNode(rootNode)

F.Tree.js, line 176
设置根节点
Name Type Description
rootNode Object 根节点

inherited setSize(width, height)

F.Component.js, line 158
设置控件尺寸
Name Type Description
width number 宽度
height number 高度

inherited setSplitDraggable(){boolean}

F.PanelBase.js, line 281
设置分隔条是否可以拖动
Returns:
Type Description
boolean 是否可以拖动

inherited setTitle(title)

F.PanelBase.js, line 212
设置面板标题
Name Type Description
title string 标题文本

inherited setTitleTooltip(tooltip)

F.PanelBase.js, line 232
设置面板标题提示信息
Name Type Description
tooltip string 提示信息字符串

inherited setTooltip(tooltip)

F.Component.js, line 202
设置提示信息
Name Type Description
tooltip string 提示信息

inherited setVisible(visible)

F.Component.js, line 280
设置控件的显示状态
Name Type Description
visible boolean 是否可见

inherited setWidth(width)

F.Component.js, line 150
设置控件宽度
Name Type Description
width number 宽度

inherited show()

F.Component.js, line 268
显示控件

showIcons()

F.Tree.js, line 192
显示节点图标

inherited showLoading(opacity, container)

F.Container.js, line 103
显示加载动画
Name Type Description
opacity number 透明度（默认值：0.65）
container jQuery 显示动画的目标元素（留空则为内容元素）

inherited toggleCollapse()

F.PanelBase.js, line 206
切换面板的折叠状态

inherited toggleEnabled()

F.Component.js, line 230
切换启用状态

toggleIcons()

F.Tree.js, line 204
显示/隐藏节点图标

inherited toggleVisible()

F.Component.js, line 274
切换显示状态

inherited trigger(eventName, args)

F.Component.js, line 189
触发事件
Name Type Description
eventName string 事件名称
args Object 事件参数

uncheckNode(node, deep)

F.Tree.js, line 427
取消选中节点复选框
Name Type Description
node string | jQuery 节点标识符或者节点元素
deep boolean 是否递归调用子节点

uncheckNodes(nodes, deep)

F.Tree.js, line 411
取消选中节点复选框
Name Type Description
nodes Array.<string> 节点标识符数组
deep boolean 是否递归调用子节点

Events

inherited beforehide

F.Component.js, line 57
隐藏控件之前触发（返回false则取消隐藏操作）

beforeitemclick

F.DataList.js, line 20
点击列表项之前触发（返回false则不执行F.DataList#event:itemclick事件）
Name Type Description
event jQuery.Event 事件对象
itemValue string 列表项的值

beforenodeclick

F.Tree.js, line 61
点击树节点之前触发（返回false则不执行F.Tree#event:nodeclick事件）
Name Type Description
event jQuery.Event 事件对象
nodeId string 树节点标识符

beforenodecontextmenu

F.Tree.js, line 87
右键点击树节点时触发（返回false则阻止浏览器默认的右键菜单）
Name Type Description
event jQuery.Event 事件对象
nodeId string 树节点标识符

inherited beforeshow

F.Component.js, line 69
显示控件之前触发（返回false则取消显示操作）

inherited collapse

F.PanelBase.js, line 68
折叠面板时触发
Name Type Description
event jQuery.Event 事件对象

dataload

F.Tree.js, line 95
树控件数据加载完毕时触发

inherited dirtychange

F.PanelBase.js, line 45
容器内的字段值改变时触发

inherited expand

F.PanelBase.js, line 76
展开面板时触发
Name Type Description
event jQuery.Event 事件对象

inherited hide

F.Component.js, line 63
隐藏控件时触发

inherited iframeload

F.PanelBase.js, line 84
内联框架加载完毕时触发

inherited layout

F.Component.js, line 45
布局控件时触发

nodecheck

F.Tree.js, line 148
选中树节点复选框时触发
Name Type Description
event jQuery.Event 事件对象
nodeId string 树节点标识符
checked boolean 树节点复选框的选中状态

nodeclick

F.Tree.js, line 71
点击树节点时触发
Name Type Description
event jQuery.Event 事件对象
nodeId string 树节点标识符

nodecollapse

F.Tree.js, line 140
折叠树节点时触发
Name Type Description
event jQuery.Event 事件对象
nodeId string 树节点标识符

nodedblclick

F.Tree.js, line 79
双击树节点时触发
Name Type Description
event jQuery.Event 事件对象
nodeId string 树节点标识符

nodedeselect

F.Tree.js, line 116
取消选中节点时触发
Name Type Description
event jQuery.Event 事件对象
nodeId string 节点标识符

nodeexpand

F.Tree.js, line 132
展开树节点时触发
Name Type Description
event jQuery.Event 事件对象
nodeId string 树节点标识符

nodelazyload

F.Tree.js, line 124
延迟加载树节点时触发
Name Type Description
event jQuery.Event 事件对象
nodeId string 树节点标识符

nodeselect

F.Tree.js, line 108
选中树节点时触发
Name Type Description
event jQuery.Event 事件对象
nodeId string 树节点标识符

inherited render

F.Component.js, line 51
渲染控件时触发

inherited resize

F.PanelBase.js, line 61
面板尺寸改变时触发

selectionchange

F.Tree.js, line 101
选中的树节点改变时触发
Name Type Description
event jQuery.Event 事件对象

inherited show

F.Component.js, line 75
显示控件时触发

inherited splitdrag

F.PanelBase.js, line 53
拖动分隔条时触发（拖动操作）
Name Type Description
event jQuery.Event 事件对象