<!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>