javascript 操作treeview 实现父子节点连选

TreeView控件应该说是比较常用的一个东东了.别人提供的JSTree实现(如Yahoo UI lIb) 都有这样或那样的问题而微软的TreeView控件虽然用起来方便,可是一直感觉也不是很理想.比如,无实通过属性设定为是否父子节点联选(既,选中父节点就选中所有子节点或孙节点,反之,全部取消选择了子节点父节点也要被取消选择).以前1.1的时候,可以用更改HtC的方法搞定.2.0下,JS是编在DLL里的,所以只能自己通过客户端JS搞定.

      
解决思路
      先说一下TreeView在IE中实现的结构,
      <Div   TreeViewID>
             <CheckBox  id = TreeViewID +  n +  节点次序/>
             <span  id=TreeViewID + t  + 节点次序">节点的Text</span>
             --如果有子节点
            <Div  ID = TreeViewID + n  + 节点次序 + Nodes>
                  同样的次序
            </Div>
     </Div>
    
    有了这个就好办了,先拦下TreeView的OnClick事件,判断事件源是不是CheckBox,如果是,就按这个次序寻根认祖, 再取设定子节点的状态, 如果是取消选定,还要判断一下是不是所有兄弟结点都被取消选定了,如果是这样,那也要取消父节点.

  后台拦下TreeView的OnClick事件很简单
       
 TreeViewID.Attributes.Add( " onclick " " HandleCheckEvent() " ); 



前台JS不多解释了,思路有了,看代码吧

     < script >
    
    
function  setParentState(objNode)
    
{
        
var objParentDiv = WebForm_GetParentByTagName(objNode,"div");
        
if(objParentDiv == null || objParentDiv == "undefined")
            
return;
            
        
var divID = objParentDiv.getAttribute("ID");
        
var prefix = divID.substring(0,divID.indexOf("Nodes"));
        
var parentID = prefix + "CheckBox";
        
        
var parentChk = document.getElementById(parentID);
        
if(parentChk == null || parentChk == "undefined")
            
return;

        
if (objNode.checked)
        
{
            parentChk.checked 
= true;
        }

        
else
        
{
            
if (isAllChildrenUnChecked(parentChk))
            
{
                parentChk.checked 
= false;
            }

        }

        
        
        setParentState(parentChk);
    }

    
    
function  setChildState(objNode) // 设定子控件状态
     {
        
var nodeID = objNode.getAttribute("ID");   //chkBox ID 
        var prefix = nodeID.substring(0,nodeID.indexOf("CheckBox"));  //节点的前缀
        var childrenDiv = document.getElementById(prefix + "Nodes");
        
        
if(childrenDiv == null || childrenDiv == "undefined")
            
return ;
             
        
var childrenArray = childrenDiv.children; //取得所有子控件

        
for(var i = 0;i< childrenArray.length;i++)
        
{
            
var container = childrenArray[i]; //子控件的容器
            var chk = WebForm_GetElementByTagName(container,"input"); //查找Check控件,由于只有一个种Input控件,就是CheckBox
            chk.checked = objNode.checked;
                   
            setChildState(chk);
                       
        }

            
    }

    
    
function  isAllChildrenUnChecked(objChk)
    
{
        
var objChkID = objChk.getAttribute("ID");
        
var prefix = objChkID.substring(0,objChkID.indexOf("CheckBox"));  //节点的前缀
        var childrenDiv = document.getElementById(prefix + "Nodes");
        
         
if(childrenDiv == null || childrenDiv == "undefined")
            
return ;
            
        
var childrenArray = childrenDiv.children; //取得所有子控件
        
        
for(var i = 0;i< childrenArray.length;i++)
        
{
            
var container = childrenArray[i]; //子控件的容器
            var chk = WebForm_GetElementByTagName(container,"input"); //查找Check控件,由于只有一个种Input控件,就是CheckBox
           
            
if (chk.checked)
                
return false;
                       
        }

        
        
return true;
    }

    

    
// 触发事件
     function  HandleCheckEvent()
    
{

        
var objNode = event.srcElement; 

        
if(objNode.tagName !="INPUT" || objNode.type!="checkbox")
            
return;
         
         
//设定子Chk状态
        setChildState(objNode);
        
//设定父Chk状态
        setParentState(objNode);

      
    }




    
</ script >
 

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值