当父节点选中时,树视图控件中的子节点会自动检查

时间:2012-07-23 04:44:47

标签: asp.net

我正在使用TreeView控件。使用复选框从数据库绑定值。

将近三个孩子的父节点就像

一样
Parent1 
  child1
    child2
      child3
Parent2
   child1
     child2
        child3

我能够绑定来自3个表的数据都运行良好。当父节点检查所有相应的子节点时,我想要一个设施自动检查。如果我点击父节点1,则检查子节点123。如果我检查child1,则检查child2和child3。如果我检查孩子2所有孩子3项检查。怎么做?

先谢谢 Amrutha

2 个答案:

答案 0 :(得分:2)

如果检查了父节点,则下面的javascript函数可用于检查所有子节点,如果至少检查了一个子节点,则检查父节点,否则取消选中它:

 function OnTreeClick(evt) {
     var src = window.event != window.undefined ? window.event.srcElement : evt.target;
     var isChkBoxClick = (src.tagName.toLowerCase() == "input" && src.type == "checkbox");
     var t = GetParentByTagName("table", src);
     if (isChkBoxClick) {
         var parentTable = GetParentByTagName("table", src);
         var nxtSibling = parentTable.nextSibling;
         if (nxtSibling && nxtSibling.nodeType == 1) {
             if (nxtSibling.tagName.toLowerCase() == "div") {
                 CheckUncheckChildren(parentTable.nextSibling, src.checked);
             }
         }
         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;
         var isAllSiblingsChecked = AreAllSiblingsChecked(srcChild);
         if (isAllSiblingsChecked) {
             checkUncheckSwitch = true;
         }
         else {
             checkUncheckSwitch = false;
         }
         var inpElemsInParentTable = parentNodeTable.getElementsByTagName("input");
         if (inpElemsInParentTable.length > 0) {
             var parentNodeChkBox = inpElemsInParentTable[0];
             parentNodeChkBox.checked = checkUncheckSwitch;

             CheckUncheckParents(parentNodeChkBox, checkUncheckSwitch);
         }
     }
 }

 function AreAllSiblingsChecked(chkBox) {
     var parentDiv = GetParentByTagName("div", chkBox);
     var childCount = parentDiv.childNodes.length;
     var k = 0;
     for (var i = 0; i < childCount; i++) {
         if (parentDiv.childNodes[i].nodeType == 1) {
             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) {
                     //add each selected node one value
                     k = k + 1;
                 }
             }
         }
     }

     //Finally check any one of child node is select if selected yes then return ture parent node check

     if (k > 0) {
         return true;
     }
     else {
         return false;
     }
 }
 function GetParentByTagName(parentTagName, childElementObj) {
     var parent = childElementObj.parentNode;
     while (parent.tagName.toLowerCase() != parentTagName.toLowerCase()) {
         parent = parent.parentNode;
     }
     return parent;
 }

我用这个javascript解决了我的问题。

答案 1 :(得分:0)

一个简单的递归函数可以做到这一点。

private bool checkTreeNodes(TreeNodeCollection nodes, bool parentChecked)
{
    var isChecked = parentChecked;
    foreach (TreeNode node in nodes)
    {
        if (node.Checked || parentChecked)
        {
            checkTreeNodes(node.Nodes, true);
            node.Checked = true;
            isChecked = true;
        }
        else
        {
            node.Checked = checkTreeNodes(node.Nodes, false);
            isChecked = isChecked || node.Checked;
        }
    }
    return isChecked;
}

使用它像:

checkTreeNodes(myTree.Nodes, false);