求树型下拉框???

<asp:textbox id=sex runat="server" ReadOnly="True"></asp:textbox><BUTTON
      class=btnCss id=[btn]_sex onclick=SetValueCode(this)
type=button></BUTTON><DIV class=Box id=Tree_div><FONT face=宋体>
<iewc:treeview id=TreeView1 onclick=NodeClick() runat="server"></iewc:treeview></FONT></DIV> function documentclick()
{
   var TagName=window.event.srcElement.tagName;

   if (TagName=="BUTTON")
   {
       var GlobalDropId=window.event.srcElement.id;
       var findexof=GlobalDropId.indexOf('[');
       var lindexof=GlobalDropId.indexOf(']_');
       var id= GlobalDropId.substring(lindexof+2,GlobalDropId.length-findexof);
       GlobalId=id;
   }
   var other=false;

   var offsetParent1=window.event.srcElement;
   if (offsetParent1.id=="Tree_div")
       other=true;
   while (offsetParent1.offsetParent)
   {

       offsetParent1=offsetParent1.offsetParent;
       if (offsetParent1.id=="Tree_div")
          other=true;

       if (offsetParent1.id=="Calendar_div")
         other=true;
   }

   if (window.event.srcElement.id!=GlobalDropId && window.event.srcElement.id!=GlobalId && !other)
   {
       if ($x("Tree_div")!=null)
         $x("Tree_div").style.visibility="hidden";
       if ($x("Calendar_div")!=null)
        $x("Calendar_div").style.visibility="hidden";
   }

}
function $x(fobj)
{
  return document.getElementById(fobj);
}
function GetObjAbsolutePostion(fobj)
{
   var obj=document.getElementById(fobj);
   var x=obj.offsetLeft;
   var y=obj.offsetTop;
    while (obj.offsetParent)
    {
     obj=obj.offsetParent;
     x+=obj.offsetLeft;
     y+=obj.offsetTop
    }

    var o=new Object();
    o.left=x;
    o.top=y;
    o.width=document.getElementById(fobj).offsetWidth;
    o.height=document.getElementById(fobj).offsetHeight;
    return o;
}

function SetRelativePosition(fobj,robj)
{

      var obj=GetObjAbsolutePostion(robj);

      var Tree_div=document.getElementById(fobj);
      Tree_div.style.left=obj.left+"px";
      Tree_div.style.top=obj.top+obj.height+"px";

}

function GetId(fobjId)
{

   var findexof=fobjId.indexOf('[');
   var lindexof=fobjId.indexOf(']_');
   var id= fobjId.substring(lindexof+2,fobjId.length-findexof);
   return id;
}

  function onNodeClick(TreeViewNodeText)
{
  var text=TreeViewNodeText;
  var  obj_input;
    if (document.getElementById(GlobalId))
    {
       document.getElementById(GlobalId).value=text;
       document.getElementById("Tree_div").style.visibility="hidden";
    }
} function SetValueCode(fobj)
{
   if ($x("Tree_div")==null)
    return;
   if (GlobalDropId!=fobj.id)
   {
    $x("Tree_div").style.visibility="visible";

    GlobalDropId=fobj.id;

    var id=GetId(fobj.id);
    GlobalId=id;
    //$x(id).focus();
    SetRelativePosition("Tree_div",id);

   }

   else
   {
    if ($x("Tree_div").style.visibility=="hidden")

      $x("Tree_div").style.visibility="visible";
    else
      $x("Tree_div").style.visibility="hidden"
   }


}

做个假的DropDownList控件
用个TextBox加Button模仿下拉菜单，利用JS控制树型菜单的显示及位置！

曾经做过一个，是用AjaxControlToolKit实现的

<%@ Register TagPrefix="iewc" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls" %>
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN" >
<HTML>
  <HEAD>
<title>gl_quanxian</title>
<meta name="GENERATOR" Content="Microsoft Visual Studio .NET 7.1">
<meta name="CODE_LANGUAGE" Content="C#">
<meta name="vs_defaultClientScript" content="JavaScript">
<meta name="vs_targetSchema" content="http://schemas.microsoft.com/intellisense/ie5">
<LINK href="test.css" type="text/css" rel="stylesheet">
<LINK href="Style.css"type=text/css rel=stylesheet>
<script src="treelist.js" type=text/javascript></script>
<script language=javascript>

