首页 > 代码库 > 脚本全选全不选操作asp.net treeview控件

脚本全选全不选操作asp.net treeview控件

  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控件