Tree

F. Tree

new Tree(options)

Description:
  • 树控件

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: '中国科学技术大学'
					}]
				}]
			}]
		}]
	}
});
Parameters:
Name Type Description
options Object

初始参数

Properties
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'

控件类型

Extends

Members

bodyEl :jQuery

Description:
  • 控件主体对应的jQuery节点对象

Inherited From:

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

Type:
  • jQuery

el :jQuery

Description:
  • 控件对应的jQuery节点对象

Inherited From:

控件对应的jQuery节点对象

Type:
  • jQuery

items :Object

Description:
  • 子控件列表

Inherited From:

子控件列表

Type:
  • Object

Methods

add(value)

Description:
  • 添加新的子控件到当前控件

Inherited From:
Example
menu1.add(['-', {
		type: 'menuitem',
		text: '新菜单项'
}]);
Parameters:
Name Type Description
value Object | Array.<Object>

控件实例数组

addTool(item)

Description:
  • 添加工具图标

Inherited From:
Parameters:
Name Type Description
item F.Tool

工具图标实例

checkNode(node, deep)

Description:
  • 选中节点复选框

Parameters:
Name Type Description
node string | jQuery

节点标识符或者节点元素

deep boolean

是否递归调用子节点

checkNodes(nodes, deep)

Description:
  • 选中节点复选框

Parameters:
Name Type Description
nodes Array.<string>

节点标识符数组

deep boolean

是否递归调用子节点

clearDirty()

Description:
  • 不支持此方法

Overrides:

clearSelection()

Description:
  • 清空全部选中节点

collapse()

Description:
  • 折叠面板

Inherited From:

collapseNode(node, deep)

Description:
  • 折叠节点

Parameters:
Name Type Description
node string | jQuery

节点标识符或者节点元素

deep boolean

是否递归调用子节点

collapseNodes()

Description:
  • 折叠全部节点

deselectNode(node)

Description:
  • 取消选中节点

Parameters:
Name Type Description
node string | jQuery

节点标识符或者节点元素

deselectNodes(nodeIds)

Description:
  • 取消选中多个节点

Parameters:
Name Type Description
nodeIds Array.<string>

节点标识符数组

disable()

Description:
  • 禁用控件

Inherited From:

doLayout(startFormTopmostComonentopt)

Description:
  • 执行布局操作

Inherited From:
Parameters:
Name Type Attributes Default Description
startFormTopmostComonent boolean <optional>
false

从最顶层的控件开始布局

enable()

Description:
  • 启用控件

Inherited From:

expand()

Description:
  • 展开面板

Inherited From:

expandNode(node, deep)

Description:
  • 展开节点

Parameters:
Name Type Description
node string | jQuery

节点标识符或者节点元素

deep boolean

是否递归调用子节点

expandNodePath(node)

Description:
  • 展开节点所在路径

Parameters:
Name Type Description
node string | jQuery

节点标识符或者节点元素

expandNodes()

Description:
  • 展开全部节点

expandPath(path)

Description:
  • 展开路径

Parameters:
Name Type Description
path string

节点路径

getAttr(key) → {string}

Description:
  • 获取节点属性

Inherited From:
Parameters:
Name Type Description
key string

节点属性键

Returns:

节点属性值

Type
string

getCheckedNodes(returnNodeData) → {Array.<Object>}

Description:
  • 获取复选框处于选中状态的节点

Parameters:
Name Type Description
returnNodeData boolean

返回包含节点对象的数组,否则返回包含节点标识符的数组

Returns:

节点数组

Type
Array.<Object>

getFormFields()

Description:
  • 不支持此方法

Overrides:

getHeight() → {number}

Description:
  • 获取控件高度

Inherited From:
Returns:

高度

Type
number

getIFrameEl() → {jQuery}

Description:
  • 获取内联框架元素

Inherited From:
Returns:

内联框架元素

Type
jQuery

getIFrameUrl() → {string}

Description:
  • 获取内联框架地址

