Asp.net 中DropDownList下拉列表显示Treeview

用户控件

这是一段程序代码。

<%@ Control Language="C#" AutoEventWireup="true" CodeBehind="WebUserControl2.ascx.cs" Inherits="MultiDropdownSample.WebUserControl2" %>

<script language="javascript" type="text/javascript">

//    window.onload = function (ctlId) {

```
//        //CloseTree(ctlId);
```
```
//        debugger;
```
```
//        alert("aa");
```
```
//    } 
```
```
//    function OpenTree(ctlId) {
```

//        var obj = document.getElementById(ctlId + "TreeView1");

//        obj.style.visibility = "hidden";

```
//        obj.style.height = "0px";
```
```
//    }
```
```
    function OpenTree(ctlId) {
```

        var Panel = document.getElementById(ctlId + "PanelTree");

```
        Panel.style.height = "500px";
```
```
        // alert("kai");
```

        //            var lstBox = document.getElementById(ctlId + "DDList");

        //            var div = document.getElementById("divTree");

        //            div.style.display = '';

        var obj = document.getElementById(ctlId + "TreeView1");

        if (obj.style.visibility == "visible") {

```
            CloseTree(ctlId);
```
```
        }
```
```
        else {
```

            obj.style.visibility = "visible";

            obj.style.height = "100px";

```
        }
```
```
    }
```
```
    function CloseTree(ctlId) {
```
```
        //debugger;
```

        var obj = document.getElementById(ctlId + "TreeView1");

        obj.style.visibility = "hidden";

```
        obj.style.height = "0px";
```

//        if (obj.style.visibility == "visible") {

```
//            CloseListBox(ctlId);
```
```
//        }
```
```
//        else {
```

//            obj.style.visibility = "visible";

//            obj.style.height = "100px";

```
//        }
```
```
    }
```
```
    function CloseListBox(ctlId) {
```

        var panel = document.getElementById(ctlId + "Panel2");

        var tabl = document.getElementById(ctlId + "Table2");

        // var lstBox = document.getElementById(ctlId + "DDList");

        var lstBox = document.getElementById(ctlId + "PanelTree");

        lstBox.style.visibility = "hidden";

```
        lstBox.style.height = "0px";
```

        panel.style.height = tabl.style.height;

```
    }
```

    function OnTreeNodeChecked(ctlId) {

```
var ele = event.srcElement; 
```
```
if(ele.type=='checkbox') 
```
```
{ 
```

var childrenDivID = ele.id.replace('CheckBox','Nodes');

var div = document.getElementById(childrenDivID);

```
if(div==null)return; 
```

var checkBoxs = div.getElementsByTagName('INPUT');

```
for(var i=0;i<checkBoxs.length;i++) 
```
```
{ 
```
```
if(checkBoxs[i].type=='checkbox') 
```
```
checkBoxs[i].checked=ele.checked; 
```
```
}
```
```
}
```

//点?击÷复′选?框ò时±触￥发￠事?件t

```
var o = window.event.srcElement;
```

if (o.tagName == "INPUT" && o.type == "checkbox") {

```
    __doPostBack("", "");
```
```
}
```
```
}
```
```
</script>
```

<script language="javascript" type="text/javascript">

```
 
```
```
    //checkbox点?击÷事?件t
```
```
    function OnCheckEvent(ctlID)
```
```
    {
```

        var objNode = event.srcElement;

        if(objNode.tagName != "INPUT" || objNode.type != "checkbox")

```
            return;
```

        //获?得?当±前°树÷结á点?

        var ck_ID = objNode.getAttribute("ID");

        var node_ID = ck_ID.substring(0,ck_ID.indexOf("CheckBox")) + "Nodes";

        var curTreeNode = document.getElementById(node_ID);

```
        //级?联a选?择?
```

        SetChildCheckBox(curTreeNode,objNode.checked);

```
        SetParentCheckBox(objNode);
```

        //点?击÷复′选?框ò时±触￥发￠事?件t

        var o = window.event.srcElement;

        if (o.tagName == "INPUT" && o.type == "checkbox") {

```
            __doPostBack("", "");
```
```
        }
```
```
    }
```
```
    
```
```
    //子ó结á点?字?符?串?
```
```
    var childIds = "";
```

    //获?取?子ó结á点?ID数y组é

    function GetChildIdArray(parentNode)

```
    {
```
```
        if (parentNode == null)
```
```
            return;
```

        var childNodes = parentNode.children;

```
        var count = childNodes.length;
```
```
        for(var i = 0;i < count;i ++)
```
```
        {
```

            var tmpNode = childNodes[i];

            if(tmpNode.tagName == "INPUT" && tmpNode.type == "checkbox")

```
            {
```

                childIds = tmpNode.id + ":" + childIds;

```
            }
```
```
            GetChildIdArray(tmpNode);
```
```
        }
```
```
    }
```
```
    
```

    //设è置?子ó结á点?的?checkbox

    function SetChildCheckBox(parentNode,checked)

```
    {
```
```
        if(parentNode == null)
```
```
            return;
```

        var childNodes = parentNode.children;

```
        var count = childNodes.length;
```
```
        for(var i = 0;i < count;i ++)
```
```
        {
```

            var tmpNode = childNodes[i];

            if(tmpNode.tagName == "INPUT" && tmpNode.type == "checkbox")

```
            {
```

                tmpNode.checked = checked;

```
            }
```

            SetChildCheckBox(tmpNode,checked);

```
        }
```
```
    }
```
```
    
```

    //设è置?父?结á点?的?checkbox

    function SetParentCheckBox(childNode)

```
    {
```
```
        if(childNode == null)
```
```
            return;
```

        var parent = childNode.parentNode;

        if(parent == null || parent == "undefined")

```
            return;
```
```
        do 
```
```
        {
```
```
        parent = parent.parentNode;
```
```
        }
```

        while (parent && parent.tagName != "DIV");

        if(parent == "undefined" || parent == null)

```
            return;
```

        var parentId = parent.getAttribute("ID");

        var objParent = document.getElementById(parentId);

```
        childIds = "";
```
```
        GetChildIdArray(objParent);
```

        //判D断?子ó结á点?状′态?

        childIds = childIds.substring(0,childIds.length - 1);

        var aryChild = childIds.split(":");

```
        var result = false;
```

        //当±子ó结á点?的?checkbox状′态?有D一?个?为atrue，?其?父?结á点?checkbox状′态?即′为atrue,否?则ò为afalse

```
        for(var i in aryChild)
```
```
        {
```

            var childCk = document.getElementById(aryChild[i]);

```
            if(childCk.checked)
```
```
                result = true;
```
```
        }
```

        parentId = parentId.replace("Nodes","CheckBox");

        var parentCk = document.getElementById(parentId);

```
        if(parentCk == null)
```
```
            return;
```
```
        if(result)
```
```
            parentCk.checked = true;
```
```
        else
```
```
            parentCk.checked = false;
```
```
        SetParentCheckBox(parentCk);
```
```
    }
```
```
   
```
```
</script>
```
```
<%--<asp:panel >%>
```

<TABLE id="Table2" style="TABLE-LAYOUT: fixed; HEIGHT: 24px" cellSpacing="0" borderColorDark="#cccccc"

            cellPadding="0" width="100%" borderColorLight="#7eb3e3" border="1" runat="server">

            <TR id="rowDD" style="HEIGHT: 15px" runat="server">

```
                <TD noWrap>
```

                    <asp:Label id="DDLabel" style="CURSOR: default" runat="server" Width="100%" ToolTip="" Font-Size="Smaller"

                        Font-Names="Arial" BorderColor="Transparent" BorderStyle="None" height="15px"></asp:Label></TD>

                <TD id="colDDImage" style="PADDING-RIGHT: 0px; PADDING-LEFT: 0px; PADDING-BOTTOM: 0px; PADDING-TOP: 0px; BACKGROUND-COLOR: #7eb3e3"

                    width="20" background="Image/DDImage.bmp" runat="server"></TD>

```
            </TR>
```
```
        </TABLE>
```

        <asp:Panel ID="PanelTree" runat="server" Width="100%">

        <div style="Z-INDEX: 9999; POSITION: absolute"  >

```
           
```
```
           
```

            <asp:TreeView ID="TreeView1" runat="server" Width="100%"   ShowCheckBoxes="All">

```
            </asp:TreeView>
```
```
            
```
```
         
```
```
            </div>
```
```
        </asp:Panel>
```
```
 <%--</asp:panel> --%>
```

后台cs代码

这是一段程序代码。

```
using System;
```
```
using System.Collections.Generic;
```
```
using System.Linq;
```
```
using System.Web;
```
```
using System.Web.UI;
```
```
using System.Web.UI.WebControls;
```
```
using System.Collections;
```
```
namespace MultiDropdownSample
```
```
{
```

    public partial class WebUserControl2 : System.Web.UI.UserControl

```
    {
```

        // protected System.Web.UI.WebControls.TreeView DDList;

```
        private string _SelectedText;
```
```
        #region  Public properties
```
```
        /// <summary>
```

        /// Get and Set the width of the Dropdown

```
        /// </summary>
```
```
        //public double ListWidth
```
```
        //{
```

        //    get { return Panel2.Width.Value; }

        //    set { Panel2.Width = (Unit)value; }

```
        //}
```
```
        /// <summary>
```

        /// Gets arraylist of  selected values

```
        /// </summary>
```

        public ArrayList SelectedValues

```
        {
```
```
            get
```
```
            {
```

                ArrayList selectedValues = new ArrayList();

                //foreach (System.Web.UI.WebControls.ListItem li in TreeView1.CheckedNodes)

```
                //{
```
```
                //    if (li.Selected)
```

                //    { selectedValues.Add(li.Value); }

```
                //}
```

                foreach (TreeNode item in TreeView1.CheckedNodes)

```
                {
```
```
                    if (item.Checked)
```
```
                    {
```

                        selectedValues.Add(item.Value);

```
                    }
```
```
                }
```
```
                return selectedValues;
```
```
            }
```
```
        }
```
```
        /// <summary>
```

        /// Gets arraylist of  selected texts

```
        /// </summary>
```
```
        public ArrayList SelectedTexts
```
```
        {
```
```
            get
```
```
            {
```

                ArrayList selectedTexts = new ArrayList();

                //foreach (System.Web.UI.WebControls.ListItem li in DDList.Items)

```
                //{
```
```
                //    if (li.Selected)
```

                //    { selectedTexts.Add(li.Text); }

```
                //}
```

                foreach (TreeNode item in TreeView1.CheckedNodes)

```
                {
```
```
                    if (item.Checked)
```
```
                    {
```

                        selectedTexts.Add(item.Text);

```
                    }
```
```
                }
```
```
                return selectedTexts;
```
```
            }
```
```
        }
```
```
        /// <summary>
```

        /// Gets the selected text , the items are separated by comma

```
        /// </summary>
```
```
        public string SelectedText
```
```
        {
```
```
            get
```
```
            {
```

                string selText = string.Empty;

                //foreach (System.Web.UI.WebControls.ListItem li in DDList.Items)

```
                //{
```
```
                //    if (li.Selected)
```

                //    { selText += li.Text + ","; }

```
                //}
```

                foreach (TreeNode item in TreeView1.CheckedNodes)

```
                {
```
```
                    if (item.Checked)
```
```
                    {
```

                        selText += item.Text + ",";

```
                    }
```
```
                }
```

                if (selText.Length > 0)

                    selText = selText.Length > 0 ? selText.Substring(0, selText.Length - 1) : selText;

```
                return selText;
```
```
            }
```
```
            set
```
```
            {
```
```
                _SelectedText = value;
```

                DDLabel.Text = _SelectedText;

                DDLabel.ToolTip = _SelectedText;

```
            }
```
```
        }
```
```
        /// <summary>
```

        /// Gets the selected items of the list

```
        /// </summary>
```
```
        public ArrayList SelectedItems
```
```
        {
```
```
            get
```
```
            {
```

                ArrayList selectedItems = new ArrayList();

                //foreach (System.Web.UI.WebControls.ListItem li in DDList.Items)

```
                //{
```
```
                //    if (li.Selected)
```

                //    { selectedItems.Add(li); }

```
                //}
```

                foreach (TreeNode item in TreeView1.CheckedNodes)

```
                {
```
```
                    if (item.Checked)
```
```
                    {
```

                        selectedItems.Add(item);

```
                    }
```
```
                }
```
```
                return selectedItems;
```
```
            }
```
```
            set
```
```
            {
```

                ArrayList selectedItems = value;

                string selText = string.Empty;

                // Deselect all the selected items

                //foreach (System.Web.UI.WebControls.ListItem li in DDList.Items)

                //{ li.Selected = false; }

                foreach (TreeNode item in TreeView1.CheckedNodes)

```
                {
```

                    item.Checked = false;

```
                }
```

                // Select the items from the list

                //foreach (System.Web.UI.WebControls.ListItem selItem in selectedItems)

```
                //{
```

                //    System.Web.UI.WebControls.ListItem li = DDList.Items.FindByText(selItem.Text);

```
                //    if (li != null)
```

                //    { li.Selected = true; selText += li.Text + ","; }

```
                //}
```

                foreach (TreeNode selItem in selectedItems)

```
                {
```

                    TreeNode node = TreeView1.FindNode(Server.HtmlEncode(selItem.Text.Trim()));

```
                    if (node != null)
```
```
                    {
```

                        node.Checked = true;

                        selText += node.Text + ",";

```
                    }
```

                    //TreeNode item=this.TreeView1.Nodes.IndexOf(..FindNode(.CheckedNodes..Contains(selItem)

```
                }
```

                if (selText.Length > 0)

                    selText = selText.Length > 0 ? selText.Substring(0, selText.Length - 1) : selText;

                SelectedText = selText;

```
            }
```
```
        }
```
```
        /// <summary>
```
```
        /// Gets the list
```
```
        /// </summary>
```

        public System.Web.UI.WebControls.TreeView TreeViewList

```
        {
```

            get { return this.TreeView1; }

            set { TreeView1 = TreeViewList; }

```
        }
```
```
        #endregion
```
```
        #region Public methods
```
```
        /// <summary>
```

        /// Remove all items in the list

```
        /// </summary>
```
```
        public void Clear()
```
```
        {
```

            this.TreeView1.Nodes.Clear();// DDList.Items.Clear();

```
        }
```
```
        #endregion
```
```
        #region Private methods
```
```
        /// <summary>
```

        /// Set the attributes of the controls

```
        /// </summary>
```
```
        public void PageInit()
```
```
        {
```

            string ctlID = this.UniqueID + "_";

            //TreeView1.Attributes.Add("onchange", "SelectedIndexChanged('" + ctlID + "');");

            //TreeView1.Attributes.Add("onmouseout", "CloseListBox('" + ctlID + "');");

            //PanelTree.Attributes.Add("onmouseout", "CloseListBox('" + ctlID + "');");

            // DDLabel.Attributes.Add("onclick", "OpenListBox('" + ctlID + "');");

            // colDDImage.Attributes.Add("onclick", "OpenListBox('" + ctlID + "');");

            //SetTreeNodeAutoSelectParentNodeHandle

            //TreeView1.Attributes.Add("onclick", "SetTreeNodeAutoSelectParentNodeHandle('" + ctlID + "');");

            //TreeView1.Attributes.Add("onclick", "OnCheckBoxCheckChanged(event)");

            DDLabel.Attributes.Add("onclick", "OpenTree('" + ctlID + "');");

            colDDImage.Attributes.Add("onclick", "OpenTree('" + ctlID + "');");

            TreeView1.Attributes.Add("onmouseover", "OpenTree('" + ctlID + "');");

            PanelTree.Attributes.Add("onmouseout", "CloseTree('" + ctlID + "');");

```
          
```

            //TreeView1.Attributes.Add("OnClick", "OnTreeNodeChecked('" + ctlID + "');");

            TreeView1.Attributes.Add("onclick", "OnCheckEvent('" + ctlID + "');");

           // this.Attributes.Add("onload", "CloseTree('" + ctlID + "');");

            if (!Page.ClientScript.IsStartupScriptRegistered(this.GetType(), "onloadjs"))

                Page.ClientScript.RegisterStartupScript(this.GetType(), "onloadjs",

                  "window.onload = function() { CloseTree('" + ctlID + "');};", true);

```
        }
```
```
        /// <summary>
```
```
        /// Page load event
```
```
        /// </summary>
```

        /// <param name="sender"></param>

```
        /// <param name="e"></param>
```

        private void Page_Load(object sender, System.EventArgs e)

```
        {
```
```
            if (!Page.IsPostBack)
```
```
            {
```
```
                PageInit();
```
```
                TreeView1.Height = 0;
```

                if (TreeView1.Nodes.Count > 0)

                    DDLabel.Text = TreeView1.Nodes[0].Text;

```
                else
```

                    DDLabel.Text = string.Empty;

```
            }
```
```
            else
```

            {    // set the selected text and tooltip

                DDLabel.Text = SelectedText;

                DDLabel.ToolTip = SelectedText;

```
            }
```

            string ctlID = this.UniqueID + "_";

```
         
```
```
        }
```
```
        #endregion
```
```
    }
```
```
}
```

调用示例

webForm.aspx页面

这是一段程序代码。

<%@ Page Language="C#" AutoEventWireup="true" CodeBehind="WebForm3.aspx.cs" Inherits="MultiDropdownSample.WebForm3" %>

<%@ Register TagPrefix="uc1" TagName="WebUserControl2" Src="WebUserControl2.ascx" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">

```
<head runat="server">
```
```
    <title></title>
```
```
</head>
```
```
<body>
```
```
    <form id="form1" runat="server"  >
```
```
    <div height="55px">
```

    <uc1:WebUserControl2 id="MultiSelectDropDown1" runat="server"></uc1:WebUserControl2>

```
    </div>
```

    <asp:DropDownList ID="DropDownList1" runat="server">

```
    </asp:DropDownList>
```
```
    </form>
```
```
</body>
```
```
</html>
```

pageload 事件

这是一段程序代码。

protected void Page_Load(object sender, EventArgs e)

```
     {
```
```
         if (!Page.IsPostBack)
```
```
         {
```

             MultiSelectDropDown1.Clear();

             //MultiSelectDropDown1.List.Items.Add(new System.Web.UI.WebControls.ListItem("Apple", "1"));

             //MultiSelectDropDown1.List.Items.Add(new System.Web.UI.WebControls.ListItem("Grapes", "2"));

             //MultiSelectDropDown1.List.Items.Add(new System.Web.UI.WebControls.ListItem("Orange", "3"));

             //MultiSelectDropDown1.List.Items.Add(new System.Web.UI.WebControls.ListItem("Strawberry", "4"));

             //MultiSelectDropDown1.List.Items.Add(new System.Web.UI.WebControls.ListItem("Water Melon", "5"));

             //MultiSelectDropDown1.TreeViewList.Nodes.Add(new TreeNode { Text = "1" });

             TreeNode userTools = new TreeNode();

             userTools.Text = "User Tools";

             MultiSelectDropDown1.TreeViewList.Nodes.Add(userTools);

             TreeNode userTool1 = new TreeNode();

             userTool1.Text = "User Tool 1";

             MultiSelectDropDown1.TreeViewList.Nodes[MultiSelectDropDown1.TreeViewList.Nodes.IndexOf(userTools)].ChildNodes.Add(userTool1);

             // tree.Nodes[0].Nodes.Add(userTool1); // This also works

             TreeNode userTool2 = new TreeNode();

             userTool2.Text = "User Tool 2";

             MultiSelectDropDown1.TreeViewList.Nodes[MultiSelectDropDown1.TreeViewList.Nodes.IndexOf(userTools)].ChildNodes[userTools.ChildNodes.IndexOf(userTool1)].ChildNodes.Add(userTool2);

             // tree.Nodes[0].Nodes[0].Nodes.Add(userTool2); // This also works

```
         }
```
```
     }
```

下载地址