前面几篇文章介绍了tree组件的属性,接下来我们要介绍tree组件的一些方法。
方法名称 | 参数 | 描述 |
---|---|---|
options | 无 | 获取组件所有属性。 |
loadData | data | 加载节点数据。 |
getNode | target | 获取指定节点对象。 |
getData | target | 获取指定节点及其子节点的数据。 |
reload | target | 重新加载节点数据。 |
getRoot | 无 | 获取首个根节点对象。 |
getRoots | 无 | 获取所有根节点对象。 |
getParent | target | 获取指定节点的父节点。 |
getChildren | target | 获取指定节点的所有子节点。 |
getChecked | state | 获取复选框被选中的节点。参数state可以是”checked”、”unchecked”、”indeterminate”三种。 |
getSelected | 无 | 获取被选中的节点。 |
isLeaf | target | 判断指定节点是否为叶节点。 |
find | id | 查找并返回指定节点对象。参数为节点id。 |
select | target | 选中指定的节点。 |
check | target | 选中指定节点的复选框。 |
uncheck | target | 取消中指定节点的复选框。 |
collapse | target | 收缩指定的节点。 |
expand | target | 展开指定的节点。 |
collapseAll | target | 收缩所有节点。 |
expandAll | target | 展开所有节点。 |
expandTo | target | 展开部分节点。范围从根节点开始直到参数target指定的节点。 |
scrollTo | target | 滚动条滚到指定节点。1.3.4及以上版本支持。 |
append | param | 在指定节点下追加子节点。 |
toggle | target | 切换指定节点的展开/收缩状态。 |
insert | param | 在指定节点的前或后插入节点。 |
remove | target | 删除指定节点及其子节点。 |
pop | target | 弹出指定节点及其子节点。 |
update | param | 更新指定节点。 |
enableDnd | 无 | 开启drag和drop功能。 |
disableDnd | 无 | 关闭drag和drop功能。 |
beginEdit | target | 开始编辑指定节点。 |
endEdit | target | 结束编辑指定节点。 |
cancelEdit | target | 取消编辑指定节点。 |
以上方法中,参数target都是指节点的DOM对象。获取target的方法也有2种,一种是事件触发时,事件方法本身就将节点对象作为参数传递,可直接通过节点获取。另一种是通过getSelected、getChecked等方法,获取指定节点对象,然后获取target。
<script>
$("#treeContainer").tree({
onClick:function(node) {
// 通过触发onclick事件,获取节点对象同时获取target
var target = node.target;
}
});
// 通过使用getSelected方法获取节点对象和target
var node = $("#treeContainer").tree("getSelected");
var target = node.target;
</script>
loadData通过加载本地json格式的数据构造各级树节点,数据如[{id:1,text:"一级节点",state:"closed"}]
。
getNode和getData两个方法用法一致,虽然官方文档描述有所差异,但从实际返回的结果来看却是一样的。
<script>
$("#treeContainer").tree({
onClick:function(node) {
var target = node.target;
var d = $(this).tree("getNode",target); // 获取被点击节点的对象
var text = d.text; // 获取被点击节点的文本标题
var checked = d.checked; // 获取被点击节点的复选框勾选情况
var state = d.state; // 获取被点击节点的展开或收缩状态
var sub = d.children; //获取被点击节点的子节点
for (var i in sub) { //循环显示被点击节点子节点的文本标题
alert(sub[i].text);
}
}
});
</script>
reload用于重新加载指定节点的数据。
getRoot和getRoots区别在于前者只获取第一个根节点,而后者获取所有的根节点。
以上图为例,getRoot只返回第一个根节点,即“人力资源部”,返回值为该节点对象;getRoots返回所有根节点,分别为“人力资源部”、“企业信息化部”、“总务部”、“硬件事业部”、“软件事业部”,返回值为节点数组。
getParent和getChildren分别获取指定节点的父节点和子节点。getParent只获取直接父节点,不获取更上层级的祖先节点;getChildren则不同,它获取自身以下所有层级的子节点。
getChecked获取所有复选框处于选中状态的节点。这个方法具有一个state参数,代表不同的状态。参数有”checked”、”unchecked”、”indeterminate”三种,含义分别为选中状态、未选中状态、中间状态,不加该参数即默认为选中状态。同时,开发人员也可以同时获取多种选中状态。
<script>
// 获取所有处于未选中状态的节点
var node1 = $("#treeContainer").tree("getChecked","unchecked");
// 获取所有处于选中状态和中间状态的节点
var node2 = $("#treeContainer").tree("getChecked",["checked","indeterminate"]);
</script>
getSelected返回所有处于选中状态的节点。相比getChecked方法,getSelected可以作用于任何节点,不管节点有没有显示复选框,一般点击节点,该节点就处于selected状态。本文上图中“企业信息化部”就处于selected状态,该节点具有浅蓝色的背景条。而getChecked只针对复选框。
isLeaf表示该节点是否为叶子节点(即该节点没有子节点),返回布尔值。
find通过id找到特定子节点,有关节点的id属性,请参阅《tree组件(基本属性和用法)》和《tree组件(高级属性和用法)》等。
select、check、uncheck分别表示选中节点、选中节点复选框、取消选中节点复选框,参数均为target,不多做说明。
collapse、expand、collapseAll、expandAll、expandTo都是用于展开/收缩节点及其子节点的方法。上文中的表格都做了介绍,也不多做说明。
append方法用于增加子节点。在《tree组件(高级属性和用法)》一文中,我们用到了append方法。方法具有parent和data两个参数,前者用于定位父节点,所有的数据将插入到该父节点下,成为该父节点的子节点。data是存储子节点的数组,每个数组元素都包含了一组能描述子节点的属性。
<script>
var sub_nodes = [
{id:1,text:"节点1"},
{
id:2,
text:"节点2",
state:"closed",
children:[{id:21,text:"子节点1"},{id:22,text:"子节点2"}]
}];
$("#treeContainer").tree({
onBeforeExpand:function(node) {
$("#treeContainer").tree("append",{parent:node.target,data:sub_nodes});
}
});
</script>
toggle用于切换指定节点的展开/收缩状态,即使用该方法后,指定节点原先为展开状态的将变为收缩状态,反之亦然。
insert方法在指定的节点之前(或之后)插入新的节点。insert的用法与append类似,只是它没有parent属性,取而代之的是before(在指定节点之前插入)或after(在指定节点之后插入)属性。$("#treeContainer").tree("insert",{after:node.target,data:sub_nodes});
remove和pop方法都是删除指定的节点以及它所属的所有子节点。remove方法是纯粹的删除,而pop方法则与数据结构中“弹栈”的概念相同,它删除指定节点及其子节点后,会返回上述节点。
update方法用于更新指定节点。
$("#treeContainer").tree("update",{
target:node.target,
text:"new text”,
checked:false,
iconCls:"icon-man"
});
update方法中的param参数是一个包含了5个属性的数组,属性为target、id、text、iconCls、checked,分别代表要更新的节点、节点id、节点标题文本、节点图标样式、节点复选框是否被选中。
enableDnd和disableDnd表示开启和关闭拖拽功能。
beginEdit、endEdit、cancelEdit都是用于编辑节点的方法,通过三种方法和对应的事件,开发人员可以直接对节点进行增删改等操作。关于这三种方法,我们将会在《Tree组件(事件)》一文中,结合方法、上下文菜单、事件等诸多元素,完整介绍如何直接编辑节点。