Tree

FineUI.create({
	type: 'Tree', renderTo: document.body, height: 300, title: '行政区划',
	rootNode: {
		expanded: true, 
		children: [{
			text: '中国', expanded: true, 
			children: [{
				text: '河南省', 
				children: [
					{ text: '驻马店市' },
					{ text: '漯河市' }
				]
			}, {
				text: '安徽省', 
				children: [
					{ text: '合肥市' },
					{ text: '马鞍山市' }
				]
			}]
		}]
	}
});

FineUI.create({
	type: 'Tree', renderTo: document.body, height: 300, title: '权限选择',
	checkbox: true, cascadeCheck: true,
	rootNode: {
		expanded: true, 
		children: [{
			text: '用户管理', expanded: true, 
			children: [
				{ text: '新增用户', leaf: true },
				{ text: '编辑用户', leaf: true },
				{ text: '删除用户', leaf: true }
			]
		}]
	}
});

FineUI.create({
	type: 'Tree', renderTo: document.body, height: 300, title: '单击展开',
	singleClickExpand: true, singleExpand: true,
	rootNode: {
		expanded: true, 
		children: [
			{ text: '分类 A', children: [{ text: 'A-1' }, { text: 'A-2' }] },
			{ text: '分类 B', children: [{ text: 'B-1' }, { text: 'B-2' }] }
		]
	}
});

FineUI.create({
	type: 'Tree', renderTo: document.body, height: 300,
	rootNode: {
		expanded: true, 
		children: [
			{ text: '节点 A', leaf: true },
			{ text: '节点 B', leaf: true }
		]
	},
	listeners: {
		nodeclick: function (event, nodeId) {
			var nodeData = this.getNodeData(nodeId);
			FineUI.alert('点击节点：' + nodeData.text);
		}
	}
});

FineUI.create({
	type: 'Tree', renderTo: document.body, width: 70, height: 400, miniMode: true,
	rootNode: {
		expanded: true, 
		children: [
			{ text: '首页', iconFont: 'home', children: [{ text: '概览' }, { text: '统计' }] },
			{ text: '用户', iconFont: 'user', children: [{ text: '列表' }, { text: '权限' }] },
			{ text: '设置', iconFont: 'gear', children: [{ text: '基础' }, { text: '高级' }] }
		]
	}
});

Extends

• FineUI.Panel

Members

bodyEl :jQuery

Description:

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

Inherited From:

• FineUI.PanelBase#bodyEl

Type:

• jQuery

el :jQuery

Description:

• 控件对应的jQuery节点对象

Inherited From:

• FineUI.Component#el

Type:

• jQuery

items :Object

Description:

• 子控件列表

Inherited From:

• FineUI.Container#items

Type:

• Object

Methods

addTool(item)

Description:

• 添加工具图标

Inherited From:

• FineUI.PanelBase#addTool

Parameters:

checkNode(node, options)

Description:

• 选中节点复选框

Parameters:

checkNodes(nodes, optionsopt)

Description:

• 选中节点复选框（仅启用checkbox: true时有效）

Examples

批量勾选指定节点：

FineUI.ui.tree1.checkNodes(['zhumadian', 'luohe']);

勾选并递归勾选其全部后代（deep: true），同时清掉其他已选项（keep: false）：

FineUI.ui.tree1.checkNodes(['henan'], { deep: true, keep: false });

Parameters:

clearSelection()

Description:

• 清空全部选中节点

collapse()

Description:

• 折叠面板（程序触发；启用collapsible: true时有效）

Inherited From:

• FineUI.PanelBase#collapse

Example

程序折叠侧栏：

FineUI.ui.panelSide.collapse();

collapseNode(node, deep)

Description:

• 折叠节点

Parameters:

collapseNodes()

Description:

• 折叠全部节点

deselectNode(node)

Description:

• 取消选中节点

Parameters:

deselectNodes(nodeIds)

Description:

• 取消选中多个节点

Parameters:

expand()

Description:

• 展开面板（与collapse对应）

Inherited From:

• FineUI.PanelBase#expand

expandNode(node, deepopt)

Description:

• 展开节点

Examples

展开单个节点：

