强大的Js树型控件Dtree使用详解
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使用详解的更多相关文章
- Js树型控件Dtree使用
dtree地址:http://destroydrop.com/javascripts/tree/ Key features Unlimited number of levels 无限级 Can be ...
- VC中实现带有背景位图的树型控件
当前许多应用程序都在使用树型控件时为其添加了背景位图,增强的控件的魅力,然而对于Visual C++编程爱好者来说,使用Visual C++MFC提供的树型控件(CTreeCtrl)本身就是一个难点, ...
- 《手把手教你》系列技巧篇(三十八)-java+ selenium自动化测试-日历时间控件-下篇(详解教程)
1.简介 理想很丰满现实很骨感,在应用selenium实现web自动化时,经常会遇到处理日期控件点击问题,手工很简单,可以一个个点击日期控件选择需要的日期,但自动化执行过程中,完全复制手工这样的操作就 ...
- javascript遍历控件(实例详解)
js遍历页面控件, 代码如下 复制代码 var inputArr = document.forms[0]; for( var i = 0; i < inputArr.length; i++ ...
- delphi控件属性大全-详解-简介
http://blog.csdn.net/u011096030/article/details/18716713 button 组件: CAPTION 属性 :用于在按钮上显示文本内容 Cancel ...
- AnyCAD三维控件场景节点详解
SceneNode是AnyCAD三维图形平台的AnyViz显示引擎的核心对象之一,只有放在场景管理器(SceneManager)里的节点才能被显示引擎所显示. 1. 节点分类 SceneNode是 ...
- iOS:选择器控件UIPickerView的详解和演示
选择器控件UIPickerView: 功能:它能够创建一个类似于密码锁式的单列或多列的选择菜单,用户可以通过它设置的代理来选择需要菜单中的任意的数据.例如创建日历.字体表(类型.大小.颜色).图库等. ...
- 【VB技巧】VB ListView 控件功能使用详解
来源:http://lcx.cc/?i=494 ListView控件 在工具箱上击鼠标右键,选择快捷菜单的Components(部件)项,在控件列表中选择Microsoft Windows Commo ...
- Webbrowser控件execcommand参数详解
2D-Position 允许通过拖曳移动绝对定位的对象.AbsolutePosition 设定元素的 position 属性为“absolute”(绝对).BackColor 设置或获取当前选中区的背 ...
随机推荐
- H5新特性总结
Web前端最新的官方标准无疑就是es6和H5了,es6之前已经说过了(多是一些语法糖),现在来总结一下H5给我们来了哪些新“朋友”吧~ 1.video/radio 视频/音频 2.canvas 绘画 ...
- 20190311 Windows安装ZooKeeper
1. 说明 记录过程中踩过的坑 1.1. 环境 本机环境:Win10 ZooKeeper版本:3.4.6 2. 安装 2.1. 下载 官网下载网址 2.2. 修改配置文件 复制conf目录下的zoo_ ...
- passat / maintenance / baoyang
s s 南京迎客隆汽车租赁有限公司 / 地址:常府街54号 / 电话:025-84546836 84507610 二手车养不起.修不起?果真如此吗?http://www.che168.com/list ...
- Weblogic常见故障常:JDBC Connection Pools【转】
WebLogic Server中数据库连接池是一个经常出问题的地方,总结一下出问题的原因和解决办法. 一.数据库连接泄漏 此类问题一般都是由于开发人员没有正确关闭数据库连接造成的.比如使用完Conne ...
- 第一节:从程序集的角度分析System.Web.Caching.Cache ,并完成基本封装。
一. 揭开迷雾 1. 程序集准备 a. 需要给项目添加 System.Web 程序集. b. 需要给使用的地方添加两个引用. 2. 程序集探究 在对应的类中输入关键字 Cache,选中点 ...
- luogu P3760 [TJOI2017]异或和
传送门 对于每个二进制位考虑有多少区间和这一位上为1 从前往后扫每个前缀和,如果当前这个前缀和某一个二进制位上为1,因为区间和由这个前缀和减去前面的前缀和得来,如果减去了这一位为0的前缀和,那么 减去 ...
- greenplum不能下载问题解决方法(转)
到官网下载greenplum安装包的时候,可能会发现不能下载,提示: 出现这个问题的原因有几个方面: 最常见的原因是注册账号是填写了虚假或者无意义的信息,譬如名字是 123,地址是 abc. Pivo ...
- Oracle-数据泵使用
一.为何选择数据泵方式 相对于exp/imp方式,数据泵(expdp/impdp)更快,且能导出空表:相对于rman.dg等方式,数据泵操作更加简单.此外,在数据量不大.可停库的情况下,数据泵方式是可 ...
- Pyqt5自定义浏览器
from PyQt5.QtWebChannel import QWebChannel from PyQt5.QtWebEngineWidgets import QWebEngineView from ...
- 利用 python requests完成接口文件上传
最近在准备一个公开课,主题就是利用不同的语言和不同的工具去实现文件的上传和下载. 在利用Jmeter去实现功能的时候,以及利用loadrunner去写脚本的时候,都很顺利,没有任何问题,当我尝试用Py ...