Asp.Net 2.0 TreeView的Checkbox级联操作

最新推荐文章于 2025-11-24 03:12:01 发布

转载最新推荐文章于 2025-11-24 03:12:01 发布 · 976 阅读

文章标签：

#asp.net #tree #webform #null #function #javascript

ASP.NET专栏同时被 2 个专栏收录

102 篇文章

订阅专栏

JavaScript专栏

31 篇文章

订阅专栏

本文介绍如何实现 ASP.NET 2.0 中 TreeView 控件的级联选中功能，即当选择父节点时，其下所有子节点也会被自动选中。通过自定义 JavaScript 函数，可以实现对 CheckBox 的状态控制。

今天使用ASP.NET 2.0 的TreeView控件，要求每个节点都有CheckBox框，在选择父节点时，其下的全部子节点也选中。能过网络查询，再经过自己的分析修改，终于完成。现在测试用例，及所有JS文件分享。

直接在TreeView的属性上加入：OnClick="OnTreeNodeChecked(this)"

测试页面 test.aspx <html> <head runat="server"> <title>无标题页</title> <mce:script language="javascript" src="TreeView.js" mce_src="TreeView.js"></mce:script> <mce:script language =javascript type="text/javascript"></mce:script> </head> <body > <form id="form1" runat="server"> <div> <asp:TreeView ID="TreeView1" runat="server" ShowCheckBoxes="All" OnClick="OnTreeNodeChecked(this)" > <Nodes> <asp:TreeNode Text="新建节点" Value="新建节点"> <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode> <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode> </asp:TreeNode> <asp:TreeNode Text="新建节点" Value="新建节点"> <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode> <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode> </asp:TreeNode> <asp:TreeNode Text="新建节点" Value="新建节点"></asp:TreeNode> </Nodes> </asp:TreeView> </div> </form> </body> </html>

以下是完成级联选择的情况，脚本如下：

// TreeView.JS文件 /*************************************************************************************** Name: Client Javascript for ASP.NET 2.0 TreeView Description: ASP.NET 2.0 TreeView lack for client operation. This set of functions provide some supports. Includes: * get node * change checkbox status of parent and child nodes Author: Hebaokui Date: 2009-04-14 Commonts: ***************************************************************************************/ //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); } ////////////////////////////////////////////////////////////////////////////////////////////// //private mothods, with TV2i_ prefix ////////////////////////////////////////////////////////////////////////////////////////////// //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); }

有时候在子节点选择后，其父级节点也需要被选中，代码如下：

/*************************************************************************************** Name: Client Javascript for ASP.NET 2.0 TreeView Description: ASP.NET 2.0 TreeView lack for client operation. This set of functions provide some supports. Includes: * get node * change checkbox status of parent and child nodes Author: Hebaokui Date: 2009-04-14 Commonts: ***************************************************************************************/ //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 { if(isChecked) { 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) { 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); }