JavaScript实现TreeView自带CheckBox级联
以下内容摘自网络，版权归原作者所有，本文旨在记录相关信息跟用法，方便自己查阅。
JavaScript：
1 function HandleCheckbox()
2 {
3 var element = event.srcElement;
4 if (element.tagName == "INPUT" && element.type == "checkbox"){
5 var checkedState = element.checked;
6 while (element.tagName != "TABLE"){ // Get wrapping table
7 element = element.parentElement;
8 }
9 var parentElement = element;
10
11 if(checkedState){
12 CheckParents(element);
13 }
14 element = element.nextSibling; //element.tagName = DIV
15
16 if (element != null){ // If no childrens then exit
17 var childTables = element.getElementsByTagName("TABLE");
18 for (var tableIndex = 0; tableIndex < childTables.length; tableIndex++){
19 CheckTable(childTables[tableIndex], checkedState);
20 }
21 }
22 if(checkedState == false){
23 UnCheckParents(parentElement);
24 }
25 }
26 }
27
28 // Uncheck the parents of the given table, Can remove the recurse (redundant)
29 function CheckParents(table){
30 if (table == null || table.rows[0].cells.length == 2) // This is the root
31 {
32 return;
33 }
34 var parentTable = table.parentElement.previousSibling;
35 CheckTable(parentTable, true);
36 CheckParents(parentTable);
37 }
38 // Check the parents of the given table, Can remove the recurse (redundant)
39 function UnCheckParents(table){
40 if (table == null || table.rows[0].cells.length == 2){ // This is the root
41 return;
42 }
43 var parentTable = table.parentElement.previousSibling;
44 var checkedCount =GetCheckedCount(table.parentElement);
45 if(checkedCount == 0){
46 CheckTable(parentTable, false);
47 }
48 UnCheckParents(parentTable);
49 }
50
51 // Handle the set of checkbox checked state
52 function CheckTable(table, checked) {
53 var checkboxIndex = table.rows[0].cells.length - 1;
54 var cell = table.rows[0].cells[checkboxIndex];
55 var checkboxes = cell.getElementsByTagName("INPUT");
56 if (checkboxes.length == 1){
57 checkboxes[0].checked = checked;
58 }
59
60 }
61 //Get checked children count
62 function GetCheckedCount(table){
63 var checkedCount = 0;
64 var element = table.nextSibling;
65 var childTable = table.getElementsByTagName("TABLE");
66
67 for(var tableIndex = 0;tableIndex < childTable.length; tableIndex++){
68 var childTables = childTable[tableIndex];
69 var checkboxIndex = childTables.rows[0].cells.length - 1;
70 var cell = childTables.rows[0].cells[checkboxIndex];
71 var checkboxes = cell.getElementsByTagName("INPUT");
72 if (checkboxes.length == 1 && checkboxes[0].checked == true){
73 checkedCount++;
74 }
75 }
76 return checkedCount;
77 }
调用时值需要在OnClientClick调用HandleCheckbox()；
以下是JQuery写法，但目前存在一个问题，就是A节点下有多个子节点，当点击第一个子节点时，A节点没有反应，点击其他节点可以实现父子节点的级联关系，这个问题还有待解决；
1 $(function(){
2 $(":checkbox").click(function() {
3 SelectChildNode(this);
4 SelectParentNode(this);
5 });
6
7 function SelectChildNode(Node) {
8 var state = Node.checked;
9 var parentTable = $(Node).parents("table")[0];
10 var childDivs = $(parentTable).next("div");
11 if (childDivs.length > 0) {
12 var childDiv = childDivs[0];
13 $(childDiv).contents().find(":checkbox").each(function() {
14 this.checked = state;
15 });
16 }
17 }
18
19 function SelectParentNode(Node) {
20 var parentDiv = $(Node).parents("div")[0];
21 var parentTables = $(parentDiv).prev("table");
22 //var state=null;
23 var state=Node.checked;
24 $(parentDiv).find(":checkbox").each(function(){
25 if(this.checked){
26 state=true;
27 }
28 else{
29 state=false;
30 return;
31 }
32 });
33
34 if (parentTables.length > 0) {
35 var parentTable = parentTables[0];
36 var parentCheckboxes = $(parentTable).find(":checkbox");
37 var parentCheckbox = parentCheckboxes[0];
38 parentCheckbox.checked = state;
39 }
40 }
41 });
浙公网安备 33010602011771号