运用dtree制作的树形下拉列表框

在网上找个树形下拉列表框实在是难，看看dtree觉得其实我们自己是可以做出来的，也花不了多少精力！

下图为我做的下拉列表框：

 

步骤：

1.下载dTree相关文件（dTree.js,dTree.css,images）

2.导入dtee.js及css文件

 <link rel="StyleSheet" href="theme/css/dtree.css" type="text/css" />s

 <script type="text/javascript" src="theme/js/dtree.js"></script>（路径按照自己路径为准）

3.编写下拉框div及js：

jsp div代码

<input type="hidden" id="addressFatherId" name="addressFatherId" value="0" /> <input type="text" name="" class="FormStyle2" onClick='showTree(this,"addressFatherId")' readonly="readonly" /> <div id="combdtree" class="dtreecob"> <div class="dtree" style="overflow: auto; width: 100%;"><mce:script type="text/javascript"><!-- d = new dTree('d', './theme/images/'); d.add(0, -1, '选择对应行政单位'); DWREngine.setAsync(false); //这里采用dwr异步请求方式 IAddressBusiness.findAllAddress(function(data) { for ( var i = 0; i < data.length; i++) { d.add(data[i].addressId, data[i].addressFatherId, data[i].addressName, 'javascript:setSrcValue(/'' + data[i].addressName + '/',/'' + data[i].addressId + '/')'); } }); document.write(d); DWREngine.setAsync(true); // --></mce:script></div> <div class="dBottom"><a href="javascript:hiddenDTree();" mce_href="javascript:hiddenDTree();">关闭</a></div> </div>

 

相应的js

var srcElement = null; var valueElement = null; function showTree(item,valueId){ srcElement = window.event.srcElement; valueElement = document.getElementById(valueId); var x = getLeft(item); var y = getTop(item) + item.offsetHeight; var w = item.offsetWidth; blockDTree(x,y,w); } function getTop(e){ var offset=e.offsetTop; if(e.offsetParent!=null) offset+=getTop(e.offsetParent); return offset; } function getLeft(e){ var offset=e.offsetLeft; if(e.offsetParent!=null) offset+=getLeft(e.offsetParent); return offset; } function blockDTree(x,y,w){ var item = document.getElementById("combdtree"); item.style.display = 'block'; item.style.top = y; item.style.left = x; } function hiddenDTree(){ var item = document.getElementById("combdtree"); if(item){ item.style.display = 'none'; } } function setSrcValue(text,value){ srcElement.value = text; valueElement.value = value; hiddenDTree(); }

 

ok 看看是不是很简单啊！

注：上面div的样式文件

 .dtreecob { font-family: Verdana, Geneva, Arial, Helvetica, sans-serif; font-size: 11px; color: #666; white-space: nowrap; display:none; border:1px solid #5CACEE; position: absolute; z-index: 9999; background-color:white; width:200px; } .dBottom{ background-color:#F0F0F0; margin-bottom:0px; text-align:right; height:23px; line-height:23px; } .dBottom a{ margin-right:5px; color:black; text-decoration: none; }