recherche

Maison >interface Web >Questions et réponses frontales >Comment utiliser jquery ztree

Comment utiliser jquery ztree

PHPz
PHPzoriginal
2023-04-26 10:21:26804parcourir

JQuery zTree est un contrôle d'arborescence basé sur JQuery. Il est facile à utiliser, flexible, efficace et hautement compatible. C'est l'un des outils indispensables au développement Web. Cet article vous présentera en détail le didacticiel d'utilisation de jQuery zTree, y compris l'installation, l'initialisation, la configuration, les événements, etc., pour vous aider à mieux utiliser cet outil puissant.

1. Installation

Pour utiliser le contrôle jQuery zTree, vous devez d'abord introduire les fichiers JS et CSS correspondants. Vous pouvez télécharger la dernière version du fichier sur le site officiel de zTree (http://www.ztree.me) ou l'obtenir à partir de certains CDN couramment utilisés (tels que https://cdn.bootcss.com). Voici le code pour importer des fichiers CSS et JS : 

<!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>

2. Initialisation

Lorsque les fichiers sont importés avec succès, vous pouvez commencer à utiliser le contrôle zTree. Pour initialiser le contrôle zTree, vous devez appeler la fonction zTree et transmettre certains paramètres pour configurer les propriétés du contrôle, comme le code suivant : 

$(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);
});

Le code ci-dessus implémente un menu arborescent simple, où $(document). ready() signifie lorsque la page est chargée. Ensuite seulement, exécutez le code d'initialisation. Le paramètre contient les informations de configuration du contrôle zTree, y compris le format des données, le style, les événements, etc. ; zNodes est un tableau qui stocke la source de données du menu arborescent. Lors de l'initialisation, le contrôle zTree est initialisé via la méthode $.fn.zTree.init() $() représente le sélecteur JQuery, qui peut sélectionner des éléments en fonction de l'ID, de la classe, de l'étiquette, etc.

3. Configuration

La variable de paramètre dans le code ci-dessus est au cœur de la configuration du contrôle zTree, et différentes propriétés peuvent être définies selon les besoins. Voici quelques éléments de configuration courants :

  1. data

data est un élément de configuration interne utilisé pour configurer le format des données du menu arborescent. Ce qui suit est un format de données simple : 

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

Dans celui-ci, chaque nœud peut contenir des attributs tels que le nom (nom du nœud), les enfants (nœuds enfants), etc.

  1. check

check est un élément de configuration interne utilisé pour configurer la fonction de case à cocher du menu arborescent. Vous pouvez définir check.enable pour activer la fonction de case à cocher et check.chkboxType pour définir le type de case à cocher : 

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

La valeur de chkboxType peut être { "Y" : "s", "N" : "s" } . Tous les nœuds ont des cases à cocher (uniquement les nœuds parents), { "Y" : "ps", "N" : "ps" } signifie que seuls les nœuds non-feuilles ont des cases à cocher, { "Y" : "ps" , "N. " : "p" } signifie que seuls les nœuds non-feuille et le nœud feuille de dernier niveau ont des cases à cocher.

  1. callback

callback est un élément de configuration interne utilisé pour configurer les événements du menu arborescent. Vous pouvez définir onClick, onDblClick, onCheck et d'autres événements : 

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 ? "选中" : "取消选中"));
        }
    }
};

Parmi eux, l'événement onClick est déclenché lorsque le nœud est cliqué, onDblClick est déclenché lorsque le nœud est double-cliqué et onCheck est déclenché lorsque la case à cocher du nœud est sélectionnée ou décochée.

  1. view

view est un élément de configuration interne utilisé pour configurer le style du menu arborescent. Vous pouvez définir fontCss, showIcon et d'autres styles : 

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

Parmi eux, fontCss est utilisé pour définir le style de police, et showIcon est utilisé pour définir s'il faut afficher l'icône.

4. Événements

En plus de définir des événements dans la configuration, le contrôle zTree possède également des fonctions d'événement intégrées. Par exemple, zTreeOnClick, zTreeOnCheck, etc. sont utilisés pour lier les événements de clic de nœud et les événements de sélection de cases à cocher : 

$(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 ? "选中" : "取消选中"));
}

Dans le code ci-dessus, zTreeOnClick et zTreeOnCheck sont des fonctions d'événement personnalisées, qui sont appelées via. fonctions de rappel dans la balise. Liez l’événement de clic de nœud et l’événement sélectionné par la case à cocher.

5. Résumé

Grâce à l'introduction ci-dessus, je pense que les lecteurs ont compris l'utilisation de base de jQuery zTree, y compris l'installation, l'initialisation, la configuration, les événements, etc. Dans le développement réel, vous pouvez configurer diverses propriétés selon vos besoins pour obtenir des fonctions plus riches. Dans le même temps, il convient également de noter que, bien que le contrôle zTree lui-même soit puissant, il présente également certaines lacunes, telles que des problèmes de performances, qui doivent être raisonnablement gérés au cours du processus de développement lui-même.

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!

jquery css 回调函数 JS 事件 选择器 http https
Déclaration：
Le contenu de cet article est volontairement contribué par les internautes et les droits d'auteur appartiennent à l'auteur original. Ce site n'assume aucune responsabilité légale correspondante. Si vous trouvez un contenu suspecté de plagiat ou de contrefaçon, veuillez contacter admin@php.cn
Article précédent：Comment implémenter l'ajout, la suppression, la modification et la vérification du DOM jqueryArticle suivant：Comment implémenter l'ajout, la suppression, la modification et la vérification du DOM jquery

Articles Liés

Voir plus