FineUI.ui.tree1.expandNode('henan');

递归展开节点及其全部后代：

FineUI.ui.tree1.expandNode('henan', true);

Parameters:

expandNodePath(node)

Description:

• 展开节点所在路径

Parameters:

expandNodes()

Description:

• 展开全部节点

expandPath(path)

Description:

• 展开路径（沿路径上的祖先节点逐级展开，直到指定路径末端可见；通常配合getNodePath取到目标节点的路径再调用）

Examples

通过节点 ID 拿到完整路径再展开：

var tree = FineUI.ui.tree1;
var path = tree.getNodePath('luohe');  // 例如：'fnode1/fnode3/luohe'
tree.expandPath(path);

等价的快捷方式（直接传节点而不是路径，框架内部会取路径再展开）：

FineUI.ui.tree1.expandNodePath('luohe');

Parameters:

getCheckedNodes(returnNodeDataopt) → {Array.<string>|Array.<Object>}

Description:

• 获取复选框处于选中状态的节点（不含indeterminate半选中状态——半选中走getIndeterminateNodes）

Examples

仅取勾选节点的 ID 数组（用于序列化后提交服务端）：

var ids = FineUI.ui.tree1.getCheckedNodes();
// 例如：['zhumadian', 'luohe']

取节点完整数据（含 text/iconFont 等）：

var nodes = FineUI.ui.tree1.getCheckedNodes(true);
// 例如：[{ id: 'zhumadian', text: '驻马店' }, { id: 'luohe', text: '漯河' }]

Parameters:

Returns:

Type

Array.<string> | Array.<Object>

getEncodedText(text) → {string}

Description:

• 获取编码后的字符串

Inherited From:

• FineUI.Component#getEncodedText

Parameters:

Returns:

Type

string

getExpandedNodes() → {Array.<string>}

Description:

• 获取展开的节点标识符数组

Returns:

Type

Array.<string>

getFormFields() → {Array.<FineUI.Field>}

Description:

• 获取容器内（深度遍历）所有表单字段实例（FineUI.Field的子类，如TextBox/NumberBox/DatePicker等）

Inherited From:

• FineUI.Container#getFormFields

Example

遍历表单全部字段，序列化为 name → value 的对象（用于自定义 ajax 提交；字段未声明name时改用id）：

var values = {};
FineUI.ui.form1.getFormFields().forEach(function (field) {
    values[field.name || field.id] = field.getValue();
});
// values 形如：{ tbxUserName: 'FineUIPro', numberAge: 30, ... }

Returns:

Type

Array.<FineUI.Field>

getIFrameEl() → {jQuery}

Description:

• 获取内联框架元素

Inherited From:

• FineUI.PanelBase#getIFrameEl

Returns:

Type

jQuery

getIFrameUrl() → {string}

Description:

• 获取内联框架地址

Inherited From:

• FineUI.PanelBase#getIFrameUrl

Returns:

Type

string

getIFrameWindow() → {Window}

Description:

• 获取内联框架窗体对象

Inherited From:

• FineUI.PanelBase#getIFrameWindow

Returns:

Type

Window

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

Description:

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

Parameters:

Returns:

Type

Array.<Object>

getItem(value) → {FineUI.Component}

Description:

• 获取子控件（按索引/标识符/匹配函数查找；通常配合items无显式 id 的场景，比按FineUI.ui[id]更精准）

Inherited From:

• FineUI.Container#getItem

Examples

按索引取第一个子控件：

var firstChild = FineUI.ui.toolbar1.getItem(0);

按 id 取子控件：

var btn = FineUI.ui.toolbar1.getItem('btnSave');

按匹配函数找第一个匹配的子控件（函数对每项返回 true 即匹配）：

var btn = FineUI.ui.toolbar1.getItem(function (item) {
    return item.type === 'Button' && item.text === '保存';
});

Parameters:

Returns:

Type

FineUI.Component

getNodeCount(onlyLeafNode) → {number}

Description:

• 获取节点个数

Parameters:

Returns:

Type

number

getNodeData(node) → {Object}

Description:

• 获取节点数据（返回节点的完整数据对象：含 id/text/iconFont/expanded/leaf/children 等）

