此页面上的内容需要较新版本的 Adobe Flash Player。

获取 Adobe Flash Player

您现在的位置: 智可网 - 程序开发 - 微软开发专区 - .Net - .Net实例 - 正文
ASP.NET 2.0 Treeview Checkboxes - Check All -
教程录入:吴家声    责任编辑:446901797 作者:佚名 文章来源:本站原创

     ASP.Net 2.0 TreeVIEw has many built-in features such as showing a checkbox for all the Tree Nodes. Node level formating, style, etc., Enabling the ShowCheckBoxes="All" property sets it to show a checkbox for all the nodes. The other options are Leaf, None, Parent and Root which show checkboxes at the respective node levels. None doesnt display CheckBoxes.
  
  When we set ShowCheckBoxes="All", we would like to provide a feature where people can select the checkbox on the Root Node so that all the other checkboxes are checked automatically. Basically, when the parent node is checked, all the child nodes should be checked automatically.
  
  It would be intuitive to accomplish this task at the clIEnt side without involving a postback.
  
  The following code snippet helps in accomplishing the same.
  
  TreeVIEw Declaration
  
  <ASP:TreeView ID="TreeVIEw1" Runat="server" DataSourceID="XMLDataSource1" onclick="clIEnt_OnTreeNodeChecked();" 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>
  
  
  In the above TreeView declaration Code, you can find the property onclick="clIEnt_OnTreeNodeChecked();" event which actually is the JavaScript function which would accomplish this task.
  
  The Javascript Code snippet is as follows:-
  
  <script language="Javascript" type="text/Javascript">
  function clIEnt_OnTreeNodeChecked()
  {
  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");
  inputs[0].checked = checkedState;
  }
  else
  {
  return;
  }
  }
  }
  }
  }
  }
  </script>
  
  

分享
打赏我
打开支付宝"扫一扫" 打开微信"扫一扫"
客户端
"扫一扫"下载智可网App
意见反馈
ASP.NET 2.0 Treeview Checkboxes - Check All -
作者:佚名 来源:本站原创

     ASP.Net 2.0 TreeVIEw has many built-in features such as showing a checkbox for all the Tree Nodes. Node level formating, style, etc., Enabling the ShowCheckBoxes="All" property sets it to show a checkbox for all the nodes. The other options are Leaf, None, Parent and Root which show checkboxes at the respective node levels. None doesnt display CheckBoxes.
  
  When we set ShowCheckBoxes="All", we would like to provide a feature where people can select the checkbox on the Root Node so that all the other checkboxes are checked automatically. Basically, when the parent node is checked, all the child nodes should be checked automatically.
  
  It would be intuitive to accomplish this task at the clIEnt side without involving a postback.
  
  The following code snippet helps in accomplishing the same.
  
  TreeVIEw Declaration
  
  <ASP:TreeView ID="TreeVIEw1" Runat="server" DataSourceID="XMLDataSource1" onclick="clIEnt_OnTreeNodeChecked();" 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>
  
  
  In the above TreeView declaration Code, you can find the property onclick="clIEnt_OnTreeNodeChecked();" event which actually is the JavaScript function which would accomplish this task.
  
  The Javascript Code snippet is as follows:-
  
  <script language="Javascript" type="text/Javascript">
  function clIEnt_OnTreeNodeChecked()
  {
  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");
  inputs[0].checked = checkedState;
  }
  else
  {
  return;
  }
  }
  }
  }
  }
  }
  </script>