http://www.lmwlove.com/ac/ID868

在学习文章之前,要学会看官方网站http://destroydrop.com/javascripts/tree。从官方页面你能知道:dtree是什么、它的特性、它的源代码、它的帮助文档以及它的版本历史等等

常用方法
add(parameters):添加节点信息

Index Name Type Discription
1 id Number 当前节点的ID
2 preId Number 当前节点的父节点ID,根节点的值为 -1 
3 name String 当前节点要显示的文字 
4 url String 点击当前节点跳转到的URL
5 title String 鼠标移至该节点时节点显示的标题提示
6 target String 节点链接所打开的目标frame
7 icon String 节点显示的图标,无设置则使用默认图标
8 iconOpen String 打开该节点后显示的图标,无设置则使用默认图标
9 open Boolean 指定当前节点是否打开

【例】mytree.add(1, 0, 'My node', 'node.html', 'node title', 'mainframe', 'img/musicfolder.gif');
【注】dtree.js文件中约87-113行是一些默认图片的路径,可以自己配置图片

openAll():打开所有节点,可在树被创建以前或以后调用
【例】mytree.openAll();

closeAll():关闭所有节点,可在树被创建以前或以后调用
【例】mytree.closeAll();

oAll(bool):打开或关闭所有节点参数为true则打开所有节点,false则关闭所有节点

isOpen(id):指定节点是否处于打开状态如果处于打开状态则返回true,反之false

openTo(parameters)打开指定节点可在树被创建以前或以后调用

Index Name Type Description
1 id Number 需要打开的节点的ID号
2 select Boolean 判断节点是否被选择

o(index) 打开/关闭指定节点,如果节点处于关闭状态则打开,反之则关闭
openTo()方法体内调用的就是o()方法

OPENTO(ID)O(ID)比较

方法名 相同点 缺点 优势
openTo(id) 都是打开某个节点 isOpen方法不能判断该节点是否打开 子节点打开的话,父节点也会相应打开
O(index) 除根节点外,其余id必须从1开始而且不能空缺,反正少用 1)能实现打开/关闭操作 2)ipOpen方法能判断该节点是否打开

下面分别用两种方法打开’MacBookPro系列’节点
1,openTo()直接打开

2,o()表面看起来没反应,只有点开“苹果”节点才能看到

dtree的配置CONFIG
配置干嘛用的?其实配置就是在树初始化时对某些效果进行一些必要的设置,比如config.useIcons=false
意思就是所有节点不显示图片了;

变量 类型 默认值 描述
target String   true 所有节点的target 
folderLinks Boolean  true 文件夹可链接
useSelection Boolean  true 节点可被选择(高亮)  
useCookies Boolean  true 树可以使用cookies记住状态  
useLines Boolean  true 创建带线的树
useIcons Boolean  true 创建带有图标的树
useStatusText Boolean  false 用节点名替代显示在状态栏的节点url
closeSameLevel Boolean  false 只有一个有父级的节点可以被展开,当这个函数可用时openAll() 和 closeAll() 函数将不可用
inOrder Boolean  false 如果父级节点总是添加在子级节点之前,使用这个参数可以加速菜单显示

【例子】mytree.config.target = "mytarget";

页面中的书写规范
1,参数可以不写完,有默认值(从左至右,依次省略),例tree.add(id,pid,name,url);后面5个参数就可以省略
2,有间隔时的默认值(如存在第6个参数,但第5个参数想用默认值),即tree.add(id,pid,name,url,"",target);必须这样写tree.add(id,pid,name,url,"","","","",true);
3,特殊:如果需要显示title(参数5)必须设定相应链接地址(参数4),tree.add(2,0,‘照明控制系统’,‘a.jsp’,‘这是第四个参数title’);?//如果第四个参数为空则无法显示

高手进阶
1,JS创建类对象
JS对象是一种复合类型,它允许你通过变量名存储和访问,换一种思路,对象是一个无序的属性集合,集合中的每一项都由名称和值组成(听起来是不是很像我们常听说的HASH表、字典、健/值对?),而其中的值类型可能是内置类型(如number,string),也可能是对象。

2,Js的prototype(原型)是什么
用来返回对象类型原型的引用,我们使用prototype属性提供对象的类的一组基本功能。并且对象的新实例会"继承"赋予该对象原型的操作。

3,了解一些DTRR.JS内的属性
Node类:
1,this._io = open || false;? //is open? 
2, this._is = false;? //is selected? 
3, this._ls = false;? //last sibling? 
4, this._hc = false;? //has child?

dtree类:
1, this.obj = objName; //对象别名,new dtree时可用
2, this.aNodes = []; //节点数组,每个下标存一个节点

一些可能使用的方法
1,closeLevel(node)关闭当前node节点同级的节点,假设与a节点同级的有b和c节点,而且a、b、c节点都打开了子节点,此时调用closeLevel(a),b、c节点会收拢起来,但a节点不会收拢。例:closeLevel(tree.aNodes[1]) –假设下标1是a

2,getSelected()返回你选择的节点的信息,返回的是一个node对象。例:getSelected().id就能返回选择的节点的id

3,setCS(node)查看节点是否有子节点或者是最后一个节点,方法体内存有’_hc’表示是否有子节点,而’_ls’表示最后的叶子节点

