有时候,我们需要一个树形的下拉框,比如选择一个多层的分类,或部门体系,下面我参考了一些资料做了一个树形下拉框。
一:下拉框样式:
<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 tbSelect=document.getElementById("tbSelect");
var divOption=document.getElementById ("divOption");
var divArrow=document.getElementById ("divArrow");
var selectedNode=tvControlClass.getTreeNode(tvControlClass.selectedNodeIndex);
with(divOption.style) {
var xy = getSelectPosition(tbSelect);
pixelLeft = xy[0];
pixelTop = xy[1]+tbSelect.offsetHeight;
width = tbSelect.offsetWidth;
}
divValue.innerText=selectedNode.getAttribute("Text");
tbSelect.onselectstart = function() {return false;}
divOption.onselectstart = function() {return false;}
divArrow.onmousedown = function() {
this.setCapture();
}
divArrow.onmouseup = function() {
this.releaseCapture();
}
divArrow.onclick = function() {
event.cancelBubble = true;
divOption.style.visibility = divOption.style.visibility=="visible"?"hidden":"visible";
}
tvControlClass.onselectedindexchange=function(){
event.cancelBubble = true;
var selectedNode=tvControlClass.getTreeNode(tvControlClass.selectedNodeIndex);
divValue.innerText=selectedNode.getAttribute("Text");
}
divValue.onclick = function() {
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 += objParent.offsetLeft;
objTop += objParent.offsetTop;
objParent = objParent.offsetParent;
}
return([objLeft,objTop]);
}
实现效果:
浙公网安备 33010602011771号