首页 新闻 会员 周边

TreeView+JQuery制作checkbox级联

0
[已解决问题] 解决于 2012-04-10 11:43

代码如下:

 1 $(function() {
2 $(":checkbox").click(function() {
3 SelectChildNode(this);
4 SelectParentNode(this);
5 });
6
7 function SelectChildNode(Node) {
8 var state = Node.checked;
9 var parentTable = $(Node).parents("table")[0];
10 var childDivs = $(parentTable).next("div");
11 if (childDivs.length > 0) {
12 var childDiv = childDivs[0];
13 $(childDiv).contents().find(":checkbox").each(function() {
14 this.checked = state;
15 });
16 }
17 }
18
19 function SelectParentNode(Node) {
20 var parentDiv = $(Node).parents("div")[0];
21 var parentTables = $(parentDiv).prev("table");
22 var state=null;
23 var state=Node.checked;
24 $(parentDiv).find(":checkbox").each(function(){
25 if(this.checked){
26 state=true;
27 }
28 else{
29 state=false;
30 return;
31 }
32 });
33
34 if (parentTables.length > 0) {
35 var parentTable = parentTables[0];
36 var parentCheckboxes = $(parentTable).find(":checkbox");
37 var parentCheckbox = parentCheckboxes[0];
38 parentCheckbox.checked = state;
39 }
40    }

问题:我的树状目录是带checkbox那种,想要达到的效果是:点击一个节点,改节点的所有父节点跟子节点都被选中,但是现在遇到一点问题,就是父节点下面有2个子节点,我点击第一个子节点的时候,父节点没反应,点击第二个子节点的时候是正常的;所以想请各位大侠帮忙看下上面这段代码哪里出错了。谢谢了

Mr.ch的主页 Mr.ch | 初学一级 | 园豆:6
提问于:2012-04-05 14:09
< >
分享
最佳答案
0

直接用我这个吧:

<script type="text/javascript">
  var getFocus = function (elem) {
  elem.select();
  }

  function OnTreeNodeChecked() {
  var element = element = window.event.srcElement;
  if (!IsCheckBox(element))
  return;
  var isChecked = element.checked;
  var tree = TV2_GetTreeById("tvwCategory");
  var node = TV2_GetNode(tree, element);
  TV2_SetChildNodesCheckStatus(node, isChecked);
  var parent = TV2_GetParentNode(tree, node);
  TV2_NodeOnChildNodeCheckedChanged(tree, parent, isChecked);
  }
  //set child nodes checkbox status
  function TV2_SetChildNodesCheckStatus(node, isChecked) {
  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, false);
  TV2_NodeOnChildNodeCheckedChanged(tree, parent, false);
  }
  }

  //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);
  }
  //get div contains child nodes
  function TV2i_GetChildNodesDiv(node) {
  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);
  }
  </script>

奖励园豆:5
悟行 | 专家六级 |园豆:12559 | 2012-04-05 15:37

谢谢啦,但是我想用JQ啊,能不能帮我看看那个怎么改啊?JS太长了。

Mr.ch | 园豆:6 (初学一级) | 2012-04-05 20:41
清除回答草稿
   您需要登录以后才能回答,未注册用户请先注册