asp.net2.0的TreeView对checkbox的操作

转载自：http://blog.163.com/k_doll/blog/static/78450130200921453734942/

 

大家会在ASP.NET 2.0使用TreeView控件时发现带有CheckBox控件的TreeNode对象（TreeView节点），选择CheckBox无法回发页面。在MSDN中对于TreeView.TreeNodeCheckChanged事件有一段备注：“当 TreeView 控件的复选框在两次向服务器发送之间更改状态时，会引发 TreeNodeCheckChanged 事件。这使您可以提供一个这样的事件处理方法，即每次发生此事件时执行一个自定义例程（如更新数据库或显示的内容）。尽管 TreeNodeCheckChanged 事件在回发时激发，但更改复选框不会导致回发。”说明框架本身并不能提供一个CheckBox回发的机制，为了实现集联的选择，笔者实现了一种使用JavaScript去回发的方法，变相的解决了这个问题，尽管这样的方法看上去很不美，但是一定程度上能解决我们的实际问题。

 

大致思路，TreeNode对象输出的是一个附和的HTML对象（包括TD，A，InputCheckBox……），本身没有办法增加客户端脚本，所以为TreeView控件客户端的onclick事件中加入脚本，脚本目的：对于引发事件的对象都做判断，如果是InputCheckBox对象导致的事件，则直接调用__doPostBack来回发页面。至于后台代码就思路就简单了，递归选择相关节点，设置其Checked属性就好了。

 

下面的实例实现了，集联选择当前选中节点的所有子节点功能。

 

代码部分：
服务器端的方法：

treeview.js
 1 <script>
 2 
 3 function postBackByObject()
 4 
 5 {
 6 
 7     var o = window.event.srcElement;
 8 
 9     if (o.tagName == "INPUT" && o.type == "checkbox")
10 
11     {
12 
13        __doPostBack("","");
14 
15     } 
16 
17 }
18 
19</script>

 

treeview.aspx.cs
 1 protected void TreeView1_TreeNodeCheckChanged(object sender, TreeNodeEventArgs e)
 2     {
 3  if (e.Node.ChildNodes.Count > 0)
 4         {
 5             for (int i = 0; i < e.Node.ChildNodes.Count; i++)
 6             {
 7                 e.Node.ChildNodes[i].Checked = e.Node.Checked;
 8                 if (e.Node.ChildNodes[i].ChildNodes.Count > 0)
 9                 {
10                     for (int j = 0; j < e.Node.ChildNodes[i].ChildNodes.Count; j++)
11                     {
12                         e.Node.ChildNodes[i].ChildNodes[j].Checked = e.Node.ChildNodes[i].Checked;
13                     }
14                 }
15             }
16         }
17     }

 

客户端判断实现选中父节点同时选中子节点：
客户端的在treeview里加onclick=" ;"
客户端的方法：

treeview.js
 1  <script type="text/javascript" language="javascript">
 2 function OnTreeNodeChecked() 
 3         {
 4             var ele = window.event.srcElement; 
 5             if(ele.type=='checkbox') 
 6             { 
 7                 var childrenDivID = ele.id.replace('CheckBox','Nodes'); 
 8                 var div = document.getElementById(childrenDivID); 
 9                 if(div==null)return; 
10                 var checkBoxs = div.getElementsByTagName('INPUT'); 
11                 for(var i=0;i<checkBoxs.length;i++) 
12                 { 
13                     if(checkBoxs[i].type=='checkbox') 
14                         checkBoxs[i].checked=ele.checked; 
15                 } 
16             } 
17         }