指令碼全選全不選操作asp.net treeview控制項

標籤：style   blog   color   io   ar   for   sp   div   on   

  1 //樹節點勾選（取消）上級自動全部勾選（取消）下級，勾選下級自動勾選上級，取消全部下級，自動取消上級  2   3          //事件響應函數  4          var HandleCheckbox = function () {  5              //取得事件觸發的元素，因為只要點了樹控制項，就會觸發這個函數，所以須判斷：只有點擊checkbox時才繼續  6              var element = event.srcElement;  7              if (element.tagName == "INPUT" && element.type == "checkbox") {  8                  var checkedState = element.checked;  9                  //取到checkbox的上級table。微軟TreeView樹是以每個同級節點以一個div包裹一個table再包裹input形式存在的 10                  while (element.tagName != "TABLE") { 11                      element = element.parentElement; 12                  } 13                  var parentElement = element; 14  15                  //如果checkbox被選中的話，要判斷父級checkbox是否應該被自動選中 16                  if (checkedState) { 17                      CheckParents(element); 18                  } 19  20                  //取到元素的父級元素的同一層級的後面的元素 21                  element = element.nextSibling; 22  23                  if (element != null) { 24                      var childTables = element.getElementsByTagName("TABLE"); 25  26                      for (var tableIndex = 0; tableIndex < childTables.length; tableIndex++) { 27                          CheckTable(childTables[tableIndex], checkedState); 28                      } 29                  } 30                  if (checkedState == false) { 31                      UnCheckParents(parentElement); 32                  } 33  34              } 35          } 36          //判斷並勾選父級checkbox 37          function CheckParents(table) { 38              //首先判斷元素有沒有checkbox，table的列為三即有為二就沒有 39              if (table == null || table.rows[0].cells.length == 2) // This is the root  40              { 41                  return; 42              } 43              //取到元素的父級元素的同一層級的前面的元素 44              var parentTable = table.parentElement.previousSibling; 45              var checkedCount = GetCheckedCount(table.parentElement); 46              var childCount = GetChildrenCount(table.parentElement); 47              if (checkedCount == childCount) { 48                  //勾選父級元素 49                  CheckTable(parentTable, true); 50              } 51              //迭代函數 52              CheckParents(parentTable); 53          } 54  55          //判斷並取消父級checkbox  56          function UnCheckParents(table) { 57  58              if (table == null || table.rows[0].cells.length == 2) // This is the root   59              { 60                  return; 61              } 62              var parentTable = table.parentElement.previousSibling; 63              //判斷子節點的選中個數 64              //判斷子節點的選中個數 65              var checkedCount = GetCheckedCount(table.parentElement); 66              var childCount = GetChildrenCount(table.parentElement); 67              if (checkedCount < childCount) { 68                  CheckTable(parentTable, false); 69              } 70              //迭代 71              UnCheckParents(parentTable); 72          } 73  74          // 勾選或取消checkbox                                    75          function CheckTable(table, checked) { 76              //以保證取到table的行的最後一列（TreeView解壓出來是將input放在table行的最後一列） 77              var checkboxIndex = table.rows[0].cells.length - 1; 78              var cell = table.rows[0].cells[checkboxIndex]; 79              //取到checkbox 80              var checkboxes = cell.getElementsByTagName("INPUT"); 81              if (checkboxes.length == 1) { 82                  checkboxes[0].checked = checked; 83              } 84  85          } 86  87          //判斷子節點個數 88          function GetChildrenCount(table) { 89              var checkedCount = 0; 90              var element = table.nextSibling; 91              var childTable = table.getElementsByTagName("TABLE"); 92  93              for (var tableIndex = 0; tableIndex < childTable.length; tableIndex++) { 94                  var childTables = childTable[tableIndex]; 95                  var checkboxIndex = childTables.rows[0].cells.length - 1; 96                  var cell = childTables.rows[0].cells[checkboxIndex]; 97                  var checkboxes = cell.getElementsByTagName("INPUT"); 98                  if (checkboxes.length == 1) { 99                      checkedCount++;100                  }101              }102              return checkedCount;103          }           104          //判斷子節點的選中個數105          function GetCheckedCount(table) {106              var checkedCount = 0;107              var element = table.nextSibling;108              var childTable = table.getElementsByTagName("TABLE");109 110              for (var tableIndex = 0; tableIndex < childTable.length; tableIndex++) {111                  var childTables = childTable[tableIndex];112                  var checkboxIndex = childTables.rows[0].cells.length - 1;113                  var cell = childTables.rows[0].cells[checkboxIndex];114                  var checkboxes = cell.getElementsByTagName("INPUT");115                  if (checkboxes.length == 1 && checkboxes[0].checked == true) {116                      checkedCount++;117                  }118              }119              return checkedCount;120          }     

調用的時候直接調用

HandleCheckbox就可以了

指令碼全選全不選操作asp.net treeview控制項