/// <summary>
/// 页面加载
/// </summary>
/// <param name="sender"></param>
/// <param name="e"></param> 
protected void Page_Load(object sender, EventArgs e)
{
//加载页面时，动态读取国家列表到DropList 
CreateTree();
} 
///  <summary>
/
//  绑定生成一个有树结构的下拉菜单
///  </summary>
///  <param  name="dtNodeSets">菜单记录数据所在的表</param>
///  <param  name="strParentColumn">表中用于标记父记录的字段</param>
///  <param  name="strRootValue">第一层记录的父记录值(通常设计为0或者-1或者Null)用来表示没有父记录</param>
///  <param  name="strIndexColumn">索引字段，也就是放在DropDownList的Value里面的字段</param>
///  <param  name="strTextColumn">显示文本字段，也就是放在DropDownList的Text里面的字段</param>
///  <param  name="drpBind">需要绑定的DropDownList</param>
///  <param  name="i">用来控制缩入量的值，请输入-1</param>     
private void MakeTree(DataTable dtNodeSets, string strParentColumn, string strRootValue, string strIndexColumn, string strTextColumn, DropDownList drpBind, int i)
{
//每向下一层，多一个缩入单位     
i++; 
DataView dvNodeSets = new DataView(dtNodeSets);
dvNodeSets.RowFilter = strParentColumn + "=" + strRootValue; 
nodeselectorstring strPading = "";    //缩入字符   
//通过i来控制缩入字符的长度，我这里设定的是一个全角的空格     
for (int j = 0; j < i; j++)
strPading += "　";//如果要增加缩入的长度，改成两个全角的空格就可以了   
foreach (DataRowView drv in dvNodeSets)
{
TreeNode tnNode = new TreeNode();
ListItem li = new ListItem(strPading + "├" + drv[strTextColumn].ToString(), drv[strIndexColumn].ToString());
drpBind.Items.Add(li);
MakeTree(dtNodeSets, strParentColumn, drv[strIndexColumn].ToString(), strIndexColumn, strTextColumn, drpBind, i);
} 
//递归结束，要回到上一层，所以缩入量减少一个单位     
i--;
} 
/// <summary>
/// SQL语句查询，再绑定到DropList里面
/// </summary> 
private void CreateTree()
{
//查询ZoneList 
string sql = "SELECT *FROM Zone";
DataTable dt= DataAccess.GetDataSet(sql); 
MakeTree(dt, "parentid", "0", "zone_id", "zonename_en", zone_id, -1);
}
------------------------------------------------------------------------------------------------------------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="/1999/xhtml">
<head>
<title>六七句-网页特效-导航菜单-下拉框中显示的多级树形菜单</title>
<meta http-equiv="content-type" content="text/html;charset=gb2312">
<!--把下面代码加到<head>与</head>之间-->
<script type="t
ext/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;
}
ateTree = 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++){
}
}
}
}
ateSubOption = function(len,current,next){
var blank = "..";
if ( next.pid == current.id){
intLevel =0;
var intlvl =Level(this._data,this._rootId,current);
for(a=0;a<intlvl;a++)
blank += "..";
blank += "├-";
this._item.options.add(new Option(blank + ,next.id));
for(var j=0;j<len;j++){
}
}
}
Level = 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 ++;
}
}
}
return intLevel;
}
</script>
</head>
<body>
<!--把下面代码加到<body>与</body>之间-->
<select id="myselect"></select>
<script language=javascript type="text/javascript">
var ts = new ElementById("myselect"),data,-1);
</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.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" ></div>', //html代码
selectedClass:'',
ptyFn,
emptyText:'请选择...',
renderTo: 'comboxtree'
});
/
/创建树形结构
var tree = TreePanel({
border:false,
autoScroll:true,
animate:true,
autoWidth:true,
autoHeight:true,
enableDD:true,
containerScroll: true,
loader: TreeLoader({
dataUrl:'treedata.php'         
})
});
//树的点击时间
<("click",function(node,e)
{     
if(node.isLeaf()){
e.stopEvent();//非叶子节点则不触发
}
comboWithTooltip.);//设置option值
Value());//打印option值
});
var root = AsyncTreeNode({
text: '根节点',                  //节点名称
draggable:false,                  //是否支持拖动
id:'0101103'                      //节点id
});
tree.setRootNode(root);
//展开option时生成树
<('expand',function(){
//pandAll();//自动展开树
});
});
</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');"
>
<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>
----------------------------------------------------------------------------------------------------------------
实现树形下拉框（ASP.Net 1.1,IE Web Control） 默认分类 2008-09-22 11:55:01 阅读105 评论0  字号：大中小 订阅 .
有时候，我们需要一个树形的下拉框，比如选择一个多层的分类，或部门体系，下面我参
考了一些资料做了一个树形下拉框。
一：下拉框样式：
<style type="text/css">
#divOption{border-top:0px;border-right: black 1px solid;border-bottom: black 1px solid;border-left: black 1px solid;position:absolute;visibility: hidden;}
#divOption div{padding-left:8px;cursor:default;font-family:Tahoma;}
.arrow {boder:buttonhighlight 1px;cursor: default;}
</style>
二：选择框：
<table cellpadding="0" cellspacing="0" border="0" id="tbSelect">
<tr >
<td id="divValue" width="150px"></td>
<td class="arrow" id="divArrow"><img src="../Common/Images/SelectTree.png" border="0" /></td>
</tr>
</table>
三：树形选择项：
<div id="divOption">
<iewc:TreeView id="tvControlClass" runat="server" SelectExpands="True">
<iewc:TreeNode NodeData="0,0,000" Text="用户自定义分类"></iewc:TreeNode>
</iewc:TreeView>
</div>
四：用于实现下拉框显示效果的javascript
<script type="text/javascript">
var ElementById("tbSelect");
var ElementById ("divOption");
var ElementById ("divArrow");
var TreeNode(tvControlClass.selectedNodeIndex);
with(divOption.style) {
var xy = getSelectPosition(tbSelect);
pixelLeft = xy[0];
pixelTop = xy[1]+tbSelect.offsetHeight;
width = tbSelect.offsetWidth;
}
divValue.Attribute("Text");
this.setCapture();
}
}
event.cancelBubble = true;
divOption.style.visibility = divOption.style.visibility=="visible"?"hidden":"visible";
}
event.cancelBubble = true;
var TreeNode(tvControlClass.selectedNodeIndex);
divValue.Attribute("Text");
}
event.cancelBubble = true;
divOption.style.visibility = divOption.style.visibility=="visible"?"hidden":"visible";
}
function getSelectPosition(obj) {
var objLeft = obj.offsetLeft;
var objTop = obj.offsetTop;
var objParent = obj.offsetParent;
while (objParent.tagName != "BODY") {
objLeft += ob
jParent.offsetLeft;
objTop += objParent.offsetTop;
objParent = objParent.offsetParent;
}
return([objLeft,objTop]);
}
实现效果：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。