前端控件之树型结构dTree.js使用

dTree.js和dTree.css下载地址：http://www.destroydrop.com/javascripts/tree/

对于小型的树型应用来说，dtree是一个不错的选择。

• 先看一眼dtree给的例子

• 构造静态树

首先引入css文件和js文件

1 2	<link rel= "StyleSheet"  href= "dtree.css"  type= "text/css"  />      <script type= "text/javascript"  src= "dtree.js" ></script>

  构造静态树其实很简单

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57

<div class = "cnblogs_Highlighter" ><pre class = "brush:javascript" ><script>                 /*                        tree.add(id,pid,name,url,title,target,icon,iconOpen,open);                      id        ：节点自身的id                      pid       ：节点的父节点的id                      name      ：节点显示在页面上的名称                      url       ：节点的链接地址                      title     ：鼠标放在节点上所出现的提示信息                      target    ：节点链接所打开的目标frame（如框架目标mainFrame或是_blank,_self之类）                      icon      ：节点关闭时的显示图片的路径                      iconOpen  ：节点打开时的显示图片的路径                      open      ：布尔型，节点是否打开（默认为false）                      ------------------------------------------------                      东城区、西城区、崇文区、宣武区、朝阳区、丰台区、石景山区、                      海淀区、门头沟区、房山区、通州区、顺义区、 昌平区、                     大兴区、怀柔区、平谷区 、 密云县、延庆县                     ------------------------------------------------                  */          </script>                  <script type= "text/javascript" >                   tree = new  dTree( 'tree' ); //创建一个对象.                   tree.add( "1" , "-1" , "中国" , "" , "" , "" , "" , "" , false );                   tree.add( "11" , "1" , "北京" , "" , "" , "" , "" , "" , false );                   tree.add( "110" , "11" , "东城区" , "连接地址可以从数据库里面动态查询出来.." , "东城区" , "打开目标位置" );                   tree.add( "111" , "11" , "西城区" , "连接地址可以从数据库里面动态查询出来.." , "" , "链接在哪里显示" );                   tree.add( "112" , "11" , "崇文区" , "连接地址可以从数据库里面动态查询出来.." , "" , "mainFrame" );                   tree.add( "113" , "11" , "宣武区" , "" , "" , "_blank" );                   tree.add( "114" , "11" , "朝阳区" , "/.jsp" , "" , "mainFrame" );                   tree.add( "115" , "11" , "丰台区" , "/.jsp" , "" , "mainFrame" );                   tree.add( "116" , "11" , "石景山区" , "/.jsp" , "" , "mainFrame" );                   tree.add( "117" , "11" , "海淀区" , "/.jsp" , "" , "mainFra