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

TreeView+Checkbox级联操作

 

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

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

 

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

 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>

 

【运行效果】：