Inherited From:
Returns:

内联框架地址

Type
string

getIFrameWindow() → {Window}

Description:
  • 获取内联框架窗体对象

Inherited From:
Returns:

内联框架窗体对象

Type
Window

getIconEl() → {jQuery}

Description:
  • 获取图标元素

Inherited From:
Returns:

图标元素

Type
jQuery

getIndeterminateNodes(returnNodeData) → {Array.<Object>}

Description:
  • 获取复选框处于中间状态的节点

Parameters:
Name Type Description
returnNodeData boolean

返回包含节点对象的数组,否则返回包含节点标识符的数组

Returns:

节点数组

Type
Array.<Object>

getItem(value) → {F.Component}

Description:
  • 获取子控件

Inherited From:
Parameters:
Name Type Description
value number | string | function

子控件索引、标识符或者函数

Returns:

子控件实例

Type
F.Component

getNodeCount(onlyLeafNode) → {number}

Description:
  • 获取节点个数

Parameters:
Name Type Description
onlyLeafNode boolean

仅包含叶子节点

Returns:

节点个数

Type
number

getNodeData(node) → {Object}

Description:
  • 获取节点数据

Parameters:
Name Type Description
node string | jQuery

节点标识符或者节点元素

Returns:

节点数据

Type
Object

getNodeEl(node) → {jQuery}

Description:
  • 获取节点元素

Parameters:
Name Type Description
node string | jQuery

节点标识符或者节点元素

Returns:

节点元素

Type
jQuery

getNodeId(node) → {string}

Description:
  • 获取节点标识符

Parameters:
Name Type Description
node string | jQuery

节点标识符或者节点元素

Returns:

节点标识符

Type
string

getNodePath(node) → {string}

Description:
  • 获取节点路径

Parameters:
Name Type Description
node string | jQuery

节点标识符或者节点元素

Returns:

节点路径

Type
string

getParentData(node) → {Object}

Description:
  • 获取父节点数据

Parameters:
Name Type Description
node string | jQuery

节点标识符或者节点元素

Returns:

父节点数据

Type
Object

getParentEl(node) → {jQuery}

Description:
  • 获取父节点元素

Parameters:
Name Type Description
node string | jQuery

节点标识符或者节点元素

Returns:

父节点元素

Type
jQuery

getParentId(node) → {string}

Description:
  • 获取父节点标识符

Parameters:
Name Type Description
node string | jQuery

节点标识符或者节点元素

Returns:

父节点标识符

Type
string

getRootNode() → {Object}

Description:
  • 获取根节点

Returns:

根节点

Type
Object

getScrollEl() → {jQuery}

Description:
  • 获取可滚动元素

Inherited From:
Returns:

可滚动元素

Type
jQuery

getSelectedNode(returnNodeData) → {string}

Description:
  • 获取选中的第一个节点

Parameters:
Name Type Description
returnNodeData boolean

返回节点对象,否则返回节点标识符

Returns:

选中的第一个节点标识符

Type
string

getSelectedNodes(returnNodeData) → {Array.<string>}

Description:
  • 获取选中的节点标识符数组

Parameters:
Name Type Description
returnNodeData boolean

返回包含节点对象的数组,否则返回包含节点标识符的数组

Returns:

节点标识符数组

Type
Array.<string>

getTitle() → {string}

Description:
  • 获取面板标题

Inherited From:
Returns:

标题文本

Type
string

getTitleTooltip() → {string}

Description:
  • 获取面板标题提示信息

Inherited From:
Returns:

标题提示信息

Type
string

getTooltip() → {string}

Description:
  • 获取提示信息

Inherited From:
Returns:

提示信息

Type
string

getWidth() → {number}

Description:
  • 获取控件宽度

Inherited From:
Returns:

宽度

Type
number

hasHScrollbar() → {boolean}

Description:
  • 是否存在水平滚动条

Inherited From:
Returns:

是否存在水平滚动条

Type
boolean

hasIcon() → {boolean}

