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

大家会在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里加οnclick=" ;"
客户端的方法：

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          }