Asp.net 2.0 TreeView的checkbox Js全选与反选

       前两天在改一个TreeView的checkbox的子结点反选BUG.原来的js有问题,后面找了一个简单的解决方案,支持选定特定结点后父子结点选中与反选.测试起来也比较方法.实际上TreeView不怎么用,以前用Component UI Treeview 功能已超过MS的,后面又有基于Jquery的Tree,方便多了.代码量也少.看代码:

ASPX:

<asp:TreeView ID="TreeView1" runat="server" DataSourceID="XmlDataSource1" ShowCheckBoxes="All">
        </asp:TreeView>
        <asp:XmlDataSource ID="XmlDataSource1" runat="server" DataFile="~/data.xml">
        </asp:XmlDataSource>

Cs:

protected voidPage_Load(objectsender, EventArgse)    
{                
    TreeView1.Attributes.Add("onclick", "OnCheckBoxCheckChanged(event)");     
}

然后把这段js放上:

functionOnCheckBoxCheckChanged(evt) {
   varsrc = window.event != window.undefined ? window.event.srcElement : evt.target;
   varisChkBoxClick = (src.tagName.toLowerCase() == "input"&& src.type == "checkbox");
   if(isChkBoxClick) {
      varparentTable = GetParentByTagName("table", src);
      varnxtSibling = 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);
      }
   }
functionCheckUncheckChildren(childContainer, check) {
   varchildChkBoxes = childContainer.getElementsByTagName("input");
   varchildChkBoxCount = childChkBoxes.length;
   for(vari = 0; i < childChkBoxCount; i++) {
      childChkBoxes[i].checked = check;
      }
   }
functionCheckUncheckParents(srcChild, check) {
   varparentDiv = GetParentByTagName("div", srcChild);
   varparentNodeTable = parentDiv.previousSibling;
   if(parentNodeTable) {
      varcheckUncheckSwitch;
      if(check) //checkbox checked
     {
         varisAllSiblingsChecked = 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;
         }
      varinpElemsInParentTable = parentNodeTable.getElementsByTagName("input");
      if(inpElemsInParentTable.length > 0) {
         varparentNodeChkBox = inpElemsInParentTable[0];
         parentNodeChkBox.checked = checkUncheckSwitch;
         //do the same recursively
        CheckUncheckParents(parentNodeChkBox, checkUncheckSwitch);
         }
      }
   }
