【连载】研究EasyUI系统—Tree组件(方法)

原创 2017年04月28日 10:23:37

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

版权声明:本文为博主原创文章,未经博主允许不得转载。 https://blog.csdn.net/redeg/article/details/70888184

用 Java 实现回调例程

作者:John D. Mitchell 摘要在 Java 支持方法指针之前,Java 接口不能提供一种实现回调的好方法。如果您习惯于传递在事件驱动编程模型中调用的函数指针,则您会喜欢本技巧。 熟悉 M...
  • wxyxl
  • wxyxl
  • 2001-05-23 19:30:00
  • 1880

easyui tree插件扩展

/** * 1)扩展jquery easyui tree的节点检索方法。使用方法如下: * $("#treeId").tree("search", searchText); * 其中,tre...
  • stalwartwill
  • stalwartwill
  • 2014-06-26 15:43:18
  • 4657

【连载】研究EasyUI系统—Tree组件(高级属性和用法)

tree组件的基本用法已经在《研究EasyUI系统—Tree组件(基本属性和用法)》一文中介绍过(http://blog.csdn.net/redeg/article/details/70213557...
  • redeg
  • redeg
  • 2017-04-18 11:41:38
  • 746

【连载】研究EasyUI系统—Panel组件(属性)

panel属性比较多,根据常用的程度有选择性地介绍一些。
  • redeg
  • redeg
  • 2017-01-11 15:36:52
  • 1380

【连载】研究EasyUI系统—Tree组件(事件)

本文介绍Tree组件的事件。
  • redeg
  • redeg
  • 2017-05-27 14:49:54
  • 431

【连载】研究EasyUI系统—Tree组件(方法)

前面几篇文章介绍了tree组件的属性,接下来我们要介绍tree组件的一些方法。...
  • redeg
  • redeg
  • 2017-04-28 10:23:37
  • 286

关于easyui tree控件树节点的搜索实现

easyui tree树我们开发人员一般都不会陌生,很多时候我们会有这么一个需求,让子树层级比较多的时候,我们要寻找我们需要的子树就变得有些麻烦,所以我们可以做一个树的搜索功能,废话不多说,我们立刻上...
  • kry1201
  • kry1201
  • 2016-04-13 14:32:49
  • 2260

easyUI Tree

@author YHC 覆盖默认值 $.fn.tree.defaults. tree显示一个树结构分层数据在web页面中,它提供用户, expand(展开), collapse(折叠), dr...
  • yhc13429826359
  • yhc13429826359
  • 2012-08-03 17:23:10
  • 8820

easyui之tree控件分析

/** * tree - jQuery EasyUI * * Licensed under the GPL: * http://www.gnu.org/licenses/gpl.txt ...
  • u010476739
  • u010476739
  • 2017-06-18 01:54:56
  • 906

Jquery easyui tree的使用

这个ui用的一切都是json数据。树也是如此! h
  • hzw2312
  • hzw2312
  • 2014-08-29 09:48:15
  • 98707
收藏助手
不良信息举报
您举报文章:【连载】研究EasyUI系统—Tree组件(方法)
举报原因:
原因补充:

(最多只允许输入30个字)