两个客户端操作TreeView节点CheckBox的小例子

最近在论坛上回答了一些关于客户端操作TreeView节点选中的问题,在网友提供的代码基础上做了两个例子。可惜原贴已经丢失了,整理一下写成文档吧
为了书写方便,这两个例子没有采用codebehind方式,复制即可运行

第一个例子是当取消或选中节点选中状态时,子节点也做相应的取消或选中变化
需要注意的是如果要初始设置TreeNode为选中状态,只能在客户端设置。如果在服务器端设置TreeNode为选中状态,则在客户端使用getAttribute("Checked"),得到的值永远是true。

1@ Register TagPrefix="iewc" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls,  Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" 
  1<html>
  2<head>
  3<script language="C#" runat="server">   
  4private void Page_Load(object sender, System.EventArgs e)   
  5{   
  6TreeView1.Attributes.Add("oncheck","tree_oncheck(this)");   
  7}   
  8</script>
  9<script language="javascript">   
 10<!--   
 11//初始化选中节点   
 12function initchecknode()   
 13{   
 14var node=TreeView1.getTreeNode("1");   
 15node.setAttribute("Checked","true");   
 16setcheck(node,"true");   
 17FindCheckedFromNode(TreeView1);   
 18}   
 19//oncheck事件   
 20function tree_oncheck(tree)   
 21{   
 22var node=tree.getTreeNode(tree.clickedNodeIndex);   
 23var Pchecked=tree.getTreeNode(tree.clickedNodeIndex).getAttribute("checked");   
 24setcheck(node,Pchecked);   
 25document.all.checked.value="";   
 26document.all.unchecked.value="";   
 27FindCheckedFromNode(TreeView1);   
 28}   
 29//设置子节点选中   
 30function setcheck(node,Pc)   
 31{   
 32var i;   
 33var ChildNode=new Array();   
 34ChildNode=node.getChildren();   
 35  
 36if(parseInt(ChildNode.length)==0)   
 37return;   
 38else   
 39{   
 40for(i=0;i<ChildNode.length;i++)   
 41{   
 42var cNode;   
 43cNode=ChildNode[i];   
 44if(parseInt(cNode.getChildren().length)!=0)   
 45setcheck(cNode,Pc);   
 46cNode.setAttribute("Checked",Pc);   
 47}   
 48}   
 49}   
 50//获取所有节点状态   
 51function FindCheckedFromNode(node) {   
 52var i = 0;   
 53var nodes = new Array();   
 54nodes = node.getChildren();   
 55  
 56for (i = 0; i < nodes.length; i++) {   
 57var cNode;   
 58cNode=nodes[i];   
 59if (cNode.getAttribute("Checked"))   
 60AddChecked(cNode);   
 61else   
 62AddUnChecked(cNode);   
 63  
 64if (parseInt(cNode.getChildren().length) != 0 ) {   
 65FindCheckedFromNode(cNode);   
 66}   
 67}   
 68}   
 69//添加选中节点   
 70function AddChecked(node) {   
 71document.all.checked.value += node.getAttribute("NodeData");   
 72document.all.checked.value += ',';   
 73}   
 74//添加未选中节点   
 75function AddUnChecked(node) {   
 76document.all.unchecked.value += node.getAttribute("NodeData");   
 77document.all.unchecked.value += ',';   
 78}   
 79//-->   
 80</script>
 81</head>
 82<body onload="initchecknode()">
 83<iewc:treeview expandlevel="5" id="TreeView1" runat="server">
 84<iewc:treenode checkbox="True" expanded="True" nodedata="0" text="Node0">
 85<iewc:treenode checkbox="True" expanded="True" nodedata="1" text="Node1"></iewc:treenode>
 86<iewc:treenode checkbox="True" expanded="True" nodedata="2" text="Node2">
 87<iewc:treenode checkbox="True" expanded="True" nodedata="3" text="Node3">
 88<iewc:treenode checkbox="True" expanded="True" nodedata="4" text="Node4"></iewc:treenode>
 89</iewc:treenode>
 90</iewc:treenode>
 91</iewc:treenode>
 92<iewc:treenode checkbox="True" expanded="True" nodedata="5" text="Node5">
 93<iewc:treenode checkbox="True" expanded="True" nodedata="6" text="Node6"></iewc:treenode>
 94</iewc:treenode>
 95<iewc:treenode checkbox="True" expanded="True" nodedata="7" text="Node7">
 96<iewc:treenode checkbox="True" expanded="True" nodedata="8" text="Node8">
 97<iewc:treenode checkbox="True" expanded="True" nodedata="9" text="Node9"></iewc:treenode>
 98</iewc:treenode>
 99</iewc:treenode>
100</iewc:treeview><p>
101<table border="1" cellpadding="1" cellspacing="1" id="Table1" width="300">
102<tr>
103<td>
104<asp:label id="Label1" runat="server">checked</asp:label></td>
105<td>
106<input id="checked" size="32" type="text"/></td>
107</tr>
108<tr>
109<td>
110<asp:label id="Label2" runat="server">unchecked</asp:label></td>
111<td><input id="unchecked" size="32" type="text"/></td>
112</tr>
113</table>
114<br/>
115</p>
116</body>
117</html>

第二个例子是关于如何在服务器端得到客户端设置后的节点选中状态

1@ Register TagPrefix="iewc" Namespace="Microsoft.Web.UI.WebControls" Assembly="Microsoft.Web.UI.WebControls, 
2
3Version=1.0.2.226, Culture=neutral, PublicKeyToken=31bf3856ad364e35" 
 1<html>
 2<head>
 3<script language="C#" runat="server">   
 4private void Button1_Click(object sender, System.EventArgs e)   
 5{   
 6Response.Write(TreeView1.Nodes[0].Checked);   
 7}   
 8</script>
 9<script language="javascript">   
10function set_check()   
11{   
12var nodeindex = "0";   
13var node=TreeView1.getTreeNode(nodeindex);   
14node.setAttribute("Checked","True");   
15TreeView1.queueEvent('oncheck', nodeindex);    
16}   
17</script>
18</head>
19<body>
20<form id="TestTree" method="post" runat="server">
21<iewc:treeview id="TreeView1" runat="server">
22<iewc:treenode checkbox="True" text="Node0"></iewc:treenode>
23</iewc:treeview>
24<br/>
25<input onclick="set_check()" type="button" value="set check"/>
26<br/>
27<asp:button id="Button1" onclick="Button1_Click" runat="server" text="submit"></asp:button>
28</form>
29</body>
30</html>
Published At
Categories with Web编程
Tagged with
comments powered by Disqus