Extension jQuery EasyUI -Arborescence éditable


jQuery EasyUI 扩展Extension jQuery EasyUI

Utilisation

Créer une arborescence

    <ul id="tt"></ul>
    $('#tt').etree({
        url: 'tree_data.json',
        createUrl: ...,
        updateUrl: ...,
        destroyUrl: ...,
        dndUrl: ...
    });

Définissez les propriétés url, createUrl, updateUrl, destroyUrl et dndUrl pour synchroniser automatiquement les données entre le client et le serveur.

  • url : Renvoie les données de l'arborescence.
  • createUrl : Lors de la création d'un nouveau nœud, l'arborescence transmettra un paramètre nommé 'parentId' au serveur, qui indique l'id du nœud parent.
    Le serveur doit renvoyer les données du nœud ajouté. Le code suivant montre un exemple d'ajout de données de nœud :
    {"id":1,"text":"new node"}
    
  • updateUrl : Lors de la mise à jour d'un nœud, l'arborescence transmettra les paramètres 'id' et 'text' au serveur.
    Le serveur effectue l'opération de mise à jour et renvoie les données du nœud mis à jour.
  • destroyUrl : Lors de la destruction d'un nœud, l'arbre transmettra le paramètre 'id' au serveur.
    Le serveur renvoie les données {"success":true}.
  • dndUrl : Lors du glisser-déposer d'un nœud, l'arbre transmettra les paramètres suivants au serveur :
    id - L'id du nœud glissé.
    targetId - Le nœud où il est déposé.
    point - Indique l'opération de placement. Valeurs possibles : 'append', 'top' ou 'bottom'.
    Le serveur effectue des actions et renvoie les données {"success":true}.

Méthodes

Cette méthode hérite de l'arbre. Voici les méthodes ajoutées pour l'arbre éditable (etree).

Name Paramètre Description
options none Renvoie l'objet options.
create none Créer un nouveau nœud.
edit none Modifier le nœud actuellement sélectionné.
destroy none Détruire le nœud actuellement sélectionné.

Télécharger les exemples jQuery EasyUI

jquery-easyui-etree.zip


jQuery EasyUI 扩展Extension jQuery EasyUI Autres extensions