</script>
</HEAD>
<body MS_POSITIONING="GridLayout">
<div align="center">
<form id="Form1" method="post" runat="server">
<table cellSpacing="0" cellPadding="0" width="450" border="0">
<tr>
<td style="HEIGHT: 45px" vAlign="middle" align="center" colSpan="5"><asp:label id="Label2" runat="server" Font-Size="16px" Width="136px" Height="19px" Font-Bold="True">管理权限</asp:label></td>
<tr height="70">
<td align="left" colspan="2" style="WIDTH: 593px; HEIGHT: 46px"><FONT face="宋体"><asp:label id="Label3" runat="server" Font-Size="15px" >所属类别：</asp:label>
<asp:textbox id=sex runat="server" ReadOnly="True"></asp:textbox><BUTTON
      class=btnCss id=[btn]_sex onclick=SetValueCode(this)
type=button></BUTTON> 
<asp:button id=Button1 runat="server" Width="69px" Font-Size="14px" Text="查询"></asp:button>
      <INPUT id=parentid style="WIDTH: 20px; HEIGHT: 21px" type=hidden size=4
      name=parentid runat="server"></FONT></FONT></td>
<td style="HEIGHT: 46px" colSpan="3"><FONT face="宋体"> <INPUT onclick="window.open('addpowers.aspx','newtxt','top='+( screen.availHeight - 300 ) / 2+',left='+( screen.availWidth - 400 ) / 2+',width=400,height=300,scrollbars=no,resizable=no,resizable=no')"
type="button" value="增加权限"></FONT></td>
</tr>
<tr height="70">
<td align="center" colSpan="5"><asp:datagrid id="qxgrid" runat="server" Font-Size="13px" Width="820px" DataKeyField="id" AutoGenerateColumns="False"
AllowPaging="True" AllowSorting="True" BorderColor="#CCCCCC" BorderStyle="None" BorderWidth="1px" BackColor="White" CellPadding="3">
<FooterStyle ForeColor="#000066" BackColor="White"></FooterStyle>
<SelectedItemStyle Font-Bold="True" ForeColor="#663399" BackColor="#FFCC66"></SelectedItemStyle>
<AlternatingItemStyle BackColor="#E7F5FF"></AlternatingItemStyle>
<ItemStyle ForeColor="#330099" BackColor="White"></ItemStyle>
<HeaderStyle Font-Size="14px" Font-Bold="True" ForeColor="Black" BackColor="#99CCFF"></HeaderStyle>
<Columns>
<asp:BoundColumn DataField="id" ReadOnly="True" HeaderText="编号">
<HeaderStyle HorizontalAlign="Center" Width="70px"></HeaderStyle>
<ItemStyle HorizontalAlign="Center"></ItemStyle>
</asp:BoundColumn>
<asp:BoundColumn DataField="qx_name" HeaderText="权限名称">
<HeaderStyle HorizontalAlign="Center" Width="200px"></HeaderStyle>
<ItemStyle HorizontalAlign="Center"></ItemStyle>
</asp:BoundColumn>
<asp:BoundColumn DataField="qx_description" HeaderText="权限描述">
<HeaderStyle HorizontalAlign="Center" Width="200px"></HeaderStyle>
<ItemStyle HorizontalAlign="Center"></ItemStyle>
</asp:BoundColumn>
<asp:BoundColumn DataField="responsespage" HeaderText="对应页面">
<HeaderStyle HorizontalAlign="Center" Width="200px"></HeaderStyle>
<ItemStyle HorizontalAlign="Center"></ItemStyle>
</asp:BoundColumn>
<asp:EditCommandColumn ButtonType="LinkButton" UpdateText="更新" HeaderText="编辑" CancelText="取消" EditText="编辑">
<HeaderStyle HorizontalAlign="Center" Width="100px"></HeaderStyle>
<ItemStyle HorizontalAlign="Center"></ItemStyle>
</asp:EditCommandColumn>
<asp:ButtonColumn Text="删除" HeaderText="删除 " CommandName="Delete">
<HeaderStyle HorizontalAlign="Center" Width="50px"></HeaderStyle>
<ItemStyle HorizontalAlign="Center"></ItemStyle>
</asp:ButtonColumn>
</Columns>
<PagerStyle Font-Underline="True" HorizontalAlign="Center" ForeColor="#330099" BackColor="#99CCFF"
Mode="NumericPages"></PagerStyle>
</asp:datagrid></td>
</tr>
</table>
</form>
</div>
<script language=javascript>
        
