Extension jQuery EasyUI -Arborescence éditable
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
Extension jQuery EasyUI Autres extensions