【连载】研究EasyUI系统—Tree组件（方法）

　　前面几篇文章介绍了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组件（事件）》一文中，结合方法、上下文菜单、事件等诸多元素，完整介绍如何直接编辑节点。