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

原创 2007年10月11日 10:13:00

我的免费电影网站一:http://www.foxwow.com

我的免费电影网站二:http://www.91free.org

由于项目中要实现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 >

脚本实现CheckBox父选中,子全选中,子选中父也选中!

            字段                                          所有者                                标识       ...
  • Jason009
  • Jason009
  • 2006-06-23 11:39:00
  • 918

jstree checkbox选择所有子节点却不自动选择父节点

我用的是  jsTree 3.0.0
  • liu739
  • liu739
  • 2014-07-29 23:15:05
  • 5670

asp.net的Treeview的Checkbox选中父节点,选中全部子节点并且展开

  • 2012年07月17日 16:46
  • 3KB
  • 下载

TreeView中如何选中一个父节点同时选中所有的子节点和孙节点。。。

----------------------------------------------------------------------------Author:lihonggen0Date:20...
  • lang_csdn
  • lang_csdn
  • 2004-10-11 18:12:00
  • 1689

TreeView的子节点和父节点级联选中,遍历TreeView并查找和选定节点

TreeView的子节点和父节点级联选中 参考:(TreeView的子节点和父节点级联选中)http://blog.sina.com.cn/s/blog_56616d970100c483.html ...
  • cpcpc
  • cpcpc
  • 2011-12-05 16:50:02
  • 10541

TreeView的一些操作(选中子节点和父节点)

最近在asp.net中总是用到TreeView,有一些基本的操作,比如选中所有子节点,选中父节点之类的,每次用的时候都得找以前的代码段拷贝,挺烦的,现在就把这些放在这里,方便以后使用 ^_^ 1...
  • xwnxwn
  • xwnxwn
  • 2015-04-13 11:33:25
  • 2515

asp.net treeview选中父节点自动选中子节点

  • 2008年12月19日 17:21
  • 4KB
  • 下载

C#中TreeView选中父节点同时选中所有的子节点

TreeView 通常和CheckBoxs一起使用,显示并选择一些条目,特别是在等级分割的状态下,例如 当我选择一个父节点,希望该父节点下所有的子节点都被选中,取消一个节点,希望他所有的父节点都取...
  • gz_go
  • gz_go
  • 2015-08-30 22:00:07
  • 6984

TreeView的子节点和父节点级联选中

TreeView的子节点和父节点级联选中 参考:(TreeView的子节点和父节点级联选中)http://blog.sina.com.cn/s/blog_56616d970100c483.htm...
  • alex_0629
  • alex_0629
  • 2016-10-17 00:26:27
  • 1413

Treeview中checkbox选择问题

  • 2009年03月03日 12:02
  • 5KB
  • 下载
收藏助手
不良信息举报
您举报文章:ASP.NET 2.0 TreeView中用JavaScript实现选择子接点CheckBox是自动选择上父节点(或者所有父节点)
举报原因:
原因补充:

(最多只允许输入30个字)