【问题标题】:using javascript with TreeView nodes Check/Uncheck Functionality使用带有 TreeView 节点的 javascript 检查/取消选中功能
【发布时间】:2012-05-23 11:18:11
【问题描述】:

我正在使用带有 TreeView 节点复选框的以下 javascript 检查/取消检查功能。我在树视图中有三个级别。父级、子级和兄弟级。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;
                if (nxtSibling && nxtSibling.nodeType == 1)//check if nxt sibling is not null & is an element node
                {
                    if (nxtSibling.tagName.toLowerCase() == "div") //if node has children
                    {
                        //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;

                if (check) //checkbox checked
                {
                    checkUncheckSwitch = true;
                }
                else //checkbox unchecked
                {
                    var isAllSiblingsUnChecked = AreAllSiblingsUnChecked(srcChild);
                    if (!isAllSiblingsUnChecked)
                        checkUncheckSwitch = true;
                    else
                        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 AreAllSiblingsUnChecked(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>

【问题讨论】:

    标签: javascript asp.net treeview


    【解决方案1】:
    // trvTest.Attributes.Add("onclick", "OnCheckBoxCheckChanged(event)"); 
    
    function OnCheckBoxCheckChanged(event)
            {
                var obj = window.event.srcElement;
                var treeNodeFound = false;
                var checkedState;
                if (obj.tagName == "INPUT" && obj.type == "checkbox") 
                {
                    var treeNode = obj;
                    checkedState = treeNode.checked;
                    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");
                                    if (inputs.length > 0)
                                        inputs[0].checked = checkedState;
                                }
                                else
                                {
                                    return;
                                }
                            }
                        }
                    }
                }
            }
    

    【讨论】:

      猜你喜欢
      • 2012-06-16
      • 1970-01-01
      • 2018-09-17
      • 1970-01-01
      • 1970-01-01
      • 2010-11-03
      • 2021-04-05
      • 1970-01-01
      • 1970-01-01
      相关资源
      最近更新 更多