Description:
  • 是否有图标

Inherited From:
Returns:

是否有图标

Type
boolean

hasVScrollbar() → {boolean}

Description:
  • 是否存在垂直滚动条

Inherited From:
Returns:

是否存在垂直滚动条

Type
boolean

hide()

Description:
  • 隐藏面板

Inherited From:

hideIcons()

Description:
  • 隐藏节点图标

hideLoading()

Description:
  • 隐藏加载动画

Inherited From:

insert(insertIndex, value)

Description:
  • 插入新的子控件到当前控件

Inherited From:
Example
menu1.insert(0, ['-', {
		type: 'menuitem',
		text: '新菜单项'
}]);
Parameters:
Name Type Description
insertIndex number

插入的位置

value Object | Array.<Object>

控件实例数组

insertTool(item, insertIndex)

Description:
  • 插入工具图标

Inherited From:
Parameters:
Name Type Description
item F.Tool

工具图标实例

insertIndex number

插入的位置

isCollapsed() → {boolean}

Description:
  • 是否处于折叠状态

Inherited From:
Returns:

折叠状态

Type
boolean

isDirty()

Description:
  • 不支持此方法

Overrides:

isDisabled() → {boolean}

Description:
  • 是否禁用

Inherited From:
Returns:

是否禁用

Type
boolean

isNodeSelected(nodeId) → {boolean}

Description:
  • 节点是否处于选中状态

Parameters:
Name Type Description
nodeId string

节点标识符

Returns:

节点是否处于选中状态

Type
boolean

isType(value) → {boolean}

Description:
  • 检测当前实例是否指定的控件类型

Inherited From:
Example
grid1.isType('panel') // 返回true
grid1.isType('grid')  // 返回true
Parameters:
Name Type Description
value Object

控件类型

Returns:

如果当前实例是指定的控件类型,返回true;否则返回false

Type
boolean

isValid()

Description:
  • 不支持此方法

Overrides:

isVisible() → {boolean}

Description:
  • 是否可见

Inherited From:
Returns:

是否可见

Type
boolean

loadData(parentNodeIdopt, data)

Description:
  • 重新加载数据

Parameters:
Name Type Attributes Description
parentNodeId string <optional>

需要加载的父节点(如果不传入此参数,则表示更新根节点数据)

data Array.<Object>

节点数据

moveNode(node, targetNode, position) → {string}

Description:
  • 移动节点

Parameters:
Name Type Description
node string | jQuery

需要移动的节点(节点标识符或者节点元素)

targetNode string | jQuery

目标节点(节点标识符或者节点元素)

position string

相对于目标节点的位置(可选项为:before, after, append, prepend)

Returns:

节点路径

Type
string

off(eventNames, fn)

Description:
  • 移除事件

Inherited From:
Parameters:
Name Type Description
eventNames string

事件名称(可以空格分割多个事件名称)

fn F_Component_on

之前注册的事件处理函数

on(eventNames, fn)

Description:
  • 注册事件

Inherited From:
Parameters:
Name Type Description
eventNames string

事件名称(可以空格分割多个事件名称)

fn F_Component_on

触发事件时执行的函数

refreshIFrame()

Description:
  • 刷新内联框架

Inherited From:

remove()

Description:
  • 删除父控件中移除当前控件

Inherited From:

removeAttr(key)

Description:
  • 删除节点属性

Inherited From:
Parameters:
Name Type Description
key string

节点属性键

removeTooltip()

Description:
  • 删除提示信息

Inherited From:

reset()

Description:
  • 不支持此方法

Overrides:

resolveNode(fn, startNode)

Description:
  • 遍历节点

Parameters:
Name Type Description
fn F_Tree_resolveNode

遍历节点的回调函数

startNode Object

遍历开始节点

scrollToNode(node)

Description:
  • 滚动到节点

Parameters:
Name Type Description
node number | string | jQuery

节点索引、节点标识符或者节点元素

selectNode(node, options)

Description:
  • 选中节点

