【原】TreeView+Checkbox级联操作（IE/FireFox测试通过）

TreeView+Checkbox级联操作

 

步骤1、前台页面拖放一个Treeview，将其ShowCheckBoxes属性设置为All

< asp:TreeView  ID ="tvCountry"  runat ="server"  ShowCheckBoxes ="All" >

 

步骤2、在后台代码中添加Treeview的特性，使得Treeview控件在单击时触发JavaScript实现的级联逻辑

代码

1  protected   void  Page_Load( object  sender, EventArgs e)
2  {
3       //  添加特性
4       // this.tvCountry.Attributes.Add("onclick", "Client_OnTreeNodeChecked(this)");    //  这样写只能IE中使用 
5       this .tvCountry.Attributes.Add( " onclick " ,  " Client_OnTreeNodeChecked(event) " );     //  这样写IE/FF都可以使用
6  }

 

步骤3、前台页面添加JavaScript代码

代码

 1  < script type = " text/javascript "  language = " javascript " >
 2  //  TreeView节点触发事件
 3  function  Client_OnTreeNodeChecked(evt){
 4     var  obj  =  getCurrentNode(evt);   //  根据浏览器判断事件
 5     var  treeNodeFound  =   false ;
 6     var  checkedState;
 7    
 8     if (obj.tagName  ==   " INPUT "   &&  obj.type  ==   " checkbox " ){
 9      checkedState  =  obj.checked;
10       var  curNode  =  getParentNode(obj);
11      changeNodeState(curNode,checkedState);
12    }
13  }
14 
15  //  根据浏览器判断事件
16  function  getCurrentNode(evt){
17     var  obj;
18 
19     if (window.event){ //  IE
20      obj  =  window.event.srcElement;
21    } else { //  FireFox
22      obj  =  (evt ? evt:(window.event ? window.event: null )).target;
23    }
24    
25     return  obj;
26  }
27 
28  //  取得父节点
29  function  getParentNode(node){
30     do {
31      node  =  node.parentNode;
32    } while (node.tagName != " TABLE " )
33     return  node;
34  }
35 
36  //  改变节点状态
37  function  changeNodeState(node,state){
38     //  根据nextSibling属性判断处于同一树层级中紧跟的元素
39     if (node.nextSibling  !=   null   &&  node.nextSibling.tagName  ==   " DIV " ){
40       var  cbArr  =  node.nextSibling.getElementsByTagName( " INPUT " );
41       for  ( var  i  =   0 ; i  <  cbArr.length; i ++ ){
42         if  (cbArr[i].type  ==   " checkbox " ){
43          cbArr[i].checked  =  state;
44        }
45      }
46    }
47    
48     var  flag  =   true ;
49     var  inputArr  =  node.parentNode.getElementsByTagName( " INPUT " );
50    
51     if (state){
52       for ( var  i = 0 ;i < inputArr.length;i ++ ){
53         if  (inputArr[i].type  ==   " checkbox "   &&   ! inputArr[i].checked){
54          flag  =   false ;
55        }
56      }
57    } else {
58      flag  =   true ;
59    }
60    
61     if (flag){
62       var  parentArr  =  node.parentNode.previousSibling.getElementsByTagName( " INPUT " );
63       for ( var  i = 0 ;i < parentArr.length;i ++ ){
64         if (parentArr[i].type  ==   " checkbox " ){
65          parentArr[i].checked  =  state;
66        }
67      }
68    }
69  }
70  < / script>

 

【运行效果】：

 

转载于:https://www.cnblogs.com/dajiang02/archive/2010/08/20/1804137.html