javascript 操作treeview的checkbox加载、全选、全不选、以及光标回焦问题

原创 2007年09月15日 09:49:00

 

 

//在页面加载中:onLoad="Loadtreeview()";
//服务器端加载时注册treeview的check的事件: TreeView1.Attributes.Add("oncheck","tree_oncheck(TreeView1)");


<script language="javascript">
   function Loadtreeview() 
//加载树形
   ...{
    var AllRootNode
=new Array();
    AllRootNode
=document.getElementById("TreeView1").getChildren();//获得treview的最外层节点数组
    CheckboxLoad(AllRootNode);  //加载checkbox的控件
    var selectedNodes = GetnodeID(AllRootNode);//获得被checked的nodes的ID连加字符串
    
// window.alert(selectedNodes);
    var arrayNodes = new Array();
    arrayNodes 
= selectedNodes.split(",");
    
//window.alert(gg);
    findAndCheckedNodes(AllRootNode,arrayNodes);//加载时判断checkbox的是否有被checked,有的话把它

设置成勾住状态
   }


   function tree_oncheck(TreeView1)
//treeview的check的事件
   ...{        
    var AllRootNode
=new Array();
    AllRootNode
=document.getElementById("TreeView1").getChildren();  
    var node
=TreeView1.getTreeNode(TreeView1.clickedNodeIndex); //获得刚刚被check的节点
    var child="";
    child
=node.getAttribute("id");//获得刚刚被check的节点的ID
    Select(AllRootNode,child);  //实现光标回焦方法
    var Pchecked=TreeView1.getTreeNode(TreeView1.clickedNodeIndex).getAttribute("checked");
    setcheck(node,Pchecked); 
//实现checked节点的下面判断是否有子节点有的话,全部实现把子节点给勾

上或全部不勾
          
/**//*之后的其他操作自己添写,比如check触发的方法、事件啊等等*/             
   }

     
   function Select(NodeArray,nodeid)   
//光标回焦方法
   ...{

     
if(parseInt(NodeArray.length)==0)
               
return;
     
else
     
...{
      
for(var i=0;i< parseInt(NodeArray.length);i++)
      
...{
                   
       var cNode;
       cNode
=NodeArray[i];
        
if (cNode.getAttribute("id")==nodeid)
        
...{
        TreeView1.selectedNodeIndex 
= cNode.getNodeIndex();
        
break;
        }


       
//如果有子节点,则继续递归
       if(parseInt(cNode.getChildren().length)!=0)
       Select(cNode.getChildren(),nodeid);   
      }

                   
     }


   }


  
            function setcheck(node,Pc) 
//设置子节点选中
            ...{
                
                var ChildNode
=new Array();
                ChildNode
=node.getChildren();
                 
                
if(parseInt(ChildNode.length)==0)
                    
return;
                
else
                
...{
                    
for(var i=0;i<ChildNode.length;i++)
                    
...{
                        var cNode;
                        cNode
=ChildNode[i];
                        
if(parseInt(cNode.getChildren().length)!=0)
                            setcheck(cNode,Pc);
                        cNode.setAttribute(
"checked",Pc);
                    }

                }

            }

   
   function GetnodeID(NodeArray) 
//找到被选中节点的所有ID的字符串累加
   ...{

            var str 
= "";
           
if(parseInt(NodeArray.length)==0)
                 
return;
   
else
   
...{
    var cNode;
    
for(var i=0;i<parseInt(NodeArray.length);i++)
    
...{
     cNode
=NodeArray[i];
     
if (cNode.getAttribute("Checked")==true)
     
...
      str 
= str + cNode.getAttribute("id")+",";
     }

     
//如果有子节点,则继续递归
     if(parseInt(cNode.getChildren().length)!=0)
     GetnodeID(cNode.getChildren()); 
    }

                 
   }


        
return  str;
    }

 function CheckboxLoad(NodeArray)  
//checkbox的初始化
 ...{
       
if(parseInt(NodeArray.length)==0)
             
return;
        
else
        
...{
            
for(var i=0;i<parseInt(NodeArray.length);i++)
            
...{
                    
                var cNode;
                cNode
=NodeArray[i];
                
                cNode.setAttribute(
"checkbox","true");
        
                
//如果有子节点,则继续递归
                if(parseInt(cNode.getChildren().length)!=0)
                CheckboxLoad(cNode.getChildren()); 
            }

                
        }

 }

 
   function findAndCheckedNodes(NodeArray,nodeDatas)  
