【连载】研究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组件(事件)》一文中,结合方法、上下文菜单、事件等诸多元素,完整介绍如何直接编辑节点。

版权声明:本文为博主原创文章,未经博主允许不得转载。

相关文章推荐

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

本文介绍Tree组件的事件。
  • redeg
  • redeg
  • 2017年05月27日 14:49
  • 233

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

panel方法和事件。
  • redeg
  • redeg
  • 2017年01月12日 09:50
  • 2164

【连载】研究EasyUI系统— Resizable组件

resizable组件提供了一种可拉伸、缩小放大的功能,很多桌面应用程序,比如图片查看器、word文档等,用户可以通过鼠标将程序拉大拉小,resizable组件则在web页面上为各类元素提供了类似的功...
  • redeg
  • redeg
  • 2017年02月10日 16:05
  • 463

【连载】研究EasyUI系统—Draggable组件

draggable组件在web上创建一个可以拖动的元素。用户可以拖动draggable组件到页面的任何位置。     我们通过制作一个简陋的便签贴展示一下draggable的用法和效果。先上图: ...
  • redeg
  • redeg
  • 2017年02月04日 16:24
  • 242

【连载】研究EasyUI系统— Accordion组件

Accordion组件是easyui框架中的布局组件之一,它提供了多个可展开/折叠的面板。Accordion经常用作页面的导航菜单。...
  • redeg
  • redeg
  • 2017年02月19日 21:54
  • 489

【连载】研究EasyUI系统— Layout组件

layout看它的名称便知道是一个用于布局的组件。
  • redeg
  • redeg
  • 2017年03月23日 14:51
  • 192

【连载】研究EasyUI系统— Window组件

window组件是独立于父组件的窗口组件,往往用于显示额外的信息或者接收用户的输入。窗口可以关闭,也可以拖动或拉伸,有很强的灵活性。...
  • redeg
  • redeg
  • 2017年03月28日 10:45
  • 275

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

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

【连载】研究EasyUI系统— Dialog组件

dialog组件与window组件基本一致,很多内容都可参考window组件一文。
  • redeg
  • redeg
  • 2017年04月01日 09:19
  • 199

【连载】研究EasyUI系统— Messager组件

messager组件作为提示框,应用的场合非常多,例如常见的操作确认等。messager的种类也很多,有“确认”、“提示”、“输入”等等。它依赖于window、linkbutton、progressb...
  • redeg
  • redeg
  • 2017年04月06日 21:59
  • 187
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:【连载】研究EasyUI系统—Tree组件(方法)
举报原因:
原因补充:

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