Explication détaillée de l'utilisation du menu arborescent avec vérification et sélection en cascade

Cette fois, je vais vous apporter une explication détaillée de l'utilisation du menu arborescent avec sélection par chèque et sélection en cascade. Quelles sont les précautions à prendre pour utiliser le menu arborescent avec sélection par chèque et sélection en cascade Voici un cas pratique, jetons un oeil ? .

Le code spécifique est le suivant :

<p id="searchTree"></p> 
 <script>
  var treeData = [{
   text: "Parent 1",
   nodes: [{
    text: "Child 1",
    nodes: [{
     text: "Grandchild 1"
    }, {
     text: "Grandchild 2",
     nodes: [{
      text: "Grandchild 2-1",
      nodes: [{
       text: "Grandchild 2-1-1"
      }, {
       text: "Grandchild 2-2-1",
      }]
     }, {
      text: "Grandchild 1-2",
     }]
    }]
   }, {
    text: "Child 2",
    nodes: [{
     text: "Grandchild 2-1"
    }, {
     text: "Grandchild 2-2",
    }]
   }]
  }, {
   text: "Parent 2",
   id:'11111'
  }, {
   text: "Parent 3"
  }, {
   text: "Parent 4"
  }, {
   text: "Parent 5"
  }];
  var nodeCheckedSilent = false;
  function nodeChecked(event, node) {
   if (nodeCheckedSilent) {
    return;
   }
   nodeCheckedSilent = true;
   checkAllParent(node);
   checkAllSon(node);
   nodeCheckedSilent = false;
  }
  var nodeUncheckedSilent = false;
  function nodeUnchecked(event, node) {
   if (nodeUncheckedSilent)
    return;
   nodeUncheckedSilent = true;
   uncheckAllParent(node);
   uncheckAllSon(node);
   nodeUncheckedSilent = false;
  }
  //选中全部父节点 
  function checkAllParent(node) {
   $('#searchTree').treeview('checkNode', node.nodeId, {
    silent: true
   });
   var parentNode = $('#searchTree').treeview('getParent', node.nodeId);
   if (!("nodeId" in parentNode)) {
    return;
   } else {
    checkAllParent(parentNode);
   }
  }
  //取消全部父节点 
  function uncheckAllParent(node) {
   $('#searchTree').treeview('uncheckNode', node.nodeId, {
    silent: true
   });
   var siblings = $('#searchTree').treeview('getSiblings', node.nodeId);
   var parentNode = $('#searchTree').treeview('getParent', node.nodeId);
   if (!("nodeId" in parentNode)) {
    return;
   }
   var isAllUnchecked = true; //是否全部没选中 
   for (var i in siblings) {
    if (siblings[i].state.checked) {
     isAllUnchecked = false;
     break;
    }
   }
   if (isAllUnchecked) {
    uncheckAllParent(parentNode);
   }
  }
  //级联选中所有子节点 
  function checkAllSon(node) {
   $('#searchTree').treeview('checkNode', node.nodeId, {
    silent: true
   });
   if (node.nodes != null && node.nodes.length > 0) {
    for (var i in node.nodes) {
     checkAllSon(node.nodes[i]);
    }
   }
  }
  //级联取消所有子节点 
  function uncheckAllSon(node) {
   $('#searchTree').treeview('uncheckNode', node.nodeId, {
    silent: true
   });
   if (node.nodes != null && node.nodes.length > 0) {
    for (var i in node.nodes) {
     uncheckAllSon(node.nodes[i]);
    }
   }
  }
  $('#searchTree').treeview({
   showCheckbox: true,
   data: treeData,
   onNodeChecked: nodeChecked,
   onNodeUnchecked: nodeUnchecked
  });
  </script>

Je pense que vous maîtrisez la méthode après avoir lu le cas dans cet article. Pour des informations plus intéressantes, veuillez prêter attention aux autres. articles connexes sur le site Web PHP chinois !

Lecture recommandée :

Explication détaillée des étapes pour importer et utiliser les composants vue-cli

Utiliser JS pour manipuler les images uniquement pour laisser le noir et blanc

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!