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>