构建 DataTree 类的新实例。
全称 | mx.datacontrols.DataTree |
命名空间 | mx.datacontrols |
类 | DataTree |
继承层次结构 | DataTreeControl |
源文件 | ~\mx\scripts\datacontrols\DataTree.js |
JavaScript 代码 |
var dataTree = new mx.datacontrols.DataTree({
baseUrl: "~/dbm/rest/person/tree"
});
dataTree.load(); |
JavaScript 代码 |
var treeEntityContainer = new mx.datacontainers.TreeEntityContainer({
baseUrl: "~/dbm/rest/person/tree" // rest 服务地址规约详见接口设计文档
});
var dataTree = new mx.datacontrols.DataTree({
entityContainer: treeEntityContainer
});
dataTree.load(); |
JavaScript 代码 |
var treeEntityContainer = new mx.datacontainers.TreeEntityContainer({
type: "local",
data: [
{
id: "a",
text: "中国",
hasChildren: true,
childNodes:[
{
id: "a-21",
text: "江苏"
},
{
id: "a-22",
text: "台湾"
}
]
},
{
id: "b",
text: "巴西"
}
]
});
var dataTree = new mx.datacontrols.DataTree({
entityContainer: treeEntityContainer
});
dataTree.load(); |
JavaScript 代码 |
var dataTree = new mx.datacontrols.DataTree({
entityContainer: treeEntityContainer,
displayCheckBox: true, // 是否需要在树中显示选中框
onselectionchanged: _tree_selectionchanged
});
dataTree.load();
function onselectionchanged(e)
{
alert("The current selected node is " + e.selection.text + ".");
} |
名称 | 说明 |
DataTree() | 构建 DataTree 类的新实例。 |
名称 | 说明 |
init() |
名称 | 说明 |
appendNode(p_node) | 添加一个根节点(该节点为最后一个根节点),并返回该节点。如果当前没有选中的节点,并且 autoSelect 属性为 true,那么使用该方法后会选中第一个节点。 |
appendNodes(p_nodes) | 添加一组根节点,并以数组的形式返回添加的这些节点。 |
clearNodes() | 清空所有的节点,并触发 onselectionchanged 事件。 |
contains($p_target) | 返回一个 Boolean 值,该值表示控件的容器中是否包含该 JQuery 对象。 |
dispose() | 释放对象运行时动态生成的内容(属性、方法、事件)。 |
findNode(p_expression)
![]() |
返回当前树中复合 p_expression 条件的树节点(DataTreeNode 类型)。当复合条件的树节点数等于 0 时,返回 null;等于 1 时,返回该 LI 元素对应的树节点对象;当大于 1 时,返回复合条件的第一个 LI 元素对应的树节点对象。 |
findNodes(p_expression)
![]() |
返回一个 DataTreeNode 数组,表示当前树中复合 p_expression 条件的所有树节点(DataTreeNode 类型)。如果没有查找到复合条件的节点,则返回一个空数组([])。 |
getCheckedNodeIDs() | 获取所有选中的节点的唯一标识的集合。该方法仅在 displayCheckBox 为 true 时有效。 |
getCheckedNodes() | 获取所有选中的节点的集合。该方法仅在 displayCheckBox 为 true 时有效。 |
getContext() | 获取控件当前所属 Weblet 的上下文信息( WebletContext 类型)。 |
getEl() | 获取控件容器对应的 HTML DOM 元素对象。 |
getNode($p_li)
![]() |
返回指定节点标识(或指定节点对应的 LI 元素)的树节点(DataTreeNode 类型)。 |
getNode(p_li)
![]() |
返回指定节点标识(或指定节点对应的 LI 元素)的树节点(DataTreeNode 类型)。 |
getNode(p_nodeID)
![]() |
返回指定节点标识(或指定节点对应的 LI 元素)的树节点(DataTreeNode 类型)。 |
hide() | 隐藏控件,设置控件不可见。 |
insertNodeAfter(p_node, $after)
![]() |
将节点插入到指定的 JQuery 对象的后面,并返回该节点。如果当前没有选中的节点,并且 autoSelect 属性为 true,那么使用该方法后会选中第一个节点。 |
insertNodeBefore(p_node, $before)
![]() |
将节点插入到指定的 JQuery 对象的前面,并返回该节点。如果当前没有选中的节点,并且 autoSelect 属性为 true,那么使用该方法后会选中第一个节点。 |
load([p_data], [p_callback]) | 加载树。第一次加载树的时候需要调用该方法,加载子节点时控件会自动加载。 |
moveTo(p_left, p_top) | 移动控件到指定位置。 |
prependNode(p_node) | 添加一个根节点(该节点为第一个根节点),并返回该节点。如果当前没有选中的节点,并且 autoSelect 属性为 true,那么使用该方法后会选中第一个节点。 |
refresh(p_callback) | 刷新树节点。该方法与 load 方法等同。 |
resizeTo(p_width, p_height) | 重设控件的大小。 |
selectFirstNode() | 选择树控件的第一个节点。该方法仅当 selection 为空的时候有效。 |
selectNode(p_node, [p_triggerEvent]) | 选择 DataTree 中的指定的树节点。 |
setBorder(p_border) | 设置控件的边框样式。 |
setBottom(p_bottom) | 设置 bottom 字段的值。 |
setCss(p_css) | 设置 css 字段的值。 |
setCssClass(p_cssClass) | 设置 cssClass} 字段的值 |
setDisplay(p_display) | 设置 display 字段的值。 |
setEnabled(p_enabled) | 设置 enabled 字段的值。 |
setEntityContainer(p_entityContainer) | 设置 entityContainer 字段的值。 |
setHeight(p_height) | 设置 height 字段的值。 |
setLeft(p_left) | 设置 left 字段的值。 |
setPadding(p_padding) | 设置控件的内边距。 |
setPosition(p_position) | 设置 position 字段的值。 |
setRight(p_right) | 设置 right 字段的值。 |
setTop(p_top) | 设置 top 字段的值。 |
setVisible(p_visible) | 设置 visible 字段的值。 |
setWidth(p_width) | 设置 width 字段的值。 |
show() | 显示控件,设置控件可见。 |
$(p_expression) | 该方法与 me.$e.find(p_expression) 等同。 |
$wrap([p_obj]) | 返回一个 JQuery 对象。 |
_createNode(p_node) | 受保护的。根据指定的条件创建并返回节点(DataTreeNode 类型)。 |
名称 | 说明 |
alias | 获取或设置一个字符串,表示控件的别名。 |
autoSelect | 获取或设置一个 Boolean 值,表示当树节点中没有选中节点的时候,是否自动选择第一个节点。如果该值为 true,则自动选择;反之则不自动选择。 |
baseUrl | 请参见 EntityContainer.baseUrl 属性。如果 DataTree 的 entityContainer 由外界创建,那么该属性不需要设置; 否则需要设置该属性的值。 |
border | 获取控件的边框样式。如“1px solid red”,表示边框的样式为 1 像素红色的实线。请使用 setBorder 方法设置该字段的值。 |
bottom | 获取控件的下边界与父容器下边界的像素距离。请使用 setBottom 方法设置该字段的值。 |
checkCascade | 获取或设置一个 Boolean 值,该值表示树节点选中时,是否级联选择其父子树节点。该字段在 displayCheckBox 字段为 true 时有效。 |
collapseAnimation | 获取或设置树节点隐藏的动画效果。
该字段的可选值包括:
|
contextMenu | 一个 ContextMenu 对象,表示控件的右键菜单。 |
cssClass | 指定css伪类名称,设置控件显示样式 |
display | 获取控件的显示样式值。如“none”,表示隐藏控件; “block”表示强制作为块对象呈递。请使用 setDisplay。注:该"block"值不能在ComplexGrid控件中使用。 方法设置该字段的值。 |
displayCheckBox | 获取或设置一个 Boolean 值,该值表示树节点之前是否显示一个选择框。如果该值为 true,则表示显示;反之则不显示。该字段必须在初始化前设置。 |
enabled | 获取控件是否可以对用户交互作出响应。如果该值为 true,则表示控件可以对用户交互作出响应;反之则不能。 请使用 setEnabled 方法设置该字段的值。 |
entityContainer | 获取一个 EntityContainer 对象,表示 DataTree 的数据容器。如果没有为 DataTree 控件指定数据源,则只能通过 appendNode 等方法添加树节点,而 load 等动态加载树节点的方法均无效。 |
eTag | 获取控件的标签。 |
expandAnimation | 获取或设置树节点显示的动画效果。
该字段的可选值包括:
|
height | 获取控件的高度。可以是数字(如 500)、字符串(如“500px”或“50%”)。请使用 setHeight 方法设置该字段的值。 |
imageSize | 获取 DataTreeNode 图片的大小。该字段必须在初始化前设置。 |
isLasyLoad | 获取或设置一个 Boolean 值,表示树的节点是否懒加载。 |
layoutConfigs | 获取或者设置一个 JSON 对象,该属性表示控件在父容器中的布局配置参数。该属性只有在控件父容器运用布局器才会生效。 |
left | 获取控件的左边界与父容器左边界的像素距离。请使用 setLeft 方法设置该字段的值。 |
moveByShortcutKey | 获取或设置一个 Boolean 值,表示是否使用向上快捷键(ctrl+shift+↑)或向下快捷键(ctrl+shift+↓)移动单个树节点。 |
nodeMenu | 一个 ContextMenu 对象,表示树节点的右键菜单。 |
padding | 获取控件的内边距。如“4px”表示上下左右的内边距均为 4 像素; “4px 2px 3px 1px”则表示上边距为 4 像素,右边距为 2 像素,下边距为 3 像素,左边距为 1 像素。请使用 setPadding 方法设置该字段的值。 |
parent | 获取控件所属的父对象。 |
permissionID | 获取或设置一个字符串,表示控件的权限标识。 |
position | 获取控件位置样式值。如“static”,表示无特殊定位,对象遵循 HTML 定位规则。请使用 setPosition
方法设置该字段的值。
该字段的可选值包括:
|
refreshSelectedNode | 获取或设置一个 Boolean 值,表示树的节点刷新时,是否在刷新子节点的同时刷新当前选中节点。 |
right | 获取控件的右边界与父容器右边界的像素距离。请使用 setRight 方法设置该字段的值。 |
selection | 获取一个对象,表示 DataTree 中当前选中的节点(DataTreeNode 类型)。 |
showDefaultContextMenu | 获取或设置一个 Boolean 值,表示是否显示默认的树及树节点的上下文菜单,默认菜单项只包含刷新项。 |
speed | 获取或设置树节点展开的速度。 |
top | 获取控件的上边界与父容器上边界的像素距离。请使用 setTop 方法设置该字段的值。 |
treeNodeType | 获取树节点的类型。 |
visible | 获取一个 Boolean 值,表示控件是否可见。如果该值为 true,则表示控件可见;反之则不可见。请使用 setVisible 方法设置该字段的值。 |
width | 获取控件的宽度。可以是数字(如 500)、字符串(如“500px”或“50%”)。请使用 setWidth 方法设置该字段的值。 |
$e | 获取该控件的占位符,该占位符为一个 JQuery 对象。 |
名称 | 说明 |
onexpanded | 当树节点展开后将触发该事件。通常调用 DataTreeNode.expand 方法时会触发该事件。 |
onexpanding | 当展开某个树节点之前,将触发该事件。通常调用 DataTreeNode.expand 方法时会触发该事件。 |
onmenushowing | 当右键单击树节点弹出右键菜单的时候,将触发该事件。 |
onnodeclick | 当点击树节点的时候,将触发该事件。 |
onnodedoubleclick | 当双击树节点的时候,将触发该事件。 |
onnodeindexchanged | 当节点位置发生改变的时候,将触发该事件。通常调用 moveTo、moveUp、moveDown 方法时会触发该事件。 |
onselectionchanged | 当控件当前选择的节点发生改变后,将触发该事件。通常调用 selectNode 和 clearNodes 等方法后会触发该事件。 |
onselectionchanging | 当控件当前选择的节点发生改变的时候,将触发该事件。通常调用 selectNode 方法时会触发该事件。 |
JavaScript 代码 |
var node = dataTree.findNode("#ABC123"); |
JavaScript 代码 |
var node = dataTree.findNode("li#ABC123 > ul > li#XYZ789");
// 或与 mx.datacontrols.DataTreeNode.findNode 方法混合使用
var parentNode = dataTree.findNode("#ABC123");
var node = parentNode.findNode("#XYZ789"); |
JavaScript 代码 |
var node = dataTree.findNode("li:first-child"); |
JavaScript 代码 |
var node = dataTree.findNode("li[itemType='MyType']:last"); |
JavaScript 代码 |
var nodes = dataTree.findNodes("li"); |
JavaScript 代码 |
var nodes = dataTree.findNodes("> ul > li"); |
JavaScript 代码 |
var nodes = dataTree.findNodes("li[itemType='MyType']"); |
JavaScript 代码 |
var node = dataTree.getNode("ABC123"); |
JavaScript 代码 |
var node = dataTree.getNode(li);
// 或 JQuery 对象
var $li = $(li);
node = dataTree.getNode($li); |
JavaScript 代码 |
var node = dataTree.getNode("ABC123"); |
JavaScript 代码 |
var node = dataTree.getNode(li);
// 或 JQuery 对象
var $li = $(li);
node = dataTree.getNode($li); |
JavaScript 代码 |
var node = dataTree.getNode("ABC123"); |
JavaScript 代码 |
var node = dataTree.getNode(li);
// 或 JQuery 对象
var $li = $(li);
node = dataTree.getNode($li); |
JavaScript 代码 |
dataTree.insertNodeAfter(nodeB, nodeC.$e); |
JavaScript 代码 |
dataTree.insertNodeBefore(nodeC, nodeB.$e); |
该字段的可选值包括:
该字段的可选值包括:
该字段的可选值包括: