sclsch

java备忘

BlogJava 首页 新随笔 联系 聚合 管理
  10 Posts :: 0 Stories :: 6 Comments :: 0 Trackbacks
    最近要做一个树型下拉框,参考网上的资料,也没有找到合适的,于是自己实现了一个,原理是先顺序加载根节点,在加载每个根节点后,再遍历每个数组,看有没有以这个根节点为父 节点的数组,如果有,就加载到下拉框,然后再递归看有没有以这个节点为父结点的数组,如果有,再加载到下拉框,以此类推...
代码如下:(如果有更好的方法,请留言,有待改进)
   
 1 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
 2   <html xmlns="http://www.w3.org/1999/xhtml">
 3    <head>
 4     <title> javascript树型菜单 author:sclsch@188.com</title>
 5     <meta name="generator" content="editplus" />
 6     <meta name="author" content="" />
 7     <meta name="keywords" content="" />
 8     <meta name="description" content="" />
 9     <script type="text/javascript">
10       var data =new Array();
11      
12       data[0]= {id:'0',pid:'1',text:'河北'};
13       data[1]= {id:'1',pid:'-1',text:'中国'};
14       data[2]= {id:'2',pid:'6',text:'莫斯科'};
15       data[3]= {id:'3',pid:'0',text:'邯郸'};
16       data[4]= {id:'4',pid:'0',text:'石家庄'};
17       data[5]= {id:'5',pid:'3',text:'邯郸县'};
18       data[6]= {id:'6',pid:'-1',text:'俄罗斯'};
19       data[7]= {id:'7',pid:'5',text:'孙程亮 sclsch@188.com'};
20 
21      function TreeSelector(item,data,rootId){
22         this._data = data;
23         this._item = item;
24         this._rootId = rootId;
25 
26      }
27      TreeSelector.prototype.createTree = function(){
28          var  len =this._data.length;
29          forvar i= 0;i<len;i++){
30            if ( this._data[i].pid == this._rootId){
31               this._item.options.add(new Option(".."+this._data[i].text,this._data[i].id));
32                   for(var j=0;j<len;j++){
33                     this.createSubOption(len,this._data[i],this._data[j]);
34                   
35                   }  
36            }
37         }
38      }
39       
40      TreeSelector.prototype.createSubOption = function(len,current,next){
41             var blank = "..";
42             if ( next.pid == current.id){
43                  intLevel =0;
44                  var intlvl =this.getLevel(this._data,this._rootId,current);
45                  for(a=0;a<intlvl;a++)
46                     blank += "..";
47                  blank += "├-";
48                  this._item.options.add(new Option(blank + next.text,next.id));
49                   
50                  for(var j=0;j<len;j++){
51                    this.createSubOption(len,next,this._data[j]);
52                  
53                  }   
54                  
55             }
56      }
57 
58      TreeSelector.prototype.getLevel = function(datasources,topId,currentitem){
59          
60          var pid =currentitem.pid;
61          if( pid !=topId)
62          {
63            for(var i =0 ;i<datasources.length;i++)
64            {
65               if( datasources[i].id == pid)
66               {
67                  intLevel ++;
68                  this.getLevel(datasources,topId,datasources[i]);
69               }
70            }  
71          }
72          return intLevel;
73     }
74 
75     </script>
76    </head>
77 
78    <body>
79     <select id="myselect">
80   </select>
81   <script language=javascript type="text/javascript">
82     var ts = new TreeSelector(document.getElementById("myselect"),data,-1);
83     ts.createTree();
84   </script>
85    </body>
86   </html>

posted on 2008-09-28 11:20 sclsch 阅读(2326) 评论(0)  编辑  收藏

只有注册用户登录后才能发表评论。


网站导航: