复选框选中/取消选中时如何在JavaScript中切换ASP TreeView

Question

我想知道当单击父节点时如何展开和折叠Treeview，使用JavaScript展开父内部的所有节点，反之亦然。

根据下面的屏幕截图，当用户单击HeadNode1时，其所有Child和GrandChild节点都将展开，反之亦然。

我的树状视图

           <asp:TreeView ID="TreeView1" onclick="OnTreeClick(this)" ShowCheckBoxes="All" ShowLines="true" runat="server"></asp:TreeView>
        <asp:Button ID="Button1" runat="server" OnClick="Save_Click" Text="Save" />

CS代码

 protected void Page_Load(object sender, EventArgs e)
        {
            if (!IsPostBack)
            {
                TreeNode tNode1 = new TreeNode();
                tNode1.Text = "HeadNode1";
                tNode1.Value = "HeadNode1";

                TreeNode h1ChildNode1 = new TreeNode();
                h1ChildNode1.Text = "Head1Child1";
                tNode1.ChildNodes.Add(h1ChildNode1);

                TreeNode h1GrandChild1 = new TreeNode();
                h1GrandChild1.Text = "Head1Child1Grand1";
                h1ChildNode1.ChildNodes.Add(h1GrandChild1);

                TreeNode h1ChildNode2 = new TreeNode();
                h1ChildNode2.Text = "Head1Child2";
                tNode1.ChildNodes.Add(h1ChildNode2);

                TreeNode h1ChildNode3 = new TreeNode();
                h1ChildNode3.Text = "Head1Child3";
                tNode1.ChildNodes.Add(h1ChildNode3);
                TreeView1.Nodes.Add(tNode1);              

                ServerSideChangeSelection(TreeView1, true);
                List<TreeNode> nodes = new List<TreeNode>();

                foreach (TreeNode node in TreeView1.Nodes)
                {
                    nodes.Add(node);
                    if (node.ChildNodes.Count > 0)
                    {
                        foreach (TreeNode childNode in node.ChildNodes)
                        {
                            nodes.Add(childNode);
                        }
                    }
                }

                Nodes = nodes;
            }
        }

我希望单击我的父节点，并查看该节点中是否有子节点而得到扩展。

当单击parent时，JavaScript单击所有子节点。它确实单击了所有复选框，当您取消选中时，我也需要同时扩展它，反之亦然。

<script type="text/javascript">
        function OnTreeClick(evt) {
            var src = window.event != window.undefined ? window.event.srcElement : evt.target;
            var isChkBoxClick = (src.tagName.toLowerCase() == "input" && src.type == "checkbox");
            if (isChkBoxClick) {
                var parentTable = GetParentByTagName("table", src);
                var nxtSibling = parentTable.nextSibling;
                //check if nxt sibling is not null & is an element node
                if (nxtSibling && nxtSibling.nodeType == 1) {
                    //if node has children    
                    if (nxtSibling.tagName.toLowerCase() == "div") {
                        //check or uncheck children at all levels
                        CheckUncheckChildren(parentTable.nextSibling, src.checked);
                    }
                }
                //check or uncheck parents at all levels
                CheckUncheckParents(src, src.checked);
            }
        }

        function CheckUncheckChildren(childContainer, check) {
            var childChkBoxes = childContainer.getElementsByTagName("input");
            var childChkBoxCount = childChkBoxes.length;
            for (var i = 0; i < childChkBoxCount; i++) {
                childChkBoxes[i].checked = check;
            }
        }

        function CheckUncheckParents(srcChild, check) {
            var parentDiv = GetParentByTagName("div", srcChild);
            var parentNodeTable = parentDiv.previousSibling;
            if (parentNodeTable) {
                var checkUncheckSwitch;
                //checkbox checked 
                if (check) {
                    var isAllSiblingsChecked = AreAllSiblingsChecked(srcChild);
                    if (isAllSiblingsChecked)
                        checkUncheckSwitch = true;
                    else
                        return; //do not need to check parent if any(one or more) child not checked
                }
                else //checkbox unchecked
                {
                    checkUncheckSwitch = false;
                }

                var inpElemsInParentTable = parentNodeTable.getElementsByTagName("input");
                if (inpElemsInParentTable.length > 0) {
                    var parentNodeChkBox = inpElemsInParentTable[0];
                    parentNodeChkBox.checked = checkUncheckSwitch;
                    //do the same recursively
                    CheckUncheckParents(parentNodeChkBox, checkUncheckSwitch);
                }
            }
        }

        function AreAllSiblingsChecked(chkBox) {
            var parentDiv = GetParentByTagName("div", chkBox);
            var childCount = parentDiv.childNodes.length;
            for (var i = 0; i < childCount; i++) {
                if (parentDiv.childNodes[i].nodeType == 1) {
                    //check if the child node is an element node
                    if (parentDiv.childNodes[i].tagName.toLowerCase() == "table") {
                        var prevChkBox = parentDiv.childNodes[i].getElementsByTagName("input")[0];
                        //if any of sibling nodes are not checked, return false
                        if (!prevChkBox.checked) {
                            return false;
                        }
                    }
                }
            }
            return true;
        }

        //utility function to get the container of an element by tagname
        function GetParentByTagName(parentTagName, childElementObj) {
            var parent = childElementObj.parentNode;
            while (parent.tagName.toLowerCase() != parentTagName.toLowerCase()) {
                parent = parent.parentNode;
            }
            return parent;
        }
    </script>

谢谢您的时间。