Example

在nodeclick事件中取节点完整数据：

FineUI.create({
    type: 'Tree',
    listeners: {
        nodeclick: function (event, nodeId) {
            var node = this.getNodeData(nodeId);
            // node 形如：{ id: 'luohe', text: '漯河', leaf: true, iconFont: '...' }
            FineUI.alert('点击：' + node.text);
        }
    }
});

Parameters:

Returns:

Type

Object

getNodeEl(node) → {jQuery}

Description:

• 获取节点元素

Parameters:

Returns:

Type

jQuery

getNodeId(node) → {string}

Description:

• 获取节点标识符

Parameters:

Returns:

Type

string

getNodePath(node) → {string}

Description:

• 获取节点路径

Parameters:

Returns:

Type

string

getParentData(node) → {Object}

Description:

• 获取父节点数据

Parameters:

Returns:

Type

Object

getParentEl(node) → {jQuery}

Description:

• 获取父节点元素

Parameters:

Returns:

Type

jQuery

getParentId(node) → {string}

Description:

• 获取父节点标识符

Parameters:

Returns:

Type

string

getRootNode() → {Object}

Description:

• 获取根节点

Returns:

Type

Object

getSelectedNode(returnNodeData) → {string}

Description:

• 获取选中的第一个节点

Parameters:

Returns:

Type

string

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

Description:

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

Parameters:

Returns:

Type

Array.<string>

getTitleTooltip() → {string}

Description:

• 获取面板标题提示信息

Inherited From:

• FineUI.PanelBase#getTitleTooltip

Returns:

Type

string

hasHScrollbar() → {boolean}

Description:

• 是否存在水平滚动条

Inherited From:

• FineUI.PanelBase#hasHScrollbar

Returns:

Type

boolean

hasVScrollbar() → {boolean}

Description:

• 是否存在垂直滚动条

Inherited From:

• FineUI.PanelBase#hasVScrollbar

Returns:

Type

boolean

hideIcons()

Description:

• 隐藏节点图标

hidePopEl()

Description:

• 隐藏容器内的所有弹出框

Inherited From:

• FineUI.Container#hidePopEl

insertTool(insertIndex, item)

Description:

• 插入工具图标

Inherited From:

• FineUI.PanelBase#insertTool

Parameters:

isCollapsed() → {boolean}

Description:

• 是否处于折叠状态

Inherited From:

• FineUI.PanelBase#isCollapsed

Returns:

Type

boolean

isNodeSelected(nodeId) → {boolean}

Description:

• 节点是否处于选中状态

Parameters:

Returns:

Type

boolean

isType(value) → {boolean}

Description:

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

Inherited From:

• FineUI.Base#isType

Example

grid1.isType('panel') // 返回true
grid1.isType('grid')  // 返回true

Parameters:

Returns:

Type

boolean

loadData(parentNodeIdopt, data)

Description:

• 重新加载数据

Examples

替换整棵树的根数据：

FineUI.ui.tree1.loadData([
    { id: 'a', text: '分类 A', children: [{ id: 'a1', text: 'A-1', leaf: true }] },
    { id: 'b', text: '分类 B', leaf: true }
]);

懒加载场景：响应nodelazyload事件加载某节点的子项：

FineUI.create({
    type: 'Tree', autoLeafIdentification: false,
    rootNode: { expanded: true, children: [{ id: 'henan', text: '河南' }] },
    listeners: {
        nodelazyload: function (event, nodeId) {
            // 模拟 ajax 拉子节点数据
            if (nodeId === 'henan') {
                this.loadData(nodeId, [
                    { id: 'zhengzhou', text: '郑州', leaf: true },
                    { id: 'luohe', text: '漯河', leaf: true }
                ]);
            }
        }
    }
});

Parameters:

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

Description:

• 移动节点（用于拖拽排序或程序化重组树结构；append表示作为目标节点的最后一个子节点，prepend作为第一个子节点）

Examples

将节点放到目标节点之后（同级排序）：

FineUI.ui.tree1.moveNode('luohe', 'zhumadian', 'after');

将节点放到目标节点的子节点末尾（移动到新父节点下）：

