Easy Net

导航

 

         有时候,我们需要一个树形的下拉框,比如选择一个多层的分类,或部门体系,下面我参考了一些资料做了一个树形下拉框。

         一:下拉框样式:
                  <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]);
   }

   实现效果:
      

posted on 2007-04-26 16:21  Terry Liang  阅读(3311)  评论(4)    收藏  举报