ASP.NET 2.0 TreeView中用JavaScript实现选择子接点CheckBox是自动选择上父节点(或者所有父节点)

由于项目中要实现TreeView中 选择子接点CheckBox是自动选择上父节点(或者所有父节点)功能,当然如何使用后台方法的话,很好实现,但是这样给用户的体验是很差的。每选择一次，就会想服务器提交一会,带来平凡刷新页面. 所以我想用JS(Javascript)来实现.找网络上寻求了很没有找到线索,很多都提供的服务端的实现方法。后来通过查看TreeView在客户端生成的原代码,分析了半天从记录的数据库来看,没有找到什么父节点子节点的关系.看来asp.net是把这个关系放在ViewState里面的.我只好另外想办法,就当我要放弃的时候,发现可以通过控件的层次关系来实现:当选者某个CheckBox节点时候,她到父接点CheckBox的控件有固定的层次关系，于我写了下面的Javascript代码实现了这个功能. 该代码在IE6,IE7,Firfox上测试通过:

javascript 方法:

// 用Treeview chekbox节点自动选择父节点的处理事件
function  AutoSelectParentNode(obj)
{
    if (obj.checked)
   {
     var  p = obj.parentNode.parentNode.parentNode.parentNode.parentNode;
     var  pCheckNodeID = p.id.replace( " Nodes " , " CheckBox " );
     var  checkNode = document.getElementById(pCheckNodeID);
     if (checkNode)
    { 
      checkNode.click(); // 如果不需要选中所有父节点的话（如父的父等）把本行代码去掉及可
      checkNode.checked = true ;
    }
   }
}
// 用于给TreeView的 chebox添加 自动选择父节点的处理事件(如果要将某一TreeView变为自动选择父节点 只需调用下面方法)
function  SetTreeNodeAutoSelectParentNodeHandle(treeID)
{
     var  objs  =  document.getElementsByTagName( " input " );
     for ( var  i = 0 ;i < objs.length;i ++ )
    {
         if (objs[i].type == ' checkbox ' )
        {
             var  obj = objs[i];
             if (obj.id.indexOf(treeID) !=- 1 )
            {
                objs[i].onclick = function (){AutoSelectParentNode( this );};
            }
        }
    }
}

 

方法AutoSelectParentNode选则CheckBox接点时的处理方法.

方法SetTreeNodeAutoSelectParentNodeHandle为TreeView注册TreeView选择事件.

使用例子如下:

 

                 < div style = " width:500px; height:450px; overflow:auto " >
                 < asp:TreeView runat = " server "  ID = " tvAssetKindTree "  ExpandDepth = " 0 "  ShowCheckBoxes = " All "  ShowLines = " True "  ExpandImageToolTip = "" ></ asp:TreeView >
                 </ div >
                 < script type = " text/javascript "  language = " javascript " >
                SetTreeNodeAutoSelectParentNodeHandle( " <%=tvAssetKindTree.ClientID%> " );
                 </ script >