07
2012
05

asp.net TreeView 节点的一些操作:选中所有子节点、同时选中所有父节点、相对与互斥

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

1. 选中所有子节点:

function OnTreeNodeChecked() 
        
{
            var ele 
= window.event.srcElement; 
            
if(ele.type=='checkbox'
            

                var childrenDivID 
= ele.id.replace('CheckBox','Nodes'); 
                var div 
= document.getElementById(childrenDivID); 
                
if(div==null)return
                var checkBoxs 
= div.getElementsByTagName('INPUT'); 
                
for(var i=0;i<checkBoxs.length;i++
                

                    
if(checkBoxs[i].type=='checkbox'
                        checkBoxs[i].
checked=ele.checked
                }
 
            }
 
        }

 
 
 2. 如果要选中子节点又同时选中所有父节点:
  

function getParentByTagName(element,tagName)
        
{
            var    parent 
= element.parentNode;
            var    upperTagName 
= tagName.toUpperCase();
            
while (parent && (parent.tagName.toUpperCase() != upperTagName))
            
{
                parent 
= parent.parentNode ? parent.parentNode : parent.parentElement;
            }

            
return parent;
        }


        function setParentChecked(objNode)
        
{
            var    objParentDiv 
= getParentByTagName(objNode,"div");
            
if(objParentDiv == null || objParentDiv == "undefined")
                
return;
            var    objID 
=    objParentDiv.getAttribute("ID");
            var    objParentCheckBox 
=    document.getElementById(objID.replace("Nodes","CheckBox"));
            
if(objParentCheckBox == null || objParentCheckBox    == "undefined")
                
return;
            
if(objParentCheckBox.tagName!="INPUT" && objParentCheckBox.type    == "checkbox")
                
return;
            objParentCheckBox.
checked =    true;
            setParentChecked(objParentCheckBox);
        }



        function setChildCheckedState(div,state)
        
{
            var    objchild 
= div.childNodes;
            var    count 
=    objchild.length;
            
for(var    i=0;i<objchild.length;i++)
            
{
                var    tempObj    
= objchild[i];
                
if(tempObj.tagName=="INPUT"    && tempObj.type    == "checkbox")
                
{
                    tempObj.
checked    = state;
                }

                setChildCheckedState(tempObj,state);
            }

        }

        function TreeNodeChecked()
        
{
            var    objNode    
= window.event.srcElement;
            
if(objNode.tagName!="INPUT"    || objNode.type!="checkbox")
                
return;
            
            
if(objNode.checked == true)
            
{
                setParentChecked(objNode);
            }

            var    objID 
=    objNode.getAttribute("ID");
            var    objParentDiv 
= document.getElementById(objID.replace("CheckBox","Nodes"));
            
if(objParentDiv==null || typeof(objParentDiv) == "undefined")
                
return;
            setChildCheckedState(objParentDiv,objNode.
checked);

        }


  后台的给treeview添加onclick事件处理:
 

m_Tree.Attributes.Add("onclick""TreeNodeChecked();");



3.每次只选中一个节点,相对与互斥,这个很好实现
 

function TreeNodeChecked()
{
  var objNode 
= window.event.srcElement;
  
if(objNode.tagName!="INPUT" || objNode.type !="checkbox")
  
return;
  
if(window.lastCheckNode != null)
  window.lastCheckNode.
checked = false;
  window.lastCheckNode 
= objNode;
}
« 上一篇下一篇 »

发表评论:

◎欢迎参与讨论,请在这里发表您的看法、交流您的观点。