积极答复者
怎样用js实现单击父结点时子节点全部选中?

问题
答案
-
不好意思,拷贝的时候没拷贝好,变量出问题,现在改正,ie6-8,ff,opera,谷歌浏览器均支持
<%@ Page Language="C#"%> <script runat="server"> protected void Page_Load(object sender, EventArgs e) { TreeView1.Attributes.Add("onclick", "OnClientTreeNodeChecked(event)"); } protected void Button1_Click(object sender, EventArgs e) { foreach (TreeNode node in TreeView1.CheckedNodes) { Response.Write("<li>"+ node.Text); } } </script> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>客户端实现全选子节点</title> <script type="text/javascript" language="javascript"> //识别不同的浏览器 function getTargetElement(evt) { var elem if (evt.target) { elem = (evt.target.nodeType == 3) ? evt.target.parentNode : evt.target } else { elem = evt.srcElement } return elem } function OnClientTreeNodeChecked(evt) { evt = (evt) ? evt : ((window.event) ? window.event : "") if(evt == "") { return } var obj = getTargetElement(evt) var hasTreeNode = false var treeNodeChecked if (obj.tagName == "INPUT" && obj.type == "checkbox") { var treeNode = obj treeNodeChecked = treeNode.checked while (obj.tagName != "TABLE") { obj = obj.parentNode } var parentTreeLevel = obj.rows[0].cells.length var parentTreeNode = obj.rows[0].cells[0] var containerDiv = obj.parentNode if(containerDiv == null) { return } var tables = containerDiv.getElementsByTagName("TABLE") var tableCount = tables.length if(tableCount < 1) { return } for (i = 0; i < tableCount; i++) { if (tables[i] == obj) { hasTreeNode = true; i++; if (i == tableCount) { return; } } if (hasTreeNode) { 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 = treeNodeChecked; } else { return; } } } } } </script> </head> <body> <form id="form1" runat="server"> <asp:TreeView ID="TreeView1" runat="server" ShowLines="true" ShowCheckBoxes="All"> <Nodes> <asp:TreeNode Text="【孟子E章】站点一" SelectAction="SelectExpand"> <asp:TreeNode Text="ASP.NET技术"> <asp:TreeNode Text="缓存管理"/> <asp:TreeNode Text="状态管理" /> <asp:TreeNode Text="导航控件"> <asp:TreeNode Text="Menu 服务器控件" /> <asp:TreeNode Text="SiteMapPath 服务器控件" /> </asp:TreeNode> </asp:TreeNode> <asp:TreeNode Text="C#技术" /> </asp:TreeNode> <asp:TreeNode Text="【孟子E章】站点二" /> <asp:TreeNode Text="【孟子E章】站点三"> <asp:TreeNode Text="Web开发技术" /> <asp:TreeNode Text="Web脚本库" /> </asp:TreeNode> </Nodes> </asp:TreeView> <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="提交" /> </form> </body> </html>
孟宪会- 已编辑 孟宪会Moderator 2009年2月13日 3:36
- 已标记为答案 cnlearner 2009年2月13日 11:56
全部回复
-
那是很早之前的代码吧。现在的方法都没有以小写开头的。下面是一个完整的例子
<%@ Page Language="C#"%> <script runat="server"> protected void Page_Load(object sender, EventArgs e) { TreeView1.Attributes.Add("onclick", "OnClientTreeNodeChecked(event)"); } protected void Button1_Click(object sender, EventArgs e) { foreach (TreeNode node in TreeView1.CheckedNodes) { Response.Write("<li>"+ node.Text); } } </script> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>客户端实现全选子节点</title> <script type="text/javascript" language="javascript"> //识别不同的浏览器 function getTargetElement(evt) { var elem if (evt.target) { elem = (evt.target.nodeType == 3) ? evt.target.parentNode : evt.target } else { elem = evt.srcElement } return elem } function OnClientTreeNodeChecked(evt) { evt = (evt) ? evt : ((window.event) ? window.event : "") if(evt == "") { return } var obj = getTargetElement(evt) var hasTreeNode = false var treeNodeChecked if (obj.tagName == "INPUT" && obj.type == "checkbox") { var treeNode = obj treeNodetreeNodeChecked = treeNode.checked while (obj.tagName != "TABLE") { objobj = obj.parentNode } var parentTreeLevel = obj.rows[0].cells.length var parentTreeNode = obj.rows[0].cells[0] var containerDiv = obj.parentNode if(containerDiv == null) { return } var tables = containerDiv.getElementsByTagName("TABLE") var tableCount = tables.length if(tableCount < 1) { return } for (i = 0; i < tableCount; i++) { if (tables[i] == obj) { hasTreeNode = true; i++; if (i == tableCount) { return; } } if (hasTreeNode) { 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 = treeNodeChecked; } else { return; } } } } } </script> </head> <body> <form id="form1" runat="server"> <asp:TreeView ID="TreeView1" runat="server" ShowLines="true" ShowCheckBoxes="All"> <Nodes> <asp:TreeNode Text="【孟子E章】站点一" SelectAction="SelectExpand"> <asp:TreeNode Text="ASP.NET技术"> <asp:TreeNode Text="缓存管理"/> <asp:TreeNode Text="状态管理" /> <asp:TreeNode Text="导航控件"> <asp:TreeNode Text="Menu 服务器控件" /> <asp:TreeNode Text="SiteMapPath 服务器控件" /> </asp:TreeNode> </asp:TreeNode> <asp:TreeNode Text="C#技术" /> </asp:TreeNode> <asp:TreeNode Text="【孟子E章】站点二" /> <asp:TreeNode Text="【孟子E章】站点三"> <asp:TreeNode Text="Web开发技术" /> <asp:TreeNode Text="Web脚本库" /> </asp:TreeNode> </Nodes> </asp:TreeView> <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="提交" /> </form> </body> </html>
孟宪会 -
不好意思,拷贝的时候没拷贝好,变量出问题,现在改正,ie6-8,ff,opera,谷歌浏览器均支持
<%@ Page Language="C#"%> <script runat="server"> protected void Page_Load(object sender, EventArgs e) { TreeView1.Attributes.Add("onclick", "OnClientTreeNodeChecked(event)"); } protected void Button1_Click(object sender, EventArgs e) { foreach (TreeNode node in TreeView1.CheckedNodes) { Response.Write("<li>"+ node.Text); } } </script> <html xmlns="http://www.w3.org/1999/xhtml"> <head id="Head1" runat="server"> <title>客户端实现全选子节点</title> <script type="text/javascript" language="javascript"> //识别不同的浏览器 function getTargetElement(evt) { var elem if (evt.target) { elem = (evt.target.nodeType == 3) ? evt.target.parentNode : evt.target } else { elem = evt.srcElement } return elem } function OnClientTreeNodeChecked(evt) { evt = (evt) ? evt : ((window.event) ? window.event : "") if(evt == "") { return } var obj = getTargetElement(evt) var hasTreeNode = false var treeNodeChecked if (obj.tagName == "INPUT" && obj.type == "checkbox") { var treeNode = obj treeNodeChecked = treeNode.checked while (obj.tagName != "TABLE") { obj = obj.parentNode } var parentTreeLevel = obj.rows[0].cells.length var parentTreeNode = obj.rows[0].cells[0] var containerDiv = obj.parentNode if(containerDiv == null) { return } var tables = containerDiv.getElementsByTagName("TABLE") var tableCount = tables.length if(tableCount < 1) { return } for (i = 0; i < tableCount; i++) { if (tables[i] == obj) { hasTreeNode = true; i++; if (i == tableCount) { return; } } if (hasTreeNode) { 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 = treeNodeChecked; } else { return; } } } } } </script> </head> <body> <form id="form1" runat="server"> <asp:TreeView ID="TreeView1" runat="server" ShowLines="true" ShowCheckBoxes="All"> <Nodes> <asp:TreeNode Text="【孟子E章】站点一" SelectAction="SelectExpand"> <asp:TreeNode Text="ASP.NET技术"> <asp:TreeNode Text="缓存管理"/> <asp:TreeNode Text="状态管理" /> <asp:TreeNode Text="导航控件"> <asp:TreeNode Text="Menu 服务器控件" /> <asp:TreeNode Text="SiteMapPath 服务器控件" /> </asp:TreeNode> </asp:TreeNode> <asp:TreeNode Text="C#技术" /> </asp:TreeNode> <asp:TreeNode Text="【孟子E章】站点二" /> <asp:TreeNode Text="【孟子E章】站点三"> <asp:TreeNode Text="Web开发技术" /> <asp:TreeNode Text="Web脚本库" /> </asp:TreeNode> </Nodes> </asp:TreeView> <asp:Button ID="Button1" runat="server" OnClick="Button1_Click" Text="提交" /> </form> </body> </html>
孟宪会- 已编辑 孟宪会Moderator 2009年2月13日 3:36
- 已标记为答案 cnlearner 2009年2月13日 11:56