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 >