TextBox下拉TREE树选择器

第一步：Scripts/BudBox.js  Scripts.rar里面包含了JQURY和 BudBox.JS

第二步：添加引用和CSS javascript的引用

<script src="Scripts/jquery-1.4.1.js" type="text/javascript"></script>
    <script src="Scripts/BudBox.js" type="text/javascript"></script>
    <script type="text/javascript">
        function showBox() {
            $("#showBOX").BuddyBox("#Div_show", { autoHide: true }, "showBOX", "0");
            $("#showBOX").pbShow();
        }
        function showBox2() {
            $("#txtAssetType").BuddyBox("#Dive_show2", { autoHide: true }, "txtAssetType", "0");
            $("#txtAssetType").pbShow();
        }
        function test(obj) {
            var Div_show = document.getElementById("Div_show");
            var obj_all = Div_show.getElementsByTagName("INPUT");
            for (i = 0; i < obj_all.length; i++) {
                if (obj_all[i].type == "checkbox")
                    if (obj_all[i].checked == true) {
                        // alert(obj_all[i].nextSibling.innerText);target

                        var deptid = deptid + "," + obj_all[i].nextSibling.target
                        document.cookie = "deptid=" + deptid;
                        //                        alert(obj_all[i].nextSibling.target)
                    }
            }


        }
        function test1() {

            var obj_all = document.getElementsByTagName("INPUT");
            for (i = 0; i < obj_all.length; i++) {
                if (obj_all[i].type == "checkbox") {
                    obj_all[i].nextSibling.href = "closehidden.html";


                    //                        alert(obj_all[i].nextSibling.target)

                }
            }


        }
        function deptType(obj) {
            var Div_show = document.getElementById("Dive_show2");
            var obj_all = Div_show.getElementsByTagName("INPUT");
            for (i = 0; i < obj_all.length; i++) {
                if (obj_all[i].type == "checkbox")
                    if (obj_all[i].checked == true) {
                        // alert(obj_all[i].nextSibling.innerText);target

                        var deptid = deptid + "," + obj_all[i].nextSibling.target
                        document.cookie = "deptTypeId=" + deptid;
                        //                        alert(obj_all[i].nextSibling.target)
                    }
            }


        }
        function deptType2() {

            var obj_all = document.getElementsByTagName("INPUT");
            for (i = 0; i < obj_all.length; i++) {
                if (obj_all[i].type == "checkbox") {
                    obj_all[i].nextSibling.href = "closehidden.html";


                    //                        alert(obj_all[i].nextSibling.target)

                }
            }


        }
        function checkParent(obj) {
            while (obj != null) {
                var tagName = obj.tagName.toLowerCase();
                if (tagName == "div" && obj.id == "TreeView1") {
                    return;
                }

                if (tagName == "table") {
                    var checkBox = obj.getElementsByTagName("INPUT");
                    if (checkBox.length > 0) {
                        checkBox[0].checked = true;



                        document.getElementsByTagName("TextBox2").value = checkBox[0].nextSibling.innerText + "," + document.getElementsByTagName("TextBox2").value;

                        document.cookie = "TextBox2=" + escape(document.getElementsByTagName('TextBox2').value);


                        return;
                    }
                    obj = obj.parentElement.previousSibling;
                }
                else
                    obj = obj.parentElement;
            }
        }

        function client_OnTreeNodeChecked() {
            var obj = window.event.srcElement;
            var treeNodeFound = false;
            var checkedState;
            if (obj.tagName == "INPUT" && obj.type == "checkbox") {
                var treeNode = obj;
                checkedState = treeNode.checked;

                if (checkedState) {
                    checkParent(obj);
                }

                do {
                    obj = obj.parentElement;
                }
                while (obj.tagName != "TABLE")

                var parentTreeLevel = obj.rows[0].cells.length;
                var parentTreeNode = obj.rows[0].cells[0];

                var tables = obj.parentElement.getElementsByTagName("TABLE");
                var numTables = tables.length
                if (numTables >= 1) {
                    for (i = 0; i < numTables; i++) {
                        if (tables[i] == obj) {
                            treeNodeFound = true;

                            i++;
                            if (i == numTables) {
                                return;
                            }
                        }
                        if (treeNodeFound == true) {
                            var childTreeLevel = tables[i].rows[0].cells.length;


                            if (childTreeLevel > parentTreeLevel) {
                                var cell = tables[i].rows[0].cells[childTreeLevel - 1];
                                var inputs = cell.getElementsByTagName("INPUT");
                                inputs[0].checked = checkedState;

                            }
                            else {
                                return;
                            }
                        }
                    }
                }
            }
        }





        window.onload = function () {
            return test1()
        }




    </script>
    <style type="text/css">
        .test
        {
            background-color: #FFFFFF;
            overflow: auto;
            padding: 10px 8px 6px;
            border: 1px solid #cccccc;
            margin-bottom: 10px;
            filter: progid:DXImageTransform.Microsoft.Gradient(gradientType=0,startColorStr=#FFFFFF,endColorStr=#B1D5FB); /*IE6*/
            background: -moz-linear-gradient(top,#5F90BF,#5F90BF); /*非IE6的其它*/
            background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#5F90BF), to(#5F90BF)); /*非IE6的其它*/
        }
        .style1
        {
            color: #FFFFFF;
        }
    </style>

 

第三步：程序里添加TEXTBOX

<asp:TextBox ID="showBOX" runat="server" onclick="showBox()" Width="114px" Text="---请选择---"></asp:TextBox>
                <div id="Div_show" style="display: none; width: 102px; height: 80px" class="test">
                    <asp:TreeView ID="TreeView1" runat="server" onclick="javascript:client_OnTreeNodeChecked();"
                        NodeIndent="10" ShowCheckBoxes="All" ShowLines="True">
                    </asp:TreeView>
                </div>

 

第四步：后台绑定TREE的绑定代码如：

  protected void Page_Load(object sender, EventArgs e)
        {
               if (TreeView1.Nodes.Count == 0)
                {
                    BindTreeView(TreeView1);


                }
                if (TreeView2.Nodes.Count == 0)
                {
                    BindTreeViewByDeptTypeId(TreeView2);
                }   

}
//tree1
private void BindTreeView(TreeView treeview)
        {

            //创建第一级树  使用店

            SqlDataReader dr = Maticsoft.DBUtility.DbHelperSQL.ExecuteReader("SELECT * FROM mDepartment where len(DeptId)=2 ");
            if (dr.HasRows)
            {
                while (dr.Read())
                {

                    TreeNode rootNode = new TreeNode();
                    rootNode.Value = dr["DeptId"].ToString();
                    rootNode.Text = dr["DeptName"].ToString();
                    rootNode.Target = dr["DeptId"].ToString();
                    rootNode.NavigateUrl = dr["DeptId"].ToString();
                    rootNode.SelectAction = TreeNodeSelectAction.Expand;//单击节点展开字节点
                    rootNode.Expanded = false;
                    treeview.Nodes.Add(rootNode);


                }

            }
        }
        //tree2 
        private void BindTreeViewByDeptTypeId(TreeView treeview)
        {

            //创建第一级树  资产类型

            SqlDataReader dr = Maticsoft.DBUtility.DbHelperSQL.ExecuteReader("SELECT * FROM mAssetType where SUBSTRING(AssetTypeId,1,4)=0103 and LEN(AssetTypeId)=6");
            if (dr.HasRows)
            {
                while (dr.Read())
                {

                    TreeNode rootNode = new TreeNode();
                    rootNode.Value = dr["AssetTypeId"].ToString();
                    rootNode.Text = dr["AssetTypeName"].ToString();
                    rootNode.Target = dr["AssetTypeId"].ToString();
                    rootNode.NavigateUrl = dr["AssetTypeId"].ToString();
                    rootNode.SelectAction = TreeNodeSelectAction.Expand;//单击节点展开字节点
                    rootNode.Expanded = false;
                    treeview.Nodes.Add(rootNode);


                }

            }
        }
        //tree1的子节点
private void CreateChildNode(TreeNode parentNode)
        {
            //创建第二级树 保管课别
            string parentNodeValue = parentNode.Value;
            SqlDataReader dr = Maticsoft.DBUtility.DbHelperSQL.ExecuteReader("SELECT * FROM [AffairMS].[dbo].[mDepartment] where SUBSTRING(DeptId,1,2)='" + parentNodeValue + "' and LEN(DeptId)=6 ");
            if (dr.HasRows)
            {
                while (dr.Read())
                {

                    TreeNode rootNode = new TreeNode();

                    rootNode.Value = dr["DeptId"].ToString();
                    rootNode.Text = dr["DeptName"].ToString();
                    rootNode.Target = dr["DeptId"].ToString();
                    rootNode.NavigateUrl = dr["DeptId"].ToString();
                    rootNode.Expanded = false;
                    parentNode.ChildNodes.Add(rootNode);

                }

            }
        }

 

转载于:https://www.cnblogs.com/luqingsong/archive/2012/05/11/2495911.html