jQuery EasyUI Extensión -Árbol editable (Editable Tree)

jQuery EasyUI Extensión

Uso

Crear un árbol (Tree)

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

Configure las propiedades url, createUrl, updateUrl, destroyUrl y dndUrl para sincronizar automáticamente los datos entre el cliente y el servidor.

• url: devuelve los datos del árbol.
• createUrl: cuando se crea un nuevo nodo, el árbol enviará al servidor un parámetro llamado 'parentId', que indica el id del nodo padre.
  El servidor debe devolver los datos del nodo agregado. El siguiente código demuestra un ejemplo de cómo agregar datos de nodo:

  {"id":1,"text":"new node"}
  

• updateUrl: cuando se actualiza un nodo, el árbol enviará al servidor los parámetros 'id' y 'text'.
  El servidor realiza la operación de actualización y devuelve los datos del nodo actualizado.
• destroyUrl: cuando se destruye un nodo, el árbol enviará al servidor el parámetro 'id'.
  El servidor devuelve los datos {"success":true}.
• dndUrl: cuando se arrastra y suelta un nodo, el árbol enviará al servidor los siguientes parámetros:
  id - el id del nodo arrastrado.
  targetId - el nodo donde se coloca.
  point - indica la operación de colocación. Valores posibles: 'append', 'top' o 'bottom'.
  El servidor realiza algunas acciones y devuelve los datos {"success":true}.

Métodos

Estos métodos se extienden del árbol (tree). A continuación se muestran los métodos agregados para el árbol editable (etree).

Descargar ejemplos de jQuery EasyUI

jquery-easyui-etree.zip

jQuery EasyUI Extensión