特别注意:aNodes[1]和o(1)等这里的下标绝对不是指add(id,pid..)里的节点id,而是根据整个树形结构按层次递加分配的。

O(2)以后结果会怎么样?

强大的Js树型控件Dtree使用详解的更多相关文章

  1. Js树型控件Dtree使用

    dtree地址:http://destroydrop.com/javascripts/tree/ Key features Unlimited number of levels 无限级 Can be ...

  2. VC中实现带有背景位图的树型控件

    当前许多应用程序都在使用树型控件时为其添加了背景位图,增强的控件的魅力,然而对于Visual C++编程爱好者来说,使用Visual C++MFC提供的树型控件(CTreeCtrl)本身就是一个难点, ...

  3. 《手把手教你》系列技巧篇(三十八)-java+ selenium自动化测试-日历时间控件-下篇(详解教程)

    1.简介 理想很丰满现实很骨感,在应用selenium实现web自动化时,经常会遇到处理日期控件点击问题,手工很简单,可以一个个点击日期控件选择需要的日期,但自动化执行过程中,完全复制手工这样的操作就 ...

  4. javascript遍历控件(实例详解)

    js遍历页面控件, 代码如下 复制代码  var inputArr = document.forms[0];   for( var i = 0; i < inputArr.length; i++ ...

  5. delphi控件属性大全-详解-简介

    http://blog.csdn.net/u011096030/article/details/18716713 button 组件: CAPTION 属性 :用于在按钮上显示文本内容 Cancel ...

  6. AnyCAD三维控件场景节点详解

    SceneNode是AnyCAD三维图形平台的AnyViz显示引擎的核心对象之一,只有放在场景管理器(SceneManager)里的节点才能被显示引擎所显示. 1.   节点分类 SceneNode是 ...

  7. iOS:选择器控件UIPickerView的详解和演示

    选择器控件UIPickerView: 功能:它能够创建一个类似于密码锁式的单列或多列的选择菜单,用户可以通过它设置的代理来选择需要菜单中的任意的数据.例如创建日历.字体表(类型.大小.颜色).图库等. ...

  8. 【VB技巧】VB ListView 控件功能使用详解

    来源:http://lcx.cc/?i=494 ListView控件 在工具箱上击鼠标右键,选择快捷菜单的Components(部件)项,在控件列表中选择Microsoft Windows Commo ...

  9. Webbrowser控件execcommand参数详解

    2D-Position 允许通过拖曳移动绝对定位的对象.AbsolutePosition 设定元素的 position 属性为“absolute”(绝对).BackColor 设置或获取当前选中区的背 ...

随机推荐

  1. CF1043

    找个下午打了场CF,结果被某uranus吊打......一千多名,过弱. T1,一眼二分了,后来发现题解是O(1)的hhh T2,题意精炼一下就是让你找一个串的循环节个数,直接n²枚举..... T3 ...

  2. spring MVC 如何接收前台传入的JSON对象数组

    spring MVC 如何接收前台传入的JSON对象数组 主要方法: (主要用到的包是 net.sf.json  即:json-lib-2.3-jdk15.jar 完整相关jar包: commons- ...

  3. 20181114 Redis

    Redis 下载 Windows版本 Windows版本 已经有很久没有更新了,建议还是使用Linux版本 Linux版本 官网下载即可 配置文件 Windows版本 redis.windows.co ...

  4. Spark记录-spark-env.sh配置

    环境变量 含义 SPARK_MASTER_IP master实例绑定的IP地址,例如,绑定到一个公网IP SPARK_MASTER_PORT mater实例绑定的端口(默认7077) SPARK_MA ...

  5. Codeforces Round #470 (rated, Div. 2, based on VK Cup 2018 Round 1) C.Producing Snow

    题目链接  题意  每天有体积为Vi的一堆雪,所有存在的雪每天都会融化Ti体积,求出每天具体融化的雪的体积数. 分析 对于第i天的雪堆,不妨假设其从一开始就存在,那么它的初始体积就为V[i]+T[1. ...

  6. 转--python 面试题

    # 每一题都值得好好琢磨钻透 [原文地址](http://www.cnblogs.com/Allen-rg/p/7693394.html)1.Python是如何进行内存管理的? 答:从三个方面来说,一 ...

  7. 二、存储管理器--SDRAM

    2.1 硬件结构 2.1.1 硬件框图 CPU 通过存储管理器来读取 SDRAM 网卡 等外部设备,CPU不管外部设备是怎么样的,只是读存储管理器中的地址 CPU从0x30000000地址读取数据. ...

  8. IT阅读——关于“业务”

    本文转自http://www.cnblogs.com/beijiguangyong/archive/2012/11/12/2767054.html 开发当中常常听说“业务”这个词,什么“业务为王”之类 ...

  9. Oracle——存储过程简单入门实例

    1.连接plsql developer,打开一个SQL Window 2.SQL Window中创建表user_info -- Create table create table USER_INFO ...

  10. Redis 主从模式

    系统:Centos6.6x64安装目录:/usr/local/主:192.168.100.103从:192.168.100.104 ,下载安装: 安装依赖: # yum install gcc tcl ...