jQuery EasyUI DataGrid y plugin de árbol -Tree (árbol)

Plugin de jQuery EasyUI

Dependencias

• draggable
• droppable

Uso

El árbol (tree) se define en un elemento <ul>. Esta etiqueta puede definir nodos hoja y nodos hijos. Los nodos serán elementos <li> dentro de la lista ul. A continuación se muestran los elementos que se usarán para crear nodos de árbol anidados dentro de un elemento ul.

<ul id="tt" class="easyui-tree">
    <li>
        <span>Folder</span>
        <ul>
            <li>
                <span>Sub Folder 1</span>
                <ul>
                    <li><span><a href="../index.html">File 11</a></span></li>
                    <li><span>File 12</span></li>
                    <li><span>File 13</span></li>
                </ul>
            </li>
            <li><span>File 2</span></li>
            <li><span>File 3</span></li>
        </ul>
    </li>
    <li><span>File21</span></li>
</ul>

El árbol (Tree) también puede definirse en un elemento <ul> vacío, y se pueden cargar datos usando javascript.

<ul id="tt"></ul>

$('#tt').tree({
    url:'tree_data.json'
});

Use loadFilter para procesar datos json provenientes de un servicio web ASP.NET.

$('#tt').tree({
    url: ...,
    loadFilter: function(data){
        if (data.d){
            return data.d;
        } else {
            return data;
        }
    }
});

Formato de datos del árbol (Tree Data Format)

Cada nodo puede incluir las siguientes propiedades:

• id: el id del nodo, que es importante para cargar datos remotos.
• text: el texto del nodo a mostrar.
• state: el estado del nodo, 'open' o 'closed', por defecto es 'open'. Cuando se establece en 'closed', el nodo tiene nodos hijos, y se cargarán desde un sitio remoto.
• checked: indica si el nodo está seleccionado.
• attributes: atributos personalizados agregados a un nodo.
• children: una matriz de nodos que define algunos nodos hijos.

Ejemplo:

[{
    "id":1,
    "text":"Folder1",
    "iconCls":"icon-save",
    "children":[{
        "text":"File1",
        "checked":true
    },{
        "text":"Books",
        "state":"open",
        "attributes":{
            "url":"/demo/book/abc",
            "price":100
        },
        "children":[{
            "text":"PhotoShop",
            "checked":true
        },{
            "id": 8,
            "text":"Sub Bookds",
            "state":"closed"
        }]
    }]
},{
    "text":"Languages",
    "state":"closed",
    "children":[{
        "text":"Java"
    },{
        "text":"C#"
    }]
}]

Árbol asíncrono

El árbol admite un modo de carga asíncrona incorporado, por lo que el usuario puede crear un árbol vacío y luego especificar un lado del servidor que devuelva datos JSON dinámicamente, para llenar el árbol asincrónicamente según sea necesario. A continuación se muestra un ejemplo:

<ul class="easyui-tree" data-options="url:'get_data.php'"></ul>

El árbol se carga a través de la URL 'get_data.php'. Los nodos hijos se cargan dependiendo del estado del nodo padre. Cuando se expande un nodo cerrado, si el nodo no tiene nodos hijos cargados, enviará al servidor el valor de id del nodo como parámetro de solicitud http llamado 'id' mediante la URL definida anteriormente, para recuperar los nodos hijos.

Vea los datos devueltos desde el servidor:

[{
    "id": 1,
    "text": "Node 1",
    "state": "closed",
    "children": [{
        "id": 11,
        "text": "Node 11"
    },{
        "id": 12,
        "text": "Node 12"
    }]
},{
    "id": 2,
    "text": "Node 2",
    "state": "closed"
}]

El nodo 1 y el nodo 2 están cerrados; al expandir el nodo 1, se mostrarán directamente sus nodos hijos. Al expandir el nodo 2, se enviará value(2) al servidor para recuperar los nodos hijos.

En este tutorial,Crear un árbol asíncronose demuestra cómo escribir código de servidor para devolver los datos del árbol según sea necesario.

Propiedades

$('#tt').tree({
    data: [{
        text: 'Item1',
        state: 'closed',
        children: [{
            text: 'Item11'
        },{
            text: 'Item12'
        }]
    },{
        text: 'Item2'
    }]
});

$('#tt').tree({
    formatter:function(node){
        return node.text;
    }
});

Eventos

Muchas funciones de devolución de llamada de eventos requieren el parámetro 'node', que incluye las siguientes propiedades:

• id: valor de identificación enlazado al nodo.
• text: texto a mostrar.
• iconCls: clase CSS utilizada para mostrar el icono.
• checked: si el nodo está seleccionado.
• state: estado del nodo, 'open' o 'closed'.
• attributes: atributos personalizados enlazados al nodo.
• target: objeto DOM del destino.

$('#tt').tree({
    onClick: function(node){
        alert(node.text);  // alert node text property when clicked
    }
});

// right click node and then display the context menu
$('#tt').tree({
    onContextMenu: function(e, node){
        e.preventDefault();
        // select the node
        $('#tt').tree('select', node.target);
        // display context menu
        $('#mm').menu('show', {
            left: e.pageX,
            top: e.pageY
        });
    }
});

// the context menu is defined as below:
<div id="mm" class="easyui-menu" style="width:120px;">
    <div onclick="append()" data-options="iconCls:'icon-add'">Append</div>
    <div onclick="remove()" data-options="iconCls:'icon-remove'">Remove</div>
</div>

Métodos

var nodes = $('#tt').tree('getChecked');    // get checked nodes
var nodes = $('#tt').tree('getChecked', 'unchecked');    // get unchecked nodes
var nodes = $('#tt').tree('getChecked', 'indeterminate');    // get indeterminate nodes
var nodes = $('#tt').tree('getChecked', ['checked','indeterminate']);    // get checked and indeterminate nodes

// find a node and then select it
var node = $('#tt').tree('find', 12);
$('#tt').tree('select', node.target);

// append some nodes to the selected node
var selected = $('#tt').tree('getSelected');
$('#tt').tree('append', {
    parent: selected.target,
    data: [{
        id: 23,
        text: 'node23'
    },{
        text: 'node24',
        state: 'closed',
        children: [{
            text: 'node241'
        },{
            text: 'node242'
        }]
    }]
});

var node = $('#tt').tree('getSelected');
if (node){
    $('#tt').tree('insert', {
        before: node.target,
        data: {
            id: 21,
            text: 'node text'
        }
    });
}

// update the selected node text
var node = $('#tt').tree('getSelected');
if (node){
    $('#tt').tree('update', {
        target: node.target,
        text: 'new text'
    });
}

Complemento jQuery EasyUI