functionAreAllSiblingsChecked(chkBox) {
   varparentDiv = GetParentByTagName("div", chkBox);
   varchildCount = parentDiv.childNodes.length;
   for(vari = 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") {
            varprevChkBox = 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
functionGetParentByTagName(parentTagName, childElementObj) {
   varparent = childElementObj.parentNode;
   while(parent.tagName.toLowerCase() != parentTagName.toLowerCase()) {
      parent = parent.parentNode;
      }
   returnparent;
   }

 

数据XML文件:

<?xml version="1.0" encoding="utf-8" ?>
<Syllabus>
  <Classes>
    <Class>XII Standard</Class>
    <Subjects>
      <Subject>Physics</Subject>
      <chapters>
        <chapter>Chapter 1</chapter>
        <Description>This is Chapter 1 in Physics</Description>
      </chapters>
      <chapters>
        <chapter>Chapter 2</chapter>
        <Description>This is Chapter 2 in Physics</Description>
      </chapters>
      <chapters>
        <chapter>Chapter 3</chapter>
        <Description>This is Chapter 3 in Physics</Description>
      </chapters>
      <chapters>
        <chapter>Chapter 4</chapter>
        <Description>This is Chapter 4 in Physics</Description>
      </chapters>
      <chapters>
        <chapter>Chapter 5</chapter>
        <Description>This is Chapter 5 in Physics</Description>
      </chapters>
    </Subjects>
    <Subjects>
      <Subject>Biology</Subject>
      <chapters>
        <chapter>Chapter 1</chapter>
        <Description>This is Chapter 1 in Biology</Description>
      </chapters>
      <chapters>
        <chapter>Chapter 2</chapter>
        <Description>This is Chapter 2 in Biology</Description>
      </chapters>
      <chapters>
        <chapter>Chapter 3</chapter>
        <Description>This is Chapter 3 in Biology</Description>
      </chapters>
      <chapters>
        <chapter>Chapter 4</chapter>
        <Description>This is Chapter 4 in Biology</Description>
      </chapters>
      <chapters>
        <chapter>Chapter 5</chapter>
        <Description>This is Chapter 5 in Biology</Description>
      </chapters>
    </Subjects>
    <Subjects>
      <Subject>Chemistry</Subject>
      <chapters>
        <chapter>Chapter 1</chapter>
        <Description>This is Chapter 1 in Chemistry</Description>
      </chapters>
      <chapters>
        <chapter>Chapter 2</chapter>
        <Description>This is Chapter 2 in Chemistry</Description>
      </chapters>
      <chapters>
        <chapter>Chapter 3</chapter>
        <Description>This is Chapter 3 in Chemistry</Description>
      </chapters>
      <chapters>
        <chapter>Chapter 4</chapter>
        <Description>This is Chapter 4 in Chemistry</Description>
      </chapters>
      <chapters>
        <chapter>Chapter 5</chapter>
        <Description>This is Chapter 5 in Chemistry</Description>
      </chapters>
    </Subjects>
    <Subjects>
      <Subject>Maths</Subject>
      <chapters>
        <chapter>Chapter 1</chapter>
        <Description>This is Chapter 1 in Maths</Description>
      </chapters>
      <chapters>
        <chapter>Chapter 2</chapter>
        <Description>This is Chapter 2 in Maths</Description>
      </chapters>
      <chapters>
        <chapter>Chapter 3</chapter>
        <Description>This is Chapter 3 in Maths</Description>
      </chapters>
      <chapters>
        <chapter>Chapter 4</chapter>
        <Description>This is Chapter 4 in Maths</Description>
      </chapters>
      <chapters>
        <chapter>Chapter 5</chapter>
        <Description>This is Chapter 5 in Maths</Description>
      </chapters>
    </Subjects>
  </Classes>
  <Classes>
    <Class>X Standard</Class>
    <Subjects>
      <Subject>Maths</Subject>
      <chapters>
        <chapter>Chapter 1</chapter>
        <Description>This is Chapter 1 in Maths</Description>
      </chapters>
      <chapters>
        <chapter>Chapter 2</chapter>
        <Description>This is Chapter 2 in Maths</Description>
      </chapters>
      <chapters>
        <chapter>Chapter 3</chapter>
        <Description>This is Chapter 3 in Maths</Description>
      </chapters>
      <chapters>
        <chapter>Chapter 4</chapter>
        <Description>This is Chapter 4 in Maths</Description>
      </chapters>
      <chapters>
        <chapter>Chapter 5</chapter>
        <Description>This is Chapter 5 in Maths</Description>
      </chapters>
    </Subjects>
    <Subjects>
      <Subject>Social</Subject>
      <chapters>
        <chapter>Chapter 1</chapter>
        <Description>This is Chapter 1 in Social</Description>
      </chapters>
      <chapters>
        <chapter>Chapter 2</chapter>
        <Description>This is Chapter 2 in Social</Description>
      </chapters>
      <chapters>
        <chapter>Chapter 3</chapter>
        <Description>This is Chapter 3 in Social</Description>
      </chapters>
      <chapters>
        <chapter>Chapter 4</chapter>
        <Description>This is Chapter 4 in Social</Description>
      </chapters>
      <chapters>
        <chapter>Chapter 5</chapter>
        <Description>This is Chapter 5 in Social</Description>
      </chapters>
    </Subjects>
    <Subjects>
      <Subject>Science</Subject>
      <chapters>
        <chapter>Chapter 1</chapter>
        <Description>This is Chapter 1 in Science</Description>
      </chapters>
      <chapters>
        <chapter>Chapter 2</chapter>
        <Description>This is Chapter 2 in Science</Description>
      </chapters>
      <chapters>
        <chapter>Chapter 3</chapter>
        <Description>This is Chapter 3 in Science</Description>
      </chapters>
      <chapters>
        <chapter>Chapter 4</chapter>
        <Description>This is Chapter 4 in Science</Description>
      </chapters>
      <chapters>
        <chapter>Chapter 5</chapter>
        <Description>This is Chapter 5 in Science</Description>
      </chapters>
    </Subjects>
    <Subjects>
      <Subject>English</Subject>
      <chapters>
        <chapter>Chapter 1</chapter>
        <Description>This is Chapter 1 in English</Description>
      </chapters>
      <chapters>
        <chapter>Chapter 2</chapter>
        <Description>This is Chapter 2 in English</Description>
      </chapters>
      <chapters>
        <chapter>Chapter 3</chapter>
        <Description>This is Chapter 3 in English</Description>
      </chapters>
      <chapters>
        <chapter>Chapter 4</chapter>
        <Description>This is Chapter 4 in English</Description>
      </chapters>
      <chapters>
        <chapter>Chapter 5</chapter>
        <Description>This is Chapter 5 in English</Description>
      </chapters>
    </Subjects>
  </Classes>
</Syllabus>

希望本文对您有帮助.

Author:Petter Liu    http://wintersun.cnblogs.com