ztree implémente le partage d'exemples de fonction d'affichage horizontal d'autorisation

Lorsque je travaillais récemment sur la fonction d'autorisation, j'ai utilisé ztree pour l'implémenter, mais le produit nécessite que la dernière couche de nœuds d'autorisation soit affichée horizontalement. Ci-dessous, l'éditeur partagera avec vous les idées d'implémentation pour implémenter la fonction d'affichage horizontal des autorisations basées sur ztree pour votre référence. J'espère que cela pourra vous aider.

Lorsque je travaillais récemment sur la fonction d'autorisation, j'ai utilisé ztree pour l'implémenter, mais le produit nécessite que la dernière couche de nœuds d'autorisation soit affichée horizontalement. La solution que j'ai commencé à rechercher en ligne consistait à utiliser des styles CSS pour définir l'affichage du dernier calque en ligne. Je l'ai vérifié sur mon ordinateur local. L'effet est bon.

Cependant, lorsque j'ai ensuite testé cette fonction sur un ordinateur portable d'il y a dix ans, j'ai trouvé une carte spéciale qui provoquait le crash du navigateur. Ainsi, l’optimisation des performances commence.

1. La synchronisation est modifiée en asynchrone. Bien qu'elle ne soit pas bloquée, la fonction n'est pas satisfaisante. De nombreuses personnes vérifient un nœud parent (nœud de module) et l'enregistrent pour le moment. tout, donc les données enregistrées sont Il y a un problème.

2. Définissez showIcon et showLine sur false et constatez que la vitesse s'est un peu améliorée, mais le produit n'est toujours pas satisfaisant.

3. Après une inspection minutieuse, les cases à cocher de ztree sont toutes simulées avec span et une image d'arrière-plan est créée. Intuitivement, je pense qu'il est préférable d'utiliser la case à cocher native que d'utiliser la simulation d'image. Faites-le, j'ai trouvé un exemple fourni par ztree, et après une légère modification, l'effet est toujours évident. La principale méthode utilisée est addDiyDom.

Publiez le code principal ci-dessous.

1. La structure de données nécessite un nœud isLeaf pour marquer s'il s'agit d'un nœud enfant.

var zNodes =[
      { id:1, pId:0, name:"父节点 1", open:true,isLeaf:false},
      { id:11, pId:1, name:"叶子节点 1-1",isLeaf:true},
      { id:12, pId:1, name:"叶子节点 1-2",open:true,isLeaf:false},
      { id:120, pId:12, name:"叶子节点 1-2-0",isLeaf:true},
      { id:121, pId:12, name:"叶子节点 1-2-1",isLeaf:true},
      { id:13, pId:1, name:"叶子节点 1-3",isLeaf:true},
      { id:2, pId:0, name:"父节点 2", open:true,isLeaf:false},
      { id:21, pId:2, name:"叶子节点 2-1",isLeaf:true},
      { id:22, pId:2, name:"叶子节点 2-2",isLeaf:true},
      { id:23, pId:2, name:"叶子节点 2-3",isLeaf:true},
      { id:3, pId:0, name:"父节点 3", open:true,isLeaf:false},
      { id:31, pId:3, name:"叶子节点 3-1",isLeaf:true},
      { id:32, pId:3, name:"叶子节点 3-2",isLeaf:true},
      { id:33, pId:3, name:"叶子节点 3-3",isLeaf:true}
    ];

2. Méthode addDiyDom

function addDiyDom(treeId, treeNode) {
      //console.log(treeNode);
      var aObj = $("#" + treeNode.tId + IDMark_A);
      var editStr = $("<input type=&#39;checkbox&#39; class=&#39;checkboxBtn&#39; id=&#39;checkbox_" +treeNode.id+ "&#39; onclick=&#39;checkedHandler(this)&#39; ></input>");
      editStr.data("treeNode",treeNode);
      aObj.before(editStr);
    
    }

3. 🎜>

function checkedHandler(checkbox){
      var $checkbox = $(checkbox),
        treeNode = $checkbox.data("treeNode"),
        state = checkbox.checked;
        if(treeNode.isLeaf){ //子节点
          if(state){ //子节点选中，父节点要跟着选中，子节点取消选择，父节点不用级联
            setParentNodeChecked(checkbox);
          }
        }else{ //父节点
          if(state){ //选中，级联子节点，级联父节点
            setParentNodeChecked(checkbox);
            setChildNodeChecked(checkbox);
          }else{
            setChildNodeChecked(checkbox);
          }
        }
    }
    /**设置父节点选中 */
    function setParentNodeChecked(checkbox){
      var $pNode = $(checkbox).closest("ul").parent();
      var pCheckbox = $pNode.find(".checkboxBtn").get(0);
      var treeNode = $(pCheckbox).data("treeNode");
      if(pCheckbox.checked === checkbox.checked) return;
      pCheckbox.checked = checkbox;
      if(treeNode.pId != "0") setParentNodeChecked(pCheckbox);
    }
    /**设置子节点选中 */
    function setChildNodeChecked(checkbox){
      $(checkbox).closest("li").find(".checkboxBtn").each(function(){
        this.checked = checkbox.checked;
      });
    }

4. En css, paramétrer :

.ztree li.isLeaf{
　　display:inline;
 }

Recommandations associées :

Exemple détaillé de jQuery EasyUI combiné avec la structure arborescente zTree pour créer une page Web

Chargement asynchrone ZTree et extension de l'implémentation de la méthode de nœud de premier niveau

Un exemple de la façon dont jQuery utilise le plug-in zTree pour implémenter la fonctionnalité glisser-déposer

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!