So verwenden Sie jquery ztree-Front-End-Fragen und Antworten-php.cn

So verwenden Sie jquery ztree

PHPz

Freigeben： 2023-04-26 10:50:06

Original

717 Leute haben es durchsucht

JQuery zTree ist ein auf JQuery basierendes Baumsteuerelement. Es ist einfach zu verwenden, flexibel, effizient und hochkompatibel. Es ist eines der unverzichtbaren Tools in der Webentwicklung. In diesem Artikel werden Ihnen die Tutorials zur Verwendung von jQuery zTree im Detail vorgestellt, einschließlich Installation, Initialisierung, Konfiguration, Ereignisse usw., damit Sie dieses leistungsstarke Tool besser nutzen können.

1. Installation

Um das jQuery zTree-Steuerelement verwenden zu können, müssen Sie zunächst die entsprechenden JS- und CSS-Dateien einführen. Die neueste Version der Datei kann von der offiziellen Website von zTree (http://www.ztree.me) heruntergeladen oder von einigen häufig verwendeten CDNs (z. B. https://cdn.bootcss.com) bezogen werden. Im Folgenden finden Sie den Code zum Importieren von CSS- und JS-Dateien:

<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>zTree Demo</title>
    <link rel="stylesheet" href="https://cdn.bootcss.com/zTree.v3.5.35/zTreeStyle/zTreeStyle.min.css">
</head>
<body>
    <!--页面内容-->
    <script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/zTree.v3.5.35/jquery.ztree.all.min.js"></script>
    <script>
        //JS代码
    </script>
</body>
</html>

Nach dem Login kopieren

2. Initialisierung

Wenn die Dateien erfolgreich importiert wurden, können Sie mit der Verwendung des zTree-Steuerelements beginnen. Um das zTree-Steuerelement zu initialisieren, müssen Sie die zTree-Funktion aufrufen und einige Parameter übergeben, um die Eigenschaften des Steuerelements zu konfigurieren, wie zum Beispiel den folgenden Code:

$(document).ready(function(){
    var setting = {
        data: {
            simpleData: {
                enable: true
            }
        }
    };
    var zNodes = [
        { id:1, pId:0, name:"节点1" },
        { id:2, pId:0, name:"节点2" }
    ];
    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});

Nach dem Login kopieren

Der obige Code implementiert ein einfaches Baummenü, wobei $(document). ready() bedeutet, dass beim Laden der Seite erst dann der Initialisierungscode ausgeführt wird. Die Einstellung enthält die Konfigurationsinformationen des zTree-Steuerelements, einschließlich Datenformat, Stil, Ereignisse usw.; zNodes ist ein Array, das die Datenquelle des Baummenüs speichert. Während der Initialisierung wird das zTree-Steuerelement über die Methode $.fn.zTree.init() initialisiert. $() stellt den JQuery-Selektor dar, der Elemente basierend auf ID, Klasse, Label usw. auswählen kann.

3. Konfiguration

Die Einstellungsvariable im obigen Code ist der Kern der Konfiguration des zTree-Steuerelements, und je nach Bedarf können verschiedene Eigenschaften festgelegt werden. Im Folgenden sind einige gängige Konfigurationselemente aufgeführt:

data

data ist ein internes Konfigurationselement, das zum Konfigurieren des Datenformats des Baummenüs verwendet wird. Das Folgende ist ein einfaches Datenformat:

var zNodes = [
    {
        name: "节点1",
        children: [
            { name: "节点1.1" },
            { name: "节点1.2" }
        ]
    },
    {
        name: "节点2",
        children: [
            { name: "节点2.1" }
        ]
    }
];

Nach dem Login kopieren

Dabei kann jeder Knoten Attribute wie Name (Knotenname), Kinder (untergeordnete Knoten) usw. enthalten.

check

check ist ein internes Konfigurationselement, mit dem die Kontrollkästchenfunktion des Baummenüs konfiguriert wird. Sie können check.enable festlegen, um die Kontrollkästchenfunktion zu aktivieren, und check.chkboxType, um den Kontrollkästchentyp festzulegen:

var setting = {
    check: {
        enable: true,
        chkboxType: { "Y": "", "N": "" }
    }
};

Nach dem Login kopieren

Der Wert von chkboxType kann sein: { „Y“ : „s“, „N“ : „s“ } . Alle Knoten haben Kontrollkästchen (nur übergeordnete Knoten), { „Y“ : „ps“, „N“ : „ps“ } bedeutet, dass nur Nicht-Blattknoten Kontrollkästchen haben, { „Y“ : „ps“ , „N " : "p" } bedeutet, dass nur Nicht-Blattknoten und der Blattknoten der letzten Ebene Kontrollkästchen haben.

callback

callback ist ein internes Konfigurationselement, das zum Konfigurieren von Baummenüereignissen verwendet wird. Sie können onClick, onDblClick, onCheck und andere Ereignisse festlegen:

var setting = {
    callback: {
        onClick: function(event, treeId, treeNode) {
            alert(treeNode.name);
        },
        onDblClick: function(event, treeId, treeNode) {
            alert(treeNode.name + " - 双击事件");
        },
        onCheck: function(event, treeId, treeNode) {
            alert(treeNode.name + " - " + (treeNode.checked ? "选中" : "取消选中"));
        }
    }
};

Nach dem Login kopieren

Unter diesen wird das onClick-Ereignis ausgelöst, wenn auf den Knoten geklickt wird, onDblClick wird ausgelöst, wenn auf den Knoten doppelgeklickt wird, und onCheck wird ausgelöst, wenn das Knoten-Kontrollkästchen aktiviert ist ausgewählt oder deaktiviert.

view

view ist ein internes Konfigurationselement, mit dem der Stil des Baummenüs konfiguriert wird. Sie können FontCss, ShowIcon und andere Stile festlegen:

var setting = {
    view: {
        fontCss: { "font-weight": "bold", "color": "#055" },
        showIcon: false
    }
};

Nach dem Login kopieren

Darunter wird FontCss zum Festlegen des Schriftstils und ShowIcon zum Festlegen, ob das Symbol angezeigt werden soll, verwendet.

4. Ereignisse

Zusätzlich zum Festlegen von Ereignissen in der Konfiguration verfügt das zTree-Steuerelement auch über einige integrierte Ereignisfunktionen. Beispielsweise werden zTreeOnClick, zTreeOnCheck usw. verwendet, um Knotenklickereignisse und Kontrollkästchenauswahlereignisse zu binden. Die Verwendung ähnelt der folgenden:

$(document).ready(function(){
    var setting = {
        callback: {
            onClick: zTreeOnClick,
            onCheck: zTreeOnCheck
        }
    };
    var zNodes = [
        { id:1, pId:0, name:"节点1" },
        { id:2, pId:0, name:"节点2" }
    ];
    $.fn.zTree.init($("#treeDemo"), setting, zNodes);
});

function zTreeOnClick(event, treeId, treeNode) {
    alert(treeNode.name);
}

function zTreeOnCheck(event, treeId, treeNode) {
    alert(treeNode.name + " - " + (treeNode.checked ? "选中" : "取消选中"));
}

Nach dem Login kopieren

Im obigen Code sind zTreeOnClick und zTreeOnCheck benutzerdefinierte Ereignisfunktionen, die über aufgerufen werden Rückruffunktionen im Tag. Binden Sie das Node-Click-Ereignis und das Checkbox-Selected-Ereignis.

5. Zusammenfassung

Durch die obige Einführung glaube ich, dass die Leser die grundlegende Verwendung von jQuery zTree verstanden haben, einschließlich Installation, Initialisierung, Konfiguration, Ereignisse usw. In der tatsächlichen Entwicklung können Sie nach Bedarf verschiedene Eigenschaften konfigurieren, um umfangreichere Funktionen zu erreichen. Gleichzeitig ist zu beachten, dass das zTree-Steuerelement selbst zwar leistungsstark ist, aber auch einige Mängel aufweist, z. B. Leistungsprobleme, die während des eigentlichen Entwicklungsprozesses angemessen behandelt werden müssen.

Das obige ist der detaillierte Inhalt vonSo verwenden Sie jquery ztree. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!