Parameters:
Name Type Description
node string | jQuery

节点标识符或者节点元素

options Object

参数

Properties
Name Type Default Description
keep boolean false

是否保持已选中节点

keepUnselectable boolean true

是否保持不可选择节点的选中状态(options.keep=true时,此参数无效)

scrollTo boolean true

是否滚动到选中节点(仅有一个节点处于选中状态时有效)

selectNodes(nodeIds, options)

Description:
  • 选中多个节点

Parameters:
Name Type Description
nodeIds Array.<string>

节点标识符数组

options Object

参数

Properties
Name Type Default Description
keep boolean false

是否保持已选中节点

keepUnselectable boolean true

是否保持不可选择节点的选中状态(options.keep=true时,此参数无效)

scrollTo boolean true

是否滚动到选中节点(仅有一个节点处于选中状态时有效)

setAttr(key, value)

Description:
  • 设置节点属性

Inherited From:
Parameters:
Name Type Description
key string

节点属性键

value string

节点属性值

setAttrs(attrs)

Description:
  • 设置节点属性

Inherited From:
Parameters:
Name Type Description
attrs Object

节点属性对象

setDisabled(disabled)

Description:
  • 设置控件的禁用状态

Inherited From:
Parameters:
Name Type Description
disabled boolean

是否禁用

setEnabled(enabled)

Description:
  • 设置控件的启用状态

Inherited From:
Parameters:
Name Type Description
enabled boolean

是否启用

setHeight(height)

Description:
  • 设置控件高度

Inherited From:
Parameters:
Name Type Description
height number

高度

setHidden(hidden)

Description:
  • 设置控件的隐藏状态

Inherited From:
Parameters:
Name Type Description
hidden boolean

是否隐藏

setIFrameUrl(url)

Description:
  • 设置内联框架地址

Inherited From:
Parameters:
Name Type Description
url string

内联框架地址

setIcon(icon)

Description:
  • 设置图标地址

Inherited From:
Example
F.ui.panel1.setIcon('../res/images/16/1.png');
Parameters:
Name Type Description
icon string

图标地址

setIconFont(iconFont)

Description:
  • 设置图标字体

Inherited From:
Example
F.ui.panel1.setIconFont('bank');
Parameters:
Name Type Description
iconFont string

图标字体

setNodeText(nodeId, newText)

Description:
  • 设置节点文本

Parameters:
Name Type Description
nodeId string

树节点标识符

newText string

节点文本

setRootNode(rootNode)

Description:
  • 设置根节点

Parameters:
Name Type Description
rootNode Object

根节点

setSize(width, height)

Description:
  • 设置控件尺寸

Inherited From:
Parameters:
Name Type Description
width number

宽度

height number

高度

setSplitDraggable() → {boolean}

Description:
  • 设置分隔条是否可以拖动

Inherited From:
Returns:

是否可以拖动

Type
boolean

setTitle(title)

Description:
  • 设置面板标题

Inherited From:
Parameters:
Name Type Description
title string

标题文本

setTitleTooltip(tooltip)

Description:
  • 设置面板标题提示信息

Inherited From:
Parameters:
Name Type Description
tooltip string

提示信息字符串

setTooltip(tooltip)

Description:
  • 设置提示信息

Inherited From:
Parameters:
Name Type Description
tooltip string

提示信息

setVisible(visible)

Description:
  • 设置控件的显示状态

Inherited From:
Parameters:
Name Type Description
visible boolean

是否可见

setWidth(width)

Description:
  • 设置控件宽度

Inherited From:
Parameters:
Name Type Description
width number

宽度

show()

Description:
  • 显示控件

Inherited From:

showIcons()

Description:
  • 显示节点图标

showLoading(opacity, container)

Description:
  • 显示加载动画

Inherited From:
Parameters:
Name Type Description
opacity number

透明度(默认值:0.65)

container jQuery

显示动画的目标元素(留空则为内容元素)

toggleCollapse()

Description:
  • 切换面板的折叠状态

Inherited From:

toggleEnabled()

Description:
  • 切换启用状态

Inherited From:

toggleIcons()

Description:
  • 显示/隐藏节点图标

toggleVisible()

Description:
  • 切换显示状态

Inherited From:

trigger(eventName, args)

Description:
  • 触发事件

Inherited From:
Parameters:
Name Type Description
eventName string

事件名称

args Object

事件参数

uncheckNode(node, deep)

Description:
  • 取消选中节点复选框

Parameters:
Name Type Description
node string | jQuery

节点标识符或者节点元素

deep boolean

是否递归调用子节点

uncheckNodes(nodes, deep)

Description:
  • 取消选中节点复选框

Parameters:
Name Type Description
nodes Array.<string>

节点标识符数组

deep boolean

是否递归调用子节点

Events

beforehide

Description:
  • 隐藏控件之前触发(返回false则取消隐藏操作)

Inherited From:

beforeitemclick

Description:
Parameters:
Name Type Description
event jQuery.Event

事件对象

itemValue string

列表项的值

beforenodeclick

Description:
Parameters:
Name Type Description
event jQuery.Event

事件对象

nodeId string

树节点标识符

beforenodecontextmenu

Description:
  • 右键点击树节点时触发(返回false则阻止浏览器默认的右键菜单)

Parameters:
Name Type Description
event jQuery.Event

事件对象

nodeId string

树节点标识符

beforeshow

Description:
  • 显示控件之前触发(返回false则取消显示操作)

Inherited From:

collapse

Description:
  • 折叠面板时触发

Inherited From:
Parameters:
Name Type Description
event jQuery.Event

事件对象

dataload

Description:
  • 树控件数据加载完毕时触发

dirtychange

Description:
  • 容器内的字段值改变时触发

Inherited From:

expand

Description:
  • 展开面板时触发

Inherited From:
Parameters:
Name Type Description
event jQuery.Event

事件对象

hide

Description:
  • 隐藏控件时触发

Inherited From:

iframeload

Description:
  • 内联框架加载完毕时触发

Inherited From:

layout

Description:
  • 布局控件时触发

Inherited From:

nodecheck

Description:
  • 选中树节点复选框时触发

Parameters:
Name Type Description
event jQuery.Event

事件对象

nodeId string

树节点标识符

checked boolean

树节点复选框的选中状态

nodeclick

Description:
  • 点击树节点时触发

Parameters:
Name Type Description
event jQuery.Event

事件对象

nodeId string

树节点标识符

nodecollapse

Description:
  • 折叠树节点时触发

Parameters:
Name Type Description
event jQuery.Event

事件对象

nodeId string

树节点标识符

nodedblclick

Description:
  • 双击树节点时触发

Parameters:
Name Type Description
event jQuery.Event

事件对象

nodeId string

树节点标识符

nodedeselect

Description:
  • 取消选中节点时触发

Parameters:
Name Type Description
event jQuery.Event

事件对象

nodeId string

节点标识符

nodeexpand

Description:
  • 展开树节点时触发

Parameters:
Name Type Description
event jQuery.Event

事件对象

nodeId string

树节点标识符

nodelazyload

Description:
  • 延迟加载树节点时触发

Parameters:
Name Type Description
event jQuery.Event

事件对象

nodeId string

树节点标识符

nodeselect

Description:
  • 选中树节点时触发

Parameters:
Name Type Description
event jQuery.Event

事件对象

nodeId string

树节点标识符

render

Description:
  • 渲染控件时触发

Inherited From:

resize

Description:
  • 面板尺寸改变时触发

Inherited From:

selectionchange

Description:
  • 选中的树节点改变时触发

Parameters:
Name Type Description
event jQuery.Event

事件对象

show

Description:
  • 显示控件时触发

Inherited From:

splitdrag

Description:
  • 拖动分隔条时触发(拖动操作)

Inherited From:
Parameters:
Name Type Description
event jQuery.Event

事件对象