ztree implementiert die Beispielfreigabe für die horizontale Anzeigefunktion mit Berechtigungen

Als ich kürzlich an der Berechtigungsfunktion gearbeitet habe, habe ich sie mit ztree implementiert, aber das Produkt erfordert, dass die letzte Ebene der Berechtigungsknoten horizontal angezeigt wird. Im Folgenden wird Ihnen der Herausgeber die Implementierungsideen für die horizontale Anzeigefunktion von Berechtigungen auf Basis von Ztree als Referenz mitteilen.

Als ich kürzlich an der Berechtigungsfunktion gearbeitet habe, habe ich sie mit ztree implementiert, aber das Produkt erfordert, dass die letzte Ebene der Berechtigungsknoten horizontal angezeigt wird. Die Lösung, nach der ich online suchte, bestand darin, CSS-Stile zu verwenden, um die Anzeige der letzten Ebene auf Inline einzustellen. Habe es auf meinem lokalen Computer überprüft. Die Wirkung ist gut.

Als ich diese Funktion jedoch später auf einem Laptop von vor zehn Jahren testete, fand ich eine spezielle Karte, die zum Absturz des Browsers führte. Die Leistungsoptimierung beginnt also.

1. Die Synchronisierung wird auf asynchron umgestellt, die Funktion ist jedoch nicht zufriedenstellend. Zu diesem Zeitpunkt sind keine untergeordneten Knoten vorhanden Alles, also sind die gespeicherten Daten Es liegt ein Problem vor.

2. Setzen Sie showIcon und showLine auf false und stellen Sie fest, dass sich die Geschwindigkeit etwas verbessert hat, das Produkt aber immer noch nicht zufriedenstellend ist.

3. Nach sorgfältiger Prüfung werden alle Kontrollkästchen von ztree mit span simuliert und ein Hintergrundbild erstellt. Intuitiv habe ich das Gefühl, dass die Verwendung des nativen Kontrollkästchens besser ist als die Verwendung der Bildsimulation. Machen Sie es einfach, ich habe ein Beispiel von ztree gefunden und nach einer geringfügigen Änderung ist der Effekt immer noch offensichtlich. Die hauptsächlich verwendete Methode ist addDiyDom.

Veröffentlichen Sie den Hauptcode unten.

1. Die Datenstruktur erfordert einen isLeaf-Knoten, um zu markieren, ob es sich um einen untergeordneten Knoten handelt.

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. addDiyDom-Methode

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. Mehrere von mir selbst geschriebene Kaskadenoperationen

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. In CSS Einstellung:

.ztree li.isLeaf{
　　display:inline;
 }

Verwandte Empfehlungen:

Detailliertes Beispiel für jQuery EasyUI in Kombination mit der zTree-Baumstruktur zum Erstellen einer Webseite

ZTree asynchrones Laden und Erweitern der Implementierung der Knotenmethode der ersten Ebene

Ein Beispiel dafür, wie jQuery das zTree-Plug-in verwendet, um Drag-and-Drop-Funktionalität zu implementieren

Das obige ist der detaillierte Inhalt vonztree implementiert die Beispielfreigabe für die horizontale Anzeigefunktion mit Berechtigungen. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!