语源科技BlogJava-思想有多远，就能走多远http://www.blogjava.net/wormdata/一同进步，一同成长zh-cnThu, 07 May 2026 04:42:10 GMTThu, 07 May 2026 04:42:10 GMT60下拉框显示树形菜单http://www.blogjava.net/wormdata/archive/2009/12/22/306878.html啊杰啊杰Tue, 22 Dec 2009 02:36:00 GMThttp://www.blogjava.net/wormdata/archive/2009/12/22/306878.htmlhttp://www.blogjava.net/wormdata/comments/306878.htmlhttp://www.blogjava.net/wormdata/archive/2009/12/22/306878.html#Feedback0http://www.blogjava.net/wormdata/comments/commentRss/306878.htmlhttp://www.blogjava.net/wormdata/services/trackbacks/306878.html<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>六七句-网页特效-导航菜单-下拉框中显示的多级树形菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<script type="text/javascript">
var data =new Array();
data[0]= {id:'0',pid:'1',text:'河北'};
data[1]= {id:'1',pid:'-1',text:'中国'};
data[2]= {id:'2',pid:'6',text:'莫斯科'};
data[3]= {id:'3',pid:'0',text:'邯郸'};
data[4]= {id:'4',pid:'0',text:'石家庄'};
data[5]= {id:'5',pid:'3',text:'邯郸县'};
data[6]= {id:'6',pid:'-1',text:'俄罗斯'};
function TreeSelector(item,data,rootId){
this._data = data;
this._item = item;
this._rootId = rootId;
}
TreeSelector.prototype.createTree = function(){
var len =this._data.length;
for( var i= 0;i<len;i++){
if ( this._data[i].pid == this._rootId){
this._item.options.add(new Option(".."+this._data[i].text,this._data[i].id));
for(var j=0;j<len;j++){
this.createSubOption(len,this._data[i],this._data[j]);
}
}
}
}
TreeSelector.prototype.createSubOption = function(len,current,next){
var blank = "..";
if ( next.pid == current.id){
intLevel =0;
var intlvl =this.getLevel(this._data,this._rootId,current);
for(a=0;a<intlvl;a++)
blank += "..";
blank += "├-";
this._item.options.add(new Option(blank + next.text,next.id));
for(var j=0;j<len;j++){
this.createSubOption(len,next,this._data[j]);
}
}
}
TreeSelector.prototype.getLevel = function(datasources,topId,currentitem){
var pid =currentitem.pid;
if( pid !=topId)
{
for(var i =0 ;i<datasources.length;i++)
{
if( datasources[i].id == pid)
{
intLevel ++;
this.getLevel(datasources,topId,datasources[i]);
}
}
}
return intLevel;
}
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<select id="myselect"></select>
<script language=javascript type="text/javascript">
var ts = new TreeSelector(document.getElementById("myselect"),data,-1);
ts.createTree();
</script>
</body>
</html>

******************************************************************************
    ***********************************第二种*********************************
******************************************************************************
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
 <head>
  <title> New Document </title>
  <link rel="stylesheet" type="text/css" href="../ext/resources/css/ext-all.css" />
  <script type="text/javascript" src="../ext/adapter/ext/ext-base.js"></script>
  <script type="text/javascript" src="../ext/ext-all.js"></script>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 </head>
 <body>
 <script>
 Ext.onReady(function(){
     Ext.QuickTips.init();
            var comboWithTooltip = new Ext.form.ComboBox({
                store:new Ext.data.SimpleStore({fields:[],data:[[]]}),
                editable:false, //禁止手写及联想功能
                mode: 'local',
                triggerAction:'all',
                maxHeight: 200,
                tpl: '<div id="tree" style="height:200px"></div>', //html代码
                selectedClass:'',
                onSelect:Ext.emptyFn,
                emptyText:'请选择...',
                renderTo: 'comboxtree'
            });
            //创建树形结构
            var tree = new Ext.tree.TreePanel({
                border:false,
                autoScroll:true,
                animate:true,
                autoWidth:true,
                autoHeight:true,
                enableDD:true,
                containerScroll: true,
                loader: new Ext.tree.TreeLoader({
                    dataUrl:'treedata.php'          
                })
            });
           
            //树的点击时间
            tree.on("click",function(node,e)
            {      
                    if(node.isLeaf()){
                         e.stopEvent();//非叶子节点则不触发
                    }
                    comboWithTooltip.setValue(node.text);//设置option值
                    comboWithTooltip.collapse();//隐藏option列表
                    alert(comboWithTooltip.getValue());//打印option值
            });
            var root = new Ext.tree.AsyncTreeNode({
                    text: '根节点',                  //节点名称
                    draggable:false,                  //是否支持拖动
                    id:'0101103'                      //节点id
            });
        
            tree.setRootNode(root);
            //展开option时生成树
            comboWithTooltip.on('expand',function(){
            tree.render('tree');
            //tree.expandAll();//自动展开树
            });
});
  </script>
  <div id="comboxtree"></div>
 </body>
</html>
******************************************************************************
    ***********************************第三种*********************************
******************************************************************************
 <script type="text/javascript" src="<%=path%>/close/js/dtree.js"></script> 
  <div class="dtree">
       <select name="deptl" id="deptl" onchange="ChangeDepart('deptl');"
        style="width:99%;height:100%;">
        <option selected value="-1">
         ==请选择部门==
        </option>
        <script type="text/javascript">
         d = new dTree('d');
         <logic:iterate id="dept" name="deptlist" >
          d.add('${dept.fcompanyid}','-1','${dept.fcompanyname}');
          d.add('${dept.fid}','${dept.fpid}','${dept.fname}','','','','','','','','','','${dept.fmark}');
         </logic:iterate>
         document.write(d);
        </script>
       </select>
      </div>



啊杰 2009-12-22 10:36 发表评论
]]>