FineUI.ui.tree1.moveNode('luohe', 'henan', 'append');

Parameters:

Returns:

Type

string

refreshIFrame()

Description:

• 刷新内联框架

Inherited From:

• FineUI.PanelBase#refreshIFrame

resolveNode(fn, startNode)

Description:

• 遍历节点

Parameters:

scrollToNode(node)

Description:

• 滚动到节点

Parameters:

selectNode(node, optionsopt)

Description:

• 选中单个节点（单选场景；多选用selectNodes）

Examples

程序选中节点：

FineUI.ui.tree1.selectNode('luohe');

选中但不滚动到该节点：

FineUI.ui.tree1.selectNode('luohe', { scrollTo: false });

Parameters:

selectNodes(nodeIds, optionsopt)

Description:

• 选中多个节点（多选场景multiSelect: true时常用）

Examples

程序选中指定节点（替换当前选中）：

FineUI.ui.tree1.selectNodes(['golden', 'ustc']);

在已有选中基础上追加（keep: true，对应 Ctrl+点击的效果）：

FineUI.ui.tree1.selectNodes(['golden', 'ustc'], { keep: true });

Parameters:

setIFrameUrl(url)

Description:

• 设置内联框架地址

Inherited From:

• FineUI.PanelBase#setIFrameUrl

Parameters:

setNodeText(nodeId, newText)

Description:

• 设置节点文本（重命名节点）

Example

重命名节点：

FineUI.ui.tree1.setNodeText('henan', '河南省');

Parameters:

setRootNode(rootNode)

Description:

• 设置根节点（替换整棵树，包括根节点本身的配置；与loadData(data)区别：loadData只替换子节点数据，本方法可同时改根节点属性如expanded）

Example

整棵树切换数据源：

FineUI.ui.tree1.setRootNode({
    expanded: true,
    children: [
        { id: 'a', text: '分类 A', children: [{ id: 'a1', text: 'A-1', leaf: true }] },
        { id: 'b', text: '分类 B', leaf: true }
    ]
});

Parameters:

setSplitDraggable() → {boolean}

Description:

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

Inherited From:

• FineUI.PanelBase#setSplitDraggable

Returns:

Type

boolean

setTitleTooltip(tooltip)

Description:

• 设置面板标题提示信息

Inherited From:

• FineUI.PanelBase#setTitleTooltip

Parameters:

showIcons()

Description:

• 显示节点图标

toggleCollapse()

Description:

• 切换面板的折叠状态

Inherited From:

• FineUI.PanelBase#toggleCollapse

toggleIcons()

Description:

• 显示/隐藏节点图标

uncheckNode(node, options)

Description:

• 取消选中节点复选框

Parameters:

uncheckNodes(nodes, optionsopt)

Description:

• 取消选中节点复选框（与checkNodes对应）

Examples

批量取消勾选：

FineUI.ui.tree1.uncheckNodes(['zhumadian', 'luohe']);

取消勾选并递归子节点（清空某分支）：

FineUI.ui.tree1.uncheckNodes(['henan'], { deep: true });

Parameters:

Events

beforehide

Description:

• 隐藏控件之前触发（返回false则取消隐藏操作）

Inherited From:

• FineUI.Component#event:beforehide

beforeitemclick

Description:

• 点击列表项之前触发（返回false则不执行FineUI.DataList#event:itemclick事件）

Parameters:

beforenodeclick

Description:

• 点击树节点之前触发（返回false则阻止选中并取消nodeclick事件；典型场景：未保存修改时阻止切换节点）

Example

有未保存修改时弹确认框阻止切换：

FineUI.create({
    type: 'Tree',
    listeners: {
        beforenodeclick: function (event, nodeId) {
            if (FineUI.ui.form1.isDirty()) {
                FineUI.alert('请先保存或撤销表单修改');
                return false;
            }
        }
    }
});

Parameters:

beforenodecontextmenu

Description:

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

Parameters:

beforeshow

Description:

• 显示控件之前触发（返回false则取消显示操作）

Inherited From:

• FineUI.Component#event:beforeshow

collapse

Description:

