Skip to end of metadata
Go to start of metadata

基本特性

Tree提供nodes属性让你添加一个数组或一个EntityList对象,然后将这些对象按照树节点的方式添加到Tree中。

Tree继承Control对象,因此也具有Control控件的基本特性,详情请参考:Control(DCUG)

使用简介

简单场景中,我们可以直接在View的设计器中添加树节点,如:

或者通过JS编码设置nodes属性:

树节点

树节点的详细说明请参考: Node

详细属性说明

allowNoCurrent

当此属性为true时,如果用户点击了Tree中空白区域后,当前树节点将被设置为空。如下的动画中我们选择了其中的一个树节点,这个树节点就有一个绿色背景,这个时候将鼠标移到Tree的空白区域,并单击后选中树节点的绿色背景就消失:

默认值为false,当这个值为false时,激活的树节点的背景色就始终存在:

currentNode

通过currentNode可以获得当前激活的树节点对象,如:

defaultIcon和defaultExpandedIcon

Tree通过这两个属性设置默认的节点图标,当然你也可以直接设置到Node节点上。

defaultIcon与defaultExapndedIcon的差别通过如下的比较图区分:

效果差异说明

Action节点未展开前显示的是defaultIcon的图标

Action节点展开后显示的是defaultExpandedIcon的图标

 

defaultIconClass和defaultExpandedIconClass

defaultIconClass与defaultExpandedIconClass的属性是分别设置defaultIcon与defaultExapndedIcon的css效果的。

expandingAnimated

该属性控制拥有子节点的父节点在展开是是否有一个动画效果。

expandingMode

节点展开的同步模式,默认为异步展开。 

firstNode

返回树中的第一个有效节点。如:

 

如果当前树中没有节点该属性的返回值为null.

highlightCurrentRow

该属性用于控制是否高亮显示当前行。highlightCurrentRow的默认值为true。

显示效果差异说明

highlightCurrentRow为true

highlightCurrentRow为false


highlightHoverRow

该属性设置当光标在Tree节点的上方移动的时候是否高亮显示鼠标悬停的行。如果设置为false就会关闭这种特效。

highlightSelectedRow

该属性用于关闭下图中当前选中树节点选中高亮背景显示的效果,当时并不影响Tree的selectionMode功能(后面将会详细说明selectionMode属性)

indent

每一层子节点相对于父节点的缩进距离。

显示效果比较

indent默认值18

indent值设置为50

 

root

root是系统自动创建的根节点,其它节点都位于root节点的下面。同样root节点是不可见的它是为管理树节点而提供的一个根节点。不过通过JS代码可以访问到:

rowHeight

在PC中浏览Tree的默认行高为24,移动设备上默认的行高为30.

当然你也可以调整行高:

显示效果差异说明

rowHeigh为24

rowHeight为50

看起来后面的页面效果稍嫌粗糙,但是在移动设备上或许后面的页面效果会更好,或对老年人来说可能更喜欢后面的界面效果。

scrollMode

该功能机制与BlockView中的scrollMode一样,详情请参考:BlockView(DCUG)

selectionMode和selection

当selectionMode为singleRow或multiRows时,你可以通过ctrl或者shift快捷键选中多个树节点。

并且通过Tree的selection属性访问:

selectionMode的默认值为none,表示默认不支持ctrl或shift快捷键。

注意:Tree的selection与Node的checked是两个不同的东西

如果想要知道那些节点被选中就需要递归树节点,并判断Node的checked属性,参考:Node(DCUG)

 

showLines

Tree提供showLines用于控制节点之间是否显示虚线连接。

 

显示效果差异说明

showLines为false

showLines为true

 

 

 

Labels
  • No labels