• 1. 最强大的树型JS代码DTREE详解 讲解:何涛
  • 2. 简介学会看官方网站 http://destroydrop.com/javascripts/tree 从官方页面你就能知道: Dtree是什么、它的特性、它的源代码、它的帮助文档以及它的版本历史等等Dtre帮助文档
  • 3. 常用方法add(parameters) 添加节点信息 IndexNameTypeDiscription1idNumber当前节点的ID2preIdNumber当前节点的父节点ID,根节点的值为 -1 3nameString当前节点要显示的文字 4urlString点击当前节点跳转到的URL5titleString鼠标移至该节点时节点显示的标题提示6targetString节点链接所打开的目标frame7iconString节点显示的图标,无设置则使用默认图标8iconOpenString打开该节点后显示的图标,无设置则使用默认图标9openBoolean指定当前节点是否打开【例】mytree.add(1, 0, 'My node', 'node.html', 'node title', 'mainframe', 'img/musicfolder.gif'); 【注】dtree.js文件中约87-113行是一些默认图片的路径,可以自己配置图片
  • 4. 常用方法openAll() 打开所有节点  可在树被创建以前或以后调用 【例】mytree.openAll(); closeAll()   关闭所有节点   可在树被创建以前或以后调用 【例】mytree.closeAll(); oAll(bool) 打开或关闭所有节点 参数为true则打开所有节点,false则关闭所有节点 isOpen(id) 指定节点是否处于打开状态 如果处于打开状态则返回true,反之false
  • 5. 常用方法openTo(parameters) 打开指定节点 可在树被创建以前或以后调用 o(index) 打开/关闭指定节点 如果节点处于关闭状态则打开,反之则关闭 openTo()方法体内调用的就是o()方法 IndexNameTypeDescription1idNumber需要打开的节点的ID号2selectBoolean判断节点是否被选择【例】 mytree.openTo(4, true);   
  • 6. OPENTO(ID)和O(ID)比较方法名相同点缺点优势openTo(id)都是打开某个节点isOpen方法不能判断该节点是否打开子节点打开的话,父节点也会相应打开O(index)除根节点外,其余id必须从1开始而且不能空缺,反正少用1)能实现打开/关闭操作 2)ipOpen方法能判断该节点是否打开分别用两种方法打开’MacBookPro系列’节点openTo()直接打开o()表面看起来没反应,只有点开“苹果”节点才能看到用o(id)方法打开/关闭某节点两个方法判断该节点是否打开
  • 7. 配置 CONFIG变量类型默认值描述targetString  true所有节点的target folderLinksBoolean  true文件夹可链接useSelectionBoolean  true节点可被选择(高亮)  useCookiesBoolean  true树可以使用cookies记住状态  useLinesBoolean  true创建带线的树useIconsBoolean true创建带有图标的树useStatusTextBoolean  false用节点名替代显示在状态栏的节点urlcloseSameLevelBoolean false只有一个有父级的节点可以被展开,当这个函数可用时openAll() 和 closeAll() 函数将不可用inOrderBoolean false如果父级节点总是添加在子级节点之前,使用这个参数可以加速菜单显示【例子】mytree.config.target = "mytarget";配置干嘛用的? 其实配置就是在树初始化时对某些效果进行一些必要的设置,比如config.useIcons=false 意思就是所有节点不显示图片了;
  • 8. 了解配置和常用方法最快的方式http://destroydrop.com/javascripts/tree/example/配置是可选的,点击按钮就能动态生成左边的数据,对照着代码和显示效果就知道各个config的作用了,这里就不赘述了
  • 9. 页面中的书写规范参数可以不写完,有默认值(从左至右,依次省略) 例tree.add(id,pid,name,url);后面5个参数就可以省略 有间隔时的默认值(如存在第6个参数,但第5个参数想用默认值) 即tree.add(id,pid,name,url,"",target);必须这样写 其它tree.add(id,pid,name,url,"","","","",true); 特殊:如果需要显示title(参数5)必须设定相应链接地址(参数4) tree.add(2,0,‘照明控制系统’,‘a.jsp’,‘这是第四个参数title’); //如果第四个参数为空则无法显示
  • 10. CSS样式注:这里只是为了容易理解,在样式表中是不能这样注释, 而且尽量避免中文注释1)可以将dtree.css中的样式附加到你的应用中的主css中,如a.css 2)也可以同时引用dtree.css与a.css两个文件,但前提条件是两个css文件中不能有重复的样式
  • 11. 基础实例首先从官网下载或者相互拷贝dtree.zip文件 然后解压文件,将里面的文件(帮助文档api.html可以不用拷贝)复制到项目根目录下。 点击下载Copy
  • 12. 基础实例Example01.html是用于显示dtree的文件,可以将其中的代码复制到jsp页面,通过jsp页面显示。创建树对象Add方法用于添加节点信息openAll方法用于打开所有节点closeAll方法用于关闭所有节点该方法用于将树显示到页面上注意代码要放在body中显示确定引入了css和js文件
  • 13. 基础实例最后运行服务器,打开指定页面查看效果openAllcloseAll
  • 14. 自己动手同样引入css和js两个文件,只是body部分的代码重写一下openAll根节点,父节点为-1Add(节点id,父节点id,节点名)一级子节点,父节点为根节点二级子节点,父节点为一级节点三级子节点,父节点为二级节点这些树都是静态生成的,稍后讲解动态生成的方法每一个add()就代表一个节点
  • 15. 自己动手熟悉dtree的各种方法打开或关闭所有节点打开指定节点打开/关闭指定节点判定节点是否处于打开状态页面显示
  • 16. 自己动手前面学习了静态生成树,动态生成树无非就是做一个循环add操作 List dtoList=(List)request.getAttribute("dtoList"); 迭代数据集合循环添加节点
  • 17. 高手进阶 -你要知道的JS对象是一种复合类型,它允许你通过变量名存储和访问,换一种思路,对象是一个无序的属性集合,集合中的每一项都由名称和值组成(听起来是不是很像我们常听说的HASH表、字典、健/值对?),而其中的值类型可能是内置类型(如number,string),也可能是对象。用来返回对象类型原型的引用 我们使用prototype属性提供对象的类的一组基本功能。并且对象的新实例会"继承"赋予该对象原型的操作。 JS创建类对象Js的prototype(原型)是什么创建类和对象的文章Js的原型文章扩展:prototype.js
  • 18. 高手进阶 -理解DTREE.JS创建对象扩展对象方法This就是当前类看做一个方法看做一个属性方法这里的prototype就是让dtree附加一个openAll方法,所以openAll即使写在dTree类外,也是它的一个成员
  • 19. 高手进阶 -了解一些DTRR.JS内的属性Node类: this._io = open || false; //is open? this._is = false; //is selected? this._ls = false; //last sibling? this._hc = false; //has child? dTree类: this.obj = objName; //对象别名,new dtree时可用 this.aNodes = []; //节点数组,每个下标存一个节点
  • 20. 高手进阶 -一些可能使用的方法closeLevel(node) 关闭当前node节点同级的节点 假设与a节点同级的有b和c节点,而且a、b、c节点都打开了子节点,此时调用closeLevel(a),b、c节点会收拢起来,但a节点不会收拢。 例:closeLevel(tree.aNodes[1]) –假设下标1是a getSelected() 返回你选择的节点的信息 返回的是一个node对象 例:getSelected().id 就能返回选择的节点的id setCS(node) 查看节点是否有子节点或者是最后一个节点 方法体内存有’_hc’表示是否有子节点, 而’_ls’表示最后的叶子节点
  • 21. 小心误区特别注意:aNodes[1]和o(1)等这里的下标绝对不是指add(id,pid..)里的节点id,而是根据整个树形结构按层次递加分配的。这里的id不是依次递增O(2)以后鼠标移动到相应交叉点,看浏览器左下方的js就能看出端倪
  • 22. 提高练习实现如右图的结构 写一个静态的树型结构,*.html即可实现 能够打开全部、关闭全部 的节点 能够(点击openTo链接)打开IE或火狐节点 设置config打开一个节点,同级其他节点关闭 三种浏览器的图标在“作业素材”中 点击节点跳转到另一JSP页面 鼠标移到节点上能够显示提示信息 初次加载到页面时默认打开IE节点 点击节点跳转到另一JSP页面