• 折叠面板时触发（启用collapsible: true时；用户点击折叠图标或调用collapse()都会触发）

Inherited From:

• FineUI.PanelBase#event:collapse

Example

侧栏折叠后让中央面板"伸开"覆盖空间：

FineUI.ui.panelSide.on('collapse', function () {
    FineUI.ui.panelMain.setWidth(window.innerWidth);
});

Parameters:

dataload

Description:

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

dirtychange

Description:

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

Inherited From:

• FineUI.PanelBase#event:dirtychange

expand

Description:

• 展开面板时触发（与collapse事件对应）

Inherited From:

• FineUI.PanelBase#event:expand

Parameters:

hide

Description:

• 隐藏控件时触发

Inherited From:

• FineUI.Component#event:hide

iframeload

Description:

• 内联框架加载完毕时触发（启用iframe: true时；常用于和 iframe 内部脚本通讯）

Inherited From:

• FineUI.PanelBase#event:iframeload

Example

iframe 加载完成后给子页面注入参数：

FineUI.create({
    type: 'Window', iframe: true, iframeUrl: '/detail.aspx',
    listeners: {
        iframeload: function () {
            var iframeWin = this.getIFrameWindow();
            iframeWin.someInitFunction({ userId: 101 });
        }
    }
});

layout

Description:

• 布局控件时触发

Inherited From:

• FineUI.Component#event:layout

nodecheck

Description:

• 选中/取消选中树节点复选框时触发（启用checkbox: true时；若同时启用cascadeCheck，级联引发的兄弟/子节点变更也会逐个触发本事件）

Example

响应复选框变化，统计当前选中数量：

FineUI.create({
    type: 'Tree', renderTo: document.body, height: 300, checkbox: true, cascadeCheck: true,
    rootNode: {
        expanded: true,
        children: [
            { text: '河南省', expanded: true, children: [
                { id: 'zhumadian', text: '驻马店', leaf: true },
                { id: 'luohe',     text: '漯河',   leaf: true }
            ]}
        ]
    },
    listeners: {
        nodecheck: function (event, nodeId, checked) {
            // checked 为 true 表示刚被勾选；false 表示刚取消勾选
            var count = this.getCheckedNodes().length;
            FineUI.alert((checked ? '选中' : '取消') + ' ' + nodeId + '，当前共选中 ' + count + ' 项');
        }
    }
});

Parameters:

nodeclick

Description:

• 点击树节点时触发

Parameters:

nodecollapse

Description:

• 折叠树节点时触发

Parameters:

nodedblclick

Description:

• 双击树节点时触发

Parameters:

nodedeselect

Description:

• 取消选中节点时触发

Parameters:

nodeexpand

Description:

• 展开树节点时触发

Parameters:

nodelazyload

Description:

• 延迟加载树节点时触发（节点首次展开时触发；用户在事件回调里通过loadData(nodeId, children)提供子节点数据）

Example

典型的懒加载实现（与autoLeafIdentification: false配合，让非叶子节点保留展开图标）：

FineUI.create({
    type: 'Tree', autoLeafIdentification: false,
    rootNode: { expanded: true, children: [{ id: 'henan', text: '河南' }] },
    listeners: {
        nodelazyload: function (event, nodeId) {
            // 实际项目这里通常发起 ajax 请求
            var children = fetchChildrenFromServer(nodeId);
            this.loadData(nodeId, children);
        }
    }
});

Parameters:

nodeselect

Description:

• 选中树节点时触发

Parameters:

remove

Description:

• 移除控件时触发（调用 remove() 时，控件 DOM 被销毁之前触发；可用于清理外部资源 / 解绑全局事件）

Inherited From:

• FineUI.Component#event:remove

render

Description:

• 渲染控件时触发

Inherited From:

• FineUI.Component#event:render

resize

Description:

• 面板尺寸改变时触发

Inherited From:

• FineUI.PanelBase#event:resize

selectionchange

Description:

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

Parameters:

show

Description:

• 显示控件时触发

Inherited From:

• FineUI.Component#event:show

splitdrag

Description:

• 拖动分隔条时触发（拖动操作）

Inherited From:

• FineUI.PanelBase#event:splitdrag

Parameters: