jQuery EasyUI Menú de árbol -Agregar nodos al menú de árbol

Este tutorial le muestra cómo adjuntar nodos al menú de árbol (Tree). Crearemos un árbol de alimentos que contiene nodos de frutas y verduras, y luego agregaremos algunas otras frutas al nodo de frutas existente.

Crear el árbol de alimentos

Primero, creamos el árbol de alimentos, el código es el siguiente:

    <div style="width:200px;height:auto;border:1px solid #ccc;">
        <ul id="tt" class="easyui-tree" url="tree_data.json"></ul>
    </div>

Tenga en cuenta que el componente de árbol (Tree) se define dentro de la etiqueta `<ul>`, y los datos de los nodos del árbol se cargan desde la URL `"tree_data.json"`.

Obtener el nodo padre

Luego seleccionamos el nodo de frutas haciendo clic en el nodo, y agregaremos algunos otros datos de frutas. Ejecute el método `getSelected` para obtener el nodo de procesamiento:

    var node = $('#tt').tree('getSelected');

El resultado devuelto por el método `getSelected` es un objeto de JavaScript que tiene propiedades `id`, `text` y `target`. La propiedad `target` es un objeto DOM que hace referencia al nodo seleccionado; su método `append` se utilizará para adjuntar nodos secundarios.

Adjuntar nodos

    var node = $('#tt').tree('getSelected');
    if (node){
        var nodes = [{
            "id":13,
            "text":"Raspberry"
        },{
            "id":14,
            "text":"Cantaloupe"
        }];
        $('#tt').tree('append', {
            parent:node.target,
            data:nodes
        });
    }

Cuando agregue algunas frutas, verá:

Como puede ver, no es tan difícil adjuntar nodos usando el complemento de árbol (Tree) de easyui.

Descargar ejemplos de jQuery EasyUI

jeasyui-tree-tree3.zip