</script>
<DIV class=Box id=Tree_div><FONT face=宋体>
<iewc:treeview id=TreeView1 onclick=NodeClick() runat="server"></iewc:treeview></FONT></DIV>
</body>
</HTML>

treelist.js 文件里代码function documentclick()
{
   var TagName=window.event.srcElement.tagName;

   if (TagName=="BUTTON")
   {
       var GlobalDropId=window.event.srcElement.id;
       var findexof=GlobalDropId.indexOf('[');
       var lindexof=GlobalDropId.indexOf(']_');
       var id= GlobalDropId.substring(lindexof+2,GlobalDropId.length-findexof);
       GlobalId=id;
   }
   var other=false;

   var offsetParent1=window.event.srcElement;
   if (offsetParent1.id=="Tree_div")
       other=true;
   while (offsetParent1.offsetParent)
   {

       offsetParent1=offsetParent1.offsetParent;
       if (offsetParent1.id=="Tree_div")
          other=true;

       if (offsetParent1.id=="Calendar_div")
         other=true;
   }

   if (window.event.srcElement.id!=GlobalDropId && window.event.srcElement.id!=GlobalId && !other)
   {
       if ($x("Tree_div")!=null)
         $x("Tree_div").style.visibility="hidden";
       if ($x("Calendar_div")!=null)
        $x("Calendar_div").style.visibility="hidden";
   }

}
function $x(fobj)
{
  return document.getElementById(fobj);
}
function GetObjAbsolutePostion(fobj)
{
   var obj=document.getElementById(fobj);
   var x=obj.offsetLeft;
   var y=obj.offsetTop;
    while (obj.offsetParent)
    {
     obj=obj.offsetParent;
     x+=obj.offsetLeft;
     y+=obj.offsetTop
    }

    var o=new Object();
    o.left=x;
    o.top=y;
    o.width=document.getElementById(fobj).offsetWidth;
    o.height=document.getElementById(fobj).offsetHeight;
    return o;
}

function SetRelativePosition(fobj,robj)
{

      var obj=GetObjAbsolutePostion(robj);

      var Tree_div=document.getElementById(fobj);
      Tree_div.style.left=obj.left+"px";
      Tree_div.style.top=obj.top+obj.height+"px";

}

function GetId(fobjId)
{

   var findexof=fobjId.indexOf('[');
   var lindexof=fobjId.indexOf(']_');
   var id= fobjId.substring(lindexof+2,fobjId.length-findexof);
   return id;
}

  function onNodeClick(TreeViewNodeText)
{
  var text=TreeViewNodeText;
  var  obj_input;
    if (document.getElementById(GlobalId))
    {
       document.getElementById(GlobalId).value=text;
       document.getElementById("Tree_div").style.visibility="hidden";
    }
} function SetValueCode(fobj)
{
   if ($x("Tree_div")==null)
    return;
   if (GlobalDropId!=fobj.id)
   {
    $x("Tree_div").style.visibility="visible";

    GlobalDropId=fobj.id;

    var id=GetId(fobj.id);
    GlobalId=id;
    //$x(id).focus();
    SetRelativePosition("Tree_div",id);

   }

   else
   {
    if ($x("Tree_div").style.visibility=="hidden")

      $x("Tree_div").style.visibility="visible";
    else
      $x("Tree_div").style.visibility="hidden"
   }


}

class=btnCss 样式！！
.btnCss
{
border-right: darkgray 1px solid;
background-position: center center;
border-top: darkgray 1px solid;
font-size: 12px;
background-image: url(images/desc.gif);
border-left: darkgray 0px solid;
width: 16px;
color: black;
padding-top: 1px;
border-bottom: darkgray 1px solid;
background-repeat: no-repeat;
font-family: 宋体;
height: 21px;
background-color: ghostwhite;
}

上面的例子"创建控件时出错,未知服务器标识iewc:treeview"???????

调试易

求树型下拉框???

解决方案 »