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. 我们一起来详细的了解react的语法以及组件的使用方法

    jsx的介绍 React 使用 JSX 来替代常规的 JavaScript. JSX 是一个看起来很像 XML 的 JavaScript 语法扩展. jsx的优点 JSX 执行更快,因为它在编译为 J ...

  2. 常用linux命令(项目部署)

    centos 图形 命令行 界面切换 如果在图形界面下,按:Ctrl+Alt+F2进入如下命令行界面 -------------- 看当前目录的路径: pwd ................... ...

  3. Hadoop+HBase+Spark+Hive环境搭建

    杨赟快跑 简书作者 2018-09-24 10:24 打开App 摘要:大数据门槛较高,仅仅环境的搭建可能就要耗费我们大量的精力,本文总结了作者是如何搭建大数据环境的(单机版和集群版),希望能帮助学弟 ...

  4. [持续更新] 文章列表 Last Update: 8/21/2017

    1.前端 HTML5快速学习二 Canvas@20141125 HTML5快速学习一@20141122 2.ASP.NET(MVC) MVC5+EF6 完整教程17--升级到EFCore2.0@201 ...

  5. mysql数据库中case when 的用法

    场景1:比如说我们在数据库存了性别的字段,一般都是存0 和 1 代表男和女   然后我们会得到0和1之后在java中判断 ,很麻烦有么有?其实我们完全可以在sql中判断好之后拿来现成的.就是在sql中 ...

  6. CodeForces - 615D Multipliers(数论)

    http://codeforces.com/problemset/problem/615/D 题意 给出m个质因子,组成一个数n.问n的约数的乘积是多少,输出mod 1e+7的结果. 分析 从输入我们 ...

  7. Linux下SVN使用

    转载:参考文章http://www.linuxidc.com/Linux/2011-09/42347.htm 1. 将文件checkout到本地目录     svn checkout path(pat ...

  8. SQL——sql年龄段查询

    select * from 表 p where p.gender <> '男' ) ) select * ) ) 查询出所有年龄在15~49岁的非男性的信息

  9. Ubuntu16.04安装搜狗拼音输入法(中文输入法)

    虽然网上有很多教程,但是我觉得我的很适合那些真正的小白... 1.下载文件 由于我要给多台电脑安装搜狗输入法,所以用的是文件夹安装,不是命令行安装. 打开官网http://pinyin.sogou.c ...

  10. [HEOI2015]定价 (贪心)

    分类讨论大法好! \(solution:\) 先说一下我对这个题目的态度: 首先这一题是贪心,这个十分明显,看了一眼其他题解都是十分优秀的贪心,可是大家都没有想过吗:你们贪心都是在区间\([l,r]\ ...