//找到已经被checked的节点
     ...{
      
if(parseInt(NodeArray.length)==0)
      
...{
       
return;
      }

      
else
      
...{
       
for(var i=0;i<parseInt(NodeArray.length);i++)
       
...{
        var cNode,nodeData;
        cNode
=NodeArray[i];
        
/**/////如果该节点在nodeDatas里则初始化checked = true;
        nodeData = cNode.getAttribute("id");
        
for(var j=0;j<parseInt(nodeDatas.length);j++)
        
...{
         
if(nodeDatas[j] == nodeData)
         
...{
          cNode.setAttribute(
"checked","true");
          
break;
         }

        }

        
//如果有子节点,则继续递归
        if(parseInt(cNode.getChildren().length)!=0)
        findAndCheckedNodes(cNode.getChildren(),nodeDatas);    
       }

      }

     }

    
</script>
版权声明:本文为博主原创文章,未经博主允许不得转载。

bootstrap-Treeview实现级联勾选

bootstrap-treeview插件默认不支持级联勾选的,想要实现那就要自己动手了
  • jiang_2992
  • jiang_2992
  • 2017年03月14日 14:00
  • 7491

为DataGridView 添加复选框,实现全选功能

原文链接:http://www.codeproject.com/Articles/42437/Toggling-the-States-of-all-CheckBoxes-Inside-a-Dat 1...
  • dathesea
  • dathesea
  • 2014年03月25日 15:05
  • 3478

js写全选按钮、全不选按钮、反选按钮、全选全不选复选框代码

今天主要给大家介绍下如何用js原生代码写出全选、全不选、反选按钮。代码如下: Document 你的呢爱好很广泛!! 全选/全不选 足球 篮球 游泳 唱歌 ...
  • sinat_21206105
  • sinat_21206105
  • 2016年09月01日 21:13
  • 8085

javascript checkbox作为开关,控制全选和全不选的动态关联实现

如你所知如果使用一个checkbox作为一组checkbox的总开关的话。那么,总开关的逻辑当然是:在当前全部选中的情况下,点击总开关,就会全部不选中;否则,就全部选中。 另外,当被控制的子check...
  • DucklikeJAVA
  • DucklikeJAVA
  • 2016年09月17日 14:21
  • 1000

用Javascript实现checkbox全选、全不选

用Javascript实现checkbox全选、全不选
  • zclhlmgqzc
  • zclhlmgqzc
  • 2017年04月16日 11:50
  • 244

新手学JavaScript(四)----CheckBox全选与全不选

在这给大家推荐一款比较不错的纯CSS实现的CheckBox–CSSCheckBox,用bootstrap里面自带的checkbox和radio样式不太美观,所以就另找了一个插件,这里大家可能会有疑问,...
  • u010853701
  • u010853701
  • 2016年01月27日 21:01
  • 2082

jquert结合原生javascript实现的checkbox全选与全不选

之所以要使用原生javascript,是因为jQuery的attr方法在这里不能实现,具体是怎么样的,我也不知道。 html代码: 全部选定 全部取消 javascript代码: 得保...
  • qq_15057161
  • qq_15057161
  • 2015年06月22日 16:56
  • 148

jquery操作checkbox方法(全选、全不选、至少选择一个、选择值/文本)

在实际开发中我们经常操作checkbox,不仅仅要获得checkbox选中的值,还有获得选中的文本,以下给出demo,使用jquery方法操作checkbox demo: ...
  • u014079773
  • u014079773
  • 2016年08月30日 17:33
  • 2776

【JavaScript】JavaScript中的checkbox之全选、全不选、反选

JavaWeb中很常见的一种功能是checkbox的选择问题。下面是功能展示图: 代码部分: Untitled Document 请选择您的爱好!...
  • mrlin6688
  • mrlin6688
  • 2016年03月26日 20:50
  • 389

checkbox切换全选与全不选

  • 2012年09月25日 23:59
  • 1KB
  • 下载
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:javascript 操作treeview的checkbox加载、全选、全不选、以及光标回焦问题
举报原因:
原因补充:

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