解决treeview的checkbox级联选择

以下代码实现了当TreeView节点包含CheckBox时保持其父子节点状态一致，即：当选中父节点，子节点会全部自动选上，反之则全部取消。选择某个子节点，同样应该选中这个字节点的父节点（包括祖先节点）。在网上也找了一些方法，但是我觉得这是TreeView的一个缺陷，因此应该在该控件内部实现，而不应该附加一些外部的js来控制TreeView，有什么问题可以给我留言，我及时更正: 先在后置cs文件里里添加：

1. protected void Page_Load(object sender, EventArgs e)
   
2. {
   
3.       // Load sample data only once, when the page is first loaded.
   
4.       if (!IsPostBack)
   
5.       {
   
6.             SampleTreeView.Attributes.Add("onClick","OnCheckEvent()");
   
7.       }
   
8. }
   

 

相关js:

1. <script language="javascript">
   
2.     //checkbox点击事件
   
3.     function OnCheckEvent()
   
4.     {
   
5.         var objNode = event.srcElement;
   
6.         if(objNode.tagName != "INPUT" || objNode.type != "checkbox")
   
7.             return;
   
8.         //获得当前树结点
   
9.         var ck_ID = objNode.getAttribute("ID");
   
10.         var node_ID = ck_ID.substring(0,ck_ID.indexOf("CheckBox")) + "Nodes";
    
11.         var curTreeNode = document.getElementById(node_ID);
    
12.         //级联选择
    
13.         SetChildCheckBox(curTreeNode,objNode.checked);
    
14.         SetParentCheckBox(objNode);
    
15.     }
    
16.    
    
17.     //子结点字符串
    
18.     var childIds = "";
    
19.     //获取子结点ID数组
    
20.     function GetChildIdArray(parentNode)
    
21.     {
    
22.         if (parentNode == null)
    
23.             return;
    
24.         var childNodes = parentNode.children;
    
25.         var count = childNodes.length;
    
26.         for(var i = 0;i < count;i ++)
    
27.         {
    
28.             var tmpNode = childNodes[i];
    
29.             if(tmpNode.tagName == "INPUT" && tmpNode.type == "checkbox")
    
30.             {
    
31.                 childIds = tmpNode.id + ":" + childIds;
    
32.             }
    
33.             GetChildIdArray(tmpNode);
    
34.         }
    
35.     }
    
36.    
    
37.     //设置子结点的checkbox
    
38.     function SetChildCheckBox(parentNode,checked)
    
39.     {
    
40.         if(parentNode == null)
    
41.             return;
    
42.         var childNodes = parentNode.children;
    
43.         var count = childNodes.length;
    
44.         for(var i = 0;i < count;i ++)
    
45.         {
    
46.             var tmpNode = childNodes[i];
    
47.             if(tmpNode.tagName == "INPUT" && tmpNode.type == "checkbox")
    
48.             {
    
49.                 tmpNode.checked = checked;
    
50.             }
    
51.             SetChildCheckBox(tmpNode,checked);
    
52.         }
    
53.     }
    
54.    
    
55.     //设置父结点的checkbox
    
56.     function SetParentCheckBox(childNode)
    
57.     {
    
58.         if(childNode == null)
    
59.             return;
    
60.         var parent = childNode.parentNode;
    
61.         if(parent == null || parent == "undefined")
    
62.             return;
    
63.         do
    
64.         {
    
65.         parent = parent.parentNode;
    
66.         }
    
67.         while (parent && parent.tagName != "DIV");
    
68.         if(parent == "undefined" || parent == null)
    
69.             return;
    
70.         var parentId = parent.getAttribute("ID");
    
71.         var objParent = document.getElementById(parentId);
    
72.         childIds = "";
    
73.         GetChildIdArray(objParent);
    
74.         //判断子结点状态
    
75.         childIds = childIds.substring(0,childIds.length - 1);
    
76.         var aryChild = childIds.split(":");
    
77.         var result = false;
    
78.         //当子结点的checkbox状态有一个为true，其父结点checkbox状态即为true,否则为false
    
79.         for(var i in aryChild)
    
80.         {
    
81.             var childCk = document.getElementById(aryChild[i]);
    
82.             if(childCk.checked)
    
83.                 result = true;
    
84.         }
    
85.         parentId = parentId.replace("Nodes","CheckBox");
    
86.         var parentCk = document.getElementById(parentId);
    
87.         if(parentCk == null)
    
88.             return;
    
89.         if(result)
    
90.             parentCk.checked = true;
    
91.         else
    
92.             parentCk.checked = false;
    
93.         SetParentCheckBox(parentCk);
    
94.     }
    
95.     </script>
    

 

以下是treeview的测试脚本：

1. <asp:TreeView id="SampleTreeView" runat="server" ShowCheckBoxes=All> 
   
2.         <Nodes>
   
3.           <asp:TreeNode Value="Home"
   
4.           NavigateUrl =""
   
5.             Text="Home"
   
6.             Target="Content"
   
7.             Expanded="True"
   
8.             SelectAction=SelectExpand>
   
9.            
   
10.             <asp:TreeNode Value="1"
    
11.               NavigateUrl=""
    
12.               Text="Page1"
    
13.               Target="Content">
    
14.                 <asp:TreeNode Value="2"
    
15.                               NavigateUrl=""
    
16.                               Text="Section 1"
    
17.                               Target="Content">
    
18.                     <asp:TreeNode Value="3"
    
19.                               NavigateUrl=""
    
20.                               Text="Section 1"
    
21.                               Target="Content"/>
    
22.                     <asp:TreeNode Value="4"
    
23.                               NavigateUrl=""
    
24.                               Text="Section 1"
    
25.                               Target="Content"/>
    
26.                 </asp:TreeNode>
    
27.                 <asp:TreeNode Value="5"
    
28.                               NavigateUrl=""
    
29.                               Text="Section 2"
    
30.                               Target="Content">
    
31.                 </asp:TreeNode>
    
32.             </asp:TreeNode>
    
33.            
    
34.               <asp:TreeNode Value="6"
    
35.                 NavigateUrl=""
    
36.                 Text="Page 2"
    
37.                 Target="Content">
    
38.                 <asp:TreeNode Value="7"
    
39.                               NavigateUrl=""
    
40.                               Text="Section 1"
    
41.                               Target="Content">
    
42.                 </asp:TreeNode>
    
43.                 <asp:TreeNode Value="8"
    
44.                               NavigateUrl=""
    
45.                               Text="Section 2"
    
46.                               Target="Content">
    
47.                 </asp:TreeNode>
    
48.               </asp:TreeNode>
    
49.           </asp:TreeNode>
    
50.         </Nodes>
    
51.       </asp:TreeView>