dTree JS 基本用法

最新推荐文章于 2022-08-24 16:57:57 发布

weixin_34064653

最新推荐文章于 2022-08-24 16:57:57 发布

阅读量212

点赞数

文章标签： javascript ViewUI

原文链接：https://yq.aliyun.com/articles/520544

版权

dTree是一个易于使用的JavaScript树形菜单控件
支持无限分级，可以在同一个页面中放置多个dTree，可以为每个节点指定不同的图标。

使用方式：

引入dtree.css样式
引入dtree.js脚本文件

 
      
           <script type= 
           "text/javascript" 
           > 
          
 
              
           <!-- 
          
 
              
           d =  
           new  
           dTree( 
           'd' 
           ); 
          
 
              
           d.add(0,-1, 
           'My example tree' 
           ); 
          
 
              
           d.add(1,0, 
           'Node 1' 
           , 
           'example01.html' 
           ); 
          
 
              
           d.add(2,0, 
           'Node 2' 
           , 
           'example01.html' 
           ); 
          
 
              
           d.add(3,1, 
           'Node 1.1' 
           , 
           'example01.html' 
           ); 
          
 
              
           d.add(4,0, 
           'Node 3' 
           , 
           'example01.html' 
           ); 
          
 
              
           d.add(5,3, 
           'Node 1.1.1' 
           , 
           'example01.html' 
           ); 
          
 
              
           d.add(6,5, 
           'Node 1.1.1.1' 
           , 
           'example01.html' 
           ); 
          
 
              
           d.add(7,0, 
           'Node 4' 
           , 
           'example01.html' 
           ); 
          
 
              
           d.add(8,1, 
           'Node 1.2' 
           , 
           'example01.html' 
           ); 
          
 
              
           d.add(9,0, 
           'My Pictures' 
           , 
           'example01.html' 
           , 
           'Pictures I\'ve taken over the years' 
           , 
           '' 
           , 
           '' 
           , 
           'img/imgfolder.gif' 
           ); 
          
 
              
           d.add(10,9, 
           'The trip to Iceland' 
           , 
           'example01.html' 
           , 
           'Pictures of Gullfoss and Geysir' 
           ); 
          
 
              
           d.add(11,9, 
           'Mom\'s birthday' 
           , 
           'example01.html' 
           ); 
          
 
              
           d.add(12,0, 
           'Recycle Bin' 
           , 
           'example01.html' 
           , 
           '' 
           , 
           '' 
           , 
           'img/trash.gif' 
           ); 
          
 
              
           document.write(d); 
          
 
              
           //--> 
          
 
              
           </script> 
          
 
    

参数介绍：

名字	类型	描述
id	Number	唯一的ID号
pid	Number	判定父节点的数字,根节点的值为 -1
name	String	节点的文本标签
url	String	节点的Url
title	String	节点的Title
target	String	节点的target
icon	String	用做节点的图标,节点没有指定图标时使用默认值
iconOpen	String	用做节点打开的图标,节点没有指定图标时使用默认值
open	Boolean	判断节点是否打开