Dorado 9 : Node(DCUG)

详细属性说明

name

采用java变量名的命名规则,禁用中文,数字和特殊符号等,如下的一些命名规则都是不推荐的: 

不良的name命名示例
部门1
dept.id
$deptId
dept^id
dept@id
20120101

checkable

如果将该属性设置为true,则树节点将会出现一个复选框对象:

checked

树节点提供该属性用来标识出节点本身是否处于被选中状态。如判断顶层节点中那些节点被选中的就可以如下实现代码:

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

运行效果如:

另外checked支持三种可选值:

图标说明
true表示当前节点选中
false未选中
null未选中,但是有子节点被选中

如下的执行代码:

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

执行效果图:

autoCheckChildren

用与自动勾选子节点,如将父节点的当前状态调整为选中,则子节点就全部选中,反过来就是取消所有子节点的选中状态,如下的动画效果:

利用以上的功能我们可以将一棵树的所有节点都选中或取消选中,如:

	treeOrg.get("nodes").each(function(node){
		node.set("checked", false);
	});

label

用于定义节点的标题,如果希望定制label的css风格,可参考如下代码实现:

.d-tree-node .label {
color: tomato;
}

label默认是一个普通的文本,你可以利用css做一些控制。如果希望实现更复杂的HTML效果,则建议利用Tree的onRenderNode事件复写DOM,如:

var node = arg.node;
$(arg.dom).empty().xCreate([ {
			tagName : "SPAN",
			contentText : node.get("label")
		}, {
			tagName : "IMG",
			src : $url(">images/new.gif"),
			style : "position: relative; left: 4px; top: 4px"
		} ]);

页面效果如:

level

通过这个属性我们可以知道对应的Node节点处于树的节点层次,在Tree的介绍中我们提过Tree有一个不可见的Root节点,对于Root节点而言,其level为0,而对于我们在树中可见的顶层节点,其level为1;其中的子节点的level为2,以此类推。

注意level是一个只读属性,它完全由自身所处的节点层次决定这个值,你无法通过node.set("level",xxx)这种方式修改level属性,也是不允许的。

icon,exapndedIcon

用于设置label前面的图标元素:

icon图标(树节点未展开时的图标)

expandedIcon图标(树节点展开后的图标)

与图标对应的className的设置就是通过iconClass和expandedIconClass属性设置的。

nodes

通过nodes属性可以访问Node下的子节点,或设置Node下的子节点。

范例1(访问子节点):

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

范例2(设置子节点):

var currentNode = treeView.get("currentNode");
currentNode.set("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"		
	}]);

tags

支持控件标签特性,基本使用方式同Control的tags。详情请参考:Control(DCUG)

tip

用于鼠标悬浮在节点上方时的系统提示信息的设置,如我们对Floatable节点设置了tip属性:

那么在浏览器中当鼠标移动到Floatable节点上时,就能出现如下图的系统提示信息:

userData

支持userData特性,基本使用方式同Control的userData。详情请参考:Control(DCUG)

其它属性

更详细的说明请参考:http://bsdn.org/projects/dorado7/deploy/jsdoc/

Attachments:

NodeCheckable.PNG (image/png)
NodeChecked.PNG (image/png)
NodeCheckedNone.PNG (image/png)
CheckedTrue.png (image/png)
CheckedFalse.png (image/png)
CheckedNull.png (image/png)
NodeautoCheckChildren.gif (image/gif)
TreeonRenderNode.PNG (image/png)
NodeIcon.PNG (image/png)
NodeExpandedIcon.PNG (image/png)
NodeTip.png (image/png)
NodeTipDesign.PNG (image/png)