用js脚本控制asp.net下treeview的NodeCheck的实现代码

  增加CheckBox联动的情况选择:

  1.单选TreeView中的任一节点

  2.当一节点CheckBox属性值改变时:子节点的CheckBox属性值跟随其改动,父节点不变;

  父节点的所有子节点的CheckBox属性值都为false时才为false;有一个子节点的CheckBox属性值true时则为true.

  3.当一节点CheckBox属性值改变时:子节点、父节点的CheckBox属性值跟随其改动;

  父节点的所有子节点的CheckBox属性值都为false时才为false;有一个子节点的CheckBox属性值true时则为true.

  javascript代码

  

复制代码 代码如下:

  function OnTreeNodeChecked(id, type) {

  //获取触发事件的对象

  var element = window.event.srcElement;

  //如果对象不是checkbox则不处理

  if (!IsCheckBox(element))

  return;

  //获取checked状态

  var isChecked = element.checked;

  //获取tree对象

  var tree = TV2_GetTreeById(id);

  //获取element的相对结点(如果是叶结点,则就为element,否则为其<A>结点)

  var node = TV2_GetNode(tree, element);

  switch (type) {

  case "1":

  SetNodesUnChecked(tree);

  element.checked = true;

  break;

  case "2":

  TV2_SetChildNodesCheckStatus(node, isChecked);

  break;

  case "3":

  TV2_SetChildNodesCheckStatus(node, isChecked);

  var parent = TV2_GetParentNode(tree, node);

  TV2_NodeOnChildNodeCheckedChanged(tree, parent, isChecked);

  }

  }

  //set all nodes checkbox nochecked

  function SetNodesUnChecked(TreeNode) {

  var inputs = WebForm_GetElementsByTagName(TreeNode, "INPUT");

  if (inputs == null || inputs.length == 0)

  return;

  for (var i = 0; i < inputs.length; i++) {

  if (IsCheckBox(inputs[i]))

  inputs[i].checked = false;

  }

  }

  //set child nodes checkbox status

  function TV2_SetChildNodesCheckStatus(node, isChecked) {

  //返回当前node所在的div层

  var childNodes = TV2i_GetChildNodesDiv(node);

  if (childNodes == null)

  return;

  var inputs = WebForm_GetElementsByTagName(childNodes, "INPUT");

  if (inputs == null || inputs.length == 0)

  return;

  for (var i = 0; i < inputs.length; i++) {

  if (IsCheckBox(inputs[i]))

  inputs[i].checked = isChecked;

  }

  }

  //change parent node checkbox status after child node changed

  function TV2_NodeOnChildNodeCheckedChanged(tree, node, isChecked) {

  if (node == null)

  return;

  var childNodes = TV2_GetChildNodes(tree, node);

  if (childNodes == null || childNodes.length == 0)

  return;

  var isAllSame = true;

  for (var i = 0; i < childNodes.length; i++) {

  var item = childNodes[i];

  var value = TV2_NodeGetChecked(item);

  if (isChecked != value) {

  isAllSame = false;

  break;

  }

  }

  var parent = TV2_GetParentNode(tree, node);

  if (isAllSame) {

  TV2_NodeSetChecked(node, isChecked);

  TV2_NodeOnChildNodeCheckedChanged(tree, parent, isChecked);

  }

  else {

  TV2_NodeSetChecked(node, true);

  TV2_NodeOnChildNodeCheckedChanged(tree, parent, true);

  }

  }

  //get node relative element(etc. checkbox)

  function TV2_GetNode(tree, element) {

  var id = element.id.replace(tree.id, "");

  id = id.toLowerCase().replace(element.type, "");

  id = tree.id + id;

  var node = document.getElementById(id);

  if (node == null) //leaf node, no "A" node

  return element;

  return node;

  }

  //get parent node

  function TV2_GetParentNode(tree, node) {

  var div = WebForm_GetParentByTagName(node, "DIV");

  //The structure of node: <table>information of node</table><div>child nodes</div>

  var table = div.previousSibling;

  if (table == null)

  return null;

  return TV2i_GetNodeInElement(tree, table);

  }

  //get child nodes array

  function TV2_GetChildNodes(tree, node) {

  if (TV2_NodeIsLeaf(node))

  return null;

  var children = new Array();

  var div = TV2i_GetChildNodesDiv(node);

  var index = 0;

  for (var i = 0; i < div.childNodes.length; i++) {

  var element = div.childNodes[i];

  if (element.tagName != "TABLE")

  continue;

  var child = TV2i_GetNodeInElement(tree, element);

  if (child != null)

  children[index++] = child;

  }

  return children;

  }

  function TV2_NodeIsLeaf(node) {

  return !(node.tagName == "A"); //Todo

  }

  function TV2_NodeGetChecked(node) {

  var checkbox = TV2i_NodeGetCheckBox(node);

  return checkbox.checked;

  }

  function TV2_NodeSetChecked(node, isChecked) {

  var checkbox = TV2i_NodeGetCheckBox(node);

  if (checkbox != null)

  checkbox.checked = isChecked;

  }

  function IsCheckBox(element) {

  if (element == null)

  return false;

  return (element.tagName == "INPUT" && element.type.toLowerCase() == "checkbox");

  }

  //get tree

  function TV2_GetTreeById(id) {

  return document.getElementById(id);

  }

  //////////////////////////////////////////////////////////////////////////////////////////////

  //private mothods, with TV2i_ prefix

  //////////////////////////////////////////////////////////////////////////////////////////////

  //get div contains child nodes

  function TV2i_GetChildNodesDiv(node) {

  //如果node.tagName == "A"则不处理

  if (TV2_NodeIsLeaf(node))

  return null;

  var childNodsDivId = node.id + "Nodes";

  return document.getElementById(childNodsDivId);

  }

  //find node in element

  function TV2i_GetNodeInElement(tree, element) {

  var node = TV2i_GetNodeInElementA(tree, element);

  if (node == null) {

  node = TV2i_GetNodeInElementInput(tree, element);

  }

  return node;

  }

  //find "A" node

  function TV2i_GetNodeInElementA(tree, element) {

  var as = WebForm_GetElementsByTagName(element, "A");

  if (as == null || as.length == 0)

  return null;

  var regexp = new RegExp("^" + tree.id + "n\\d+$");

  for (var i = 0; i < as.length; i++) {

  if (as[i].id.match(regexp)) {

  return as[i];

  }

  }

  return null;

  }

  //find "INPUT" node

  function TV2i_GetNodeInElementInput(tree, element) {

  var as = WebForm_GetElementsByTagName(element, "INPUT");

  if (as == null || as.length == 0)

  return null;

  var regexp = new RegExp("^" + tree.id + "n\\d+");

  for (var i = 0; i < as.length; i++) {

  if (as[i].id.match(regexp)) {

  return as[i];

  }

  }

  return null;

  }

  //get checkbox of node

  function TV2i_NodeGetCheckBox(node) {

  if (IsCheckBox(node))

  return node;

  var id = node.id + "CheckBox";

  return document.getElementById(id);

  }

  html代码

  

复制代码 代码如下:

  <asp:TreeView ID="TreeView1" runat="server" ImageSet="Msdn" ShowCheckBoxes="All"

  ShowLines="True" BorderWidth="0px" Height="430px" Width="250px" Font-Size="Small"

  OnClick="OnTreeNodeChecked()">

  </asp:TreeView>