TreeView控件的CheckBox级联选中或取消

背景：

在一个项目开发中遇到这样的要求：当选中树中一个节点时，需要同时选中其父节点，直至根节点。在取消一个节点的选中时，需要将其所有子节点取消选中，直至叶子节点。由于项目用户体验暂时可以不用考虑，直接想到用TreeView的TreeNodeCheckChanged事件，但是运行时发现一个问题，当改变一个节点的CheckBox的选中状态时，不会触发TreeNodeCheckChanged事件，只有在点击了某一个节点的文本后在触发一系列的事件。因此这条路行不通了，只好另寻其它方法了。

 

实现方法：

直接使用事件的方法不可行，那直接想到的方法是通过脚本实现，结合网络资源和业务要求整理了如下js脚本。

 1         function postBackByObject() {
 2             var element = window.event.srcElement;
 3             if (element.tagName == "INPUT" && element.type == "checkbox") {
 4                 var checkedState = element.checked;
 5                 if (checkedState) {
 6                     while (element.tagName != "TABLE")
 7                         element = element.parentElement;
 8                     CheckWithParent(element);
 9                 }
10                 else {
11                     while (element.tagName != "TABLE")
12                         element = element.parentElement;
13                     UnCheckWithChilds(element);
14                 }
15             }
16         }
17         //取消节点及其子节点（直至叶子节点）的选中状态。
18         function UnCheckWithChilds(table) {
19             if (table != null) {
20                 Check(table, false);
21                 var childDiv = table.nextSibling;
22                 if (childDiv != null) {
23                     if (childDiv.tagName == "DIV") {
24                         var childs = childDiv.getElementsByTagName("table");
25                         for (var i = 0; i < childs.length; i++) {
26                             UnCheckWithChilds(childs[i]);
27                         }
28                     }
29                 }
30             }
31         }
32         //选中节点及其父节点（直至根节点）。
33         //注：TreeView1 为TreeView控件的ID。
34         function CheckWithParent(table) {
35             if (table != null) {
36                 Check(table, true);
37                 var parentDiv = table.parentElement;
38                 if (parentDiv.id == "TreeView1") {
39                     return;
40                 }
41                 else {
42                     var parentTable = parentDiv.previousSibling;
43                     CheckWithParent(parentTable);
44                 }
45             }
46         }
47         //修改节点的CheckBox状态。
48         function Check(table, checked) {
49             if (table != null) {
50                 var checkboxIndex = table.rows[0].cells.length - 1;
51                 var cell = table.rows[0].cells[checkboxIndex];
52                 var checkboxes = cell.getElementsByTagName("INPUT");
53                 if (checkboxes.length == 1)
54                     checkboxes[0].checked = checked;
55             }
56         }

View Code

 

转载于:https://www.cnblogs.com/chenguoxingblog/p/3455668.html