详细属性说明
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)
其它属性
Attachments:
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)