ASP.NET 2.0 Treeview Checkboxes - Check All - Javascript

ASP.NET 2.0 TreeView有很多内嵌的特性，例如：为所有的Tree Nodes显示CheckBox,节点的格式化、样式，等等。设置ShowCheckBoxes="All"属性为所有的nodes显示一个CheckBox，Leaf,Parent和Root选项是为某一层次的节点显示CheckBox,None选项不显示CheckBoxs.

当我们设定ShowCheckBoxes="All", 我们希望提供这样一个特性：我们选中Root Node的时候，其他的所有CheckBoxs都自动选中，也就是当Parent Node被选中，他的所有Child Nodes都自动选中。

直觉告诉我们，完成这一任务应该在客户端实现，不需要牵涉到回发。

TreeView Declaration

<asp:TreeView ID="TreeView1" Runat="server" DataSourceID="XmlDataSource1" onclick="treeViewCheck(event) ;" ShowCheckBoxes="all">

<DataBindings>

<asp:TreeNodeBinding DataMember="Category" ValueField="ID" TextField="Name"></asp:TreeNodeBinding>

<asp:TreeNodeBinding DataMember="Description" ValueField="Value" TextField="Value"></asp:TreeNodeBinding>

</DataBindings>

</asp:TreeView>

在上边的代码中，你能看到onclick="client_OnTreeNodeChecked();" 这个属性，JavaScript函数自动帮助我们完成

这个任务下面就是相关的JavaScript代码片段：

  1<script type="text/javascript">
  2function goDeeperChecked(obj)
  3{
  4   var chk1 = true;
  5   // Get the parent.
  6   var head1 = obj.parentNode.previousSibling;
  7   // no rows, cant do my work.
  8   if(obj.rows == null)
  9   {
 10      return ;
 11   }
 12   // This is how may rows are at this level.
 13   var pTreeLevel1 = obj.rows[0].cells.length;
 14   // Are we a parentmy ?
 15   if(head1.tagName == "TABLE")
 16   {
 17      // Get the list of rows ahead of us.
 18      var tbls = obj.parentNode.getElementsByTagName("TABLE");
 19      // get the count of that list.
 20      var tblsCount = tbls.length;
 21      // determine if any of the rows underneath are unchecked.
 22      for(i = 0; i < tblsCount; i ++ )
 23      {
 24         var childTreeLevel = tbls[i].rows[0].cells.length;
 25         if(childTreeLevel = pTreeLevel1)
 26         {
 27            var chld = tbls[i].getElementsByTagName("INPUT");
 28            if (chld[0].checked == false)
 29            {
 30               chk1 = false;
 31               break;
 32            }
 33         }
 34      }
 35      var nd = head1.getElementsByTagName("INPUT");
 36      nd[0].checked = chk1;
 37      // do the same for the level above
 38      goDeeperChecked(obj.parentNode);
 39   }
 40   else
 41   {
 42      return;
 43   }
 44}
 45
 46function
 47
 48goDeeper(check, obj)
 49{
 50   // head1 gets the parent node of the unchecked node
 51   var head = obj.parentNode.previousSibling;
 52   if(head.tagName == "TABLE")
 53   {
 54      // checks for the input tag which consists of checkbox
 55      var matchElement = head.getElementsByTagName("INPUT");
 56      // matchElement1[0] gives us the checkbox and it is unchecked
 57      matchElement[0].checked = false;
 58   }
 59   else
 60   {
 61      head = obj.parentNode.previousSibling;
 62   }
 63   if
 64   (head.tagName == "TABLE")
 65   {
 66      goDeeper(check, obj.parentNode);
 67   }
 68
 69   else
 70   {
 71      return
 72      ;
 73   }
 74}
 75
 76function treeViewCheck(event)
 77{
 78   // obj gives us the node on which check or uncheck operation has performed
 79   var obj = event.srcElement || event.target ;
 80   var treeNodeFound = false;
 81   var checkedState;
 82   // checking whether obj consists of checkbox to avoid exception
 83   if(obj.tagName == "INPUT" && obj.type == "checkbox")
 84   {
 85      var treeNode = obj;
 86      checkedState = treeNode.checked;
 87      // work our way back to the parent < table > element
 88      do
 89      {
 90         obj = obj.parentNode;
 91      }
 92      while(obj.tagName != "TABLE")
 93      var parentTreeLevel = obj.rows[0].cells.length;
 94      var parentTreeNode = obj.rows[0].cells[0];
 95      // get all the TreeNodes inside the TreeView (the parent < div > )
 96      var tables = obj.parentNode.getElementsByTagName("TABLE");
 97      // checking for any node is checked or unchecked during operation
 98      if(obj.tagName == "TABLE")
 99      {
100         // if any node is unchecked then their parent node are unchecked
101         if
102         ( ! treeNode.checked)
103         {
104            goDeeper(false, obj);
105         }
106
107         // end if - unchecked
108         // total number of TreeNodes
109         var numTables = tables.length
110         if(numTables >= 1)
111         {
112            // cycle through all the TreeNodes
113            // until we find the TreeNode we checked
114            for
115            (i = 0;
116            i < numTables;
117            i ++ )
118            {
119               if(tables[i] == obj)
120               {
121                  treeNodeFound = true;
122                  i ++ ;
123                  if(i == numTables)
124                  {
125                     // if we're on the last TreeNode, we are done
126                     break;
127                  }
128               }
129
130               if(treeNodeFound == true)
131               {
132                  var childTreeLevel = tables[i].rows[0].cells.length;
133                  if(childTreeLevel > parentTreeLevel)
134                  {
135                     var
136                     cell = tables[i].rows[0].cells[childTreeLevel - 1];
137                     // set the checkbox to match the checkedState
138                     var inputs = cell.getElementsByTagName("INPUT");
139                     inputs[0].checked = checkedState;
140                  }
141                  else
142                  {
143                     // if any of the preceding TreeNodes are not deeper stop
144                     break;
145                  }
146               }
147               // end if
148            }
149            // end for
150         }
151         // end if - numTables >= 1
152         // if all child nodes are checked then their parent node is checked
153
154         if(treeNode.checked)
155         {
156            goDeeperChecked(obj);
157         }
158         // end if - checked
159      }
160      // end if - tagName = TABLE
161   }
162   // end if
163}
164// end function
165</script>

你可能会发现在Visual Studio 2005中onclick方法下边有一下划线，显示有错误，但是他仍可以正常执行。
文章来源http://forums.asp.net/1243475/ShowThread.aspx