基本特性

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

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

使用简介

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

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

// @Bind #treeView.onCreate
!function(self, arg) {
self.set("nodes",[{
	label:"General",
	icon:"images/folder.gif",
	nodes:[{
		label:"DataSet",
		icon:"images/view/DataSet.gif"
	},{
		label:"Control",
		icon:"images/view/Control.gif"
	},{
		label:"Container",
		icon:"images/view/Container.gif"
	},{
		label:"HtmlContainer",
		icon:"images/view/HtmlContainer.gif"
	},{
		label:"SubViewHolder",
		icon:"images/view/SubViewHolder.gif"		
	}]
},{
	label:"Action",
	icon:"images/folder.gif",
	nodes:[{
		label:"Action",
		icon:"images/view/Action.gif"
	},{
		label:"AjaxAction",
		icon:"images/view/AjaxAction.gif"
	},{
		label:"UpdateAction",
		icon:"images/view/UpdateAction.png",
		nodes:[{
			label:"UpdateItem",
			icon:"images/view/UpdateItem.gif",
		}]
	},{
		label:"FormSubmitAction",
		icon:"images/view/FormSubmitAction.gif"		
	}]	
}
]);
}

树节点

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

详细属性说明

allowNoCurrent

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

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

currentNode

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

var currentNode = treeView.get("currentNode");
dorado.MessageBox.alert(currentNode.get("label"));

defaultIcon和defaultExpandedIcon

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

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

效果差异说明

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

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

defaultIconClass和defaultExpandedIconClass

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

expandingAnimated

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

expandingMode

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

firstNode

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

var firstNode = treeView.get("firstNode");
dorado.MessageBox.alert(firstNode.get("label"));

如果当前树中没有节点该属性的返回值为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代码可以访问到：

var nodes = treeView.root.get("nodes");
var labelStr = "";
nodes.each(function(node){
	labelStr+=node.get("label")+"\n";
});
dorado.MessageBox.alert(labelStr);

rowHeight

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

当然你也可以调整行高：

显示效果差异说明

rowHeigh为24

rowHeight为50

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

scrollMode

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

selectionMode和selection

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

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

var nodes = treeView.get("selection");
var labelStr = "";
nodes.each(function(node){
	labelStr+=node.get("label")+"\n";
});
dorado.MessageBox.alert(labelStr);

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

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

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

showLines

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

显示效果差异说明

showLines为false

showLines为true

Dorado 9 : Tree(DCUG)

基本特性

使用简介

树节点

详细属性说明

allowNoCurrent

currentNode

defaultIcon和defaultExpandedIcon

defaultIconClass和defaultExpandedIconClass

expandingAnimated

expandingMode

firstNode

highlightCurrentRow

highlightHoverRow

highlightSelectedRow

indent

root

rowHeight

scrollMode

selectionMode和selection

showLines

Attachments: