Scribd Logo
Cargar

¡Te damos la bienvenida a Scribd!

  • Jquery EasyUI Componente Tree

    Cargado por

    Javier
    27 vistas6 páginas
    Este documento explica cómo crear un árbol de categorías usando el componente Tree de la librería JavaScript Jquery EasyUI. Primero se debe instalar la librería y descargar los archivos necesarios. Luego, los datos deben estar en formato JSON y se crean dos archivos, uno con los datos (arbol.json) y otro HTML (arbol.html) que muestra el árbol e incluye las librerías. Finalmente, el componente Tree se configura para mostrar el árbol a partir de los datos JSON.

    Descripción original:

    Derechos de autor

    © © All Rights Reserved

    Formatos disponibles

    PDF, TXT o lea en línea desde Scribd

    ¿Le pareció útil este documento?

    ¿Este contenido es inapropiado?

    Denunciar este documento
    Este documento explica cómo crear un árbol de categorías usando el componente Tree de la librería JavaScript Jquery EasyUI. Primero se debe instalar la librería y descargar los archivos necesarios. Luego, los datos deben estar en formato JSON y se crean dos archivos, uno con los datos (arbol.json) y otro HTML (arbol.html) que muestra el árbol e incluye las librerías. Finalmente, el componente Tree se configura para mostrar el árbol a partir de los datos JSON.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    27 vistas6 páginas

    Jquery EasyUI Componente Tree

    Cargado por

    Javier
    Este documento explica cómo crear un árbol de categorías usando el componente Tree de la librería JavaScript Jquery EasyUI. Primero se debe instalar la librería y descargar los archivos necesarios. Luego, los datos deben estar en formato JSON y se crean dos archivos, uno con los datos (arbol.json) y otro HTML (arbol.html) que muestra el árbol e incluye las librerías. Finalmente, el componente Tree se configura para mostrar el árbol a partir de los datos JSON.

    Copyright:

    © All Rights Reserved
    Descargue como PDF, TXT o lea en línea desde Scribd
    Marcar por contenido inapropiado
    de 6

    3/7/2020 Jquery EasyUI : Componente Tree

    DESARROLLO WEB

    Jquery EasyUI : Componente Tree

    Portada » Jquery EasyUI : Componente Tree

    Introducción a Jquery EasyUI

    Jquery EasyUI es una librería javascript que nos proporciona una serie de componentes
    prede nidos que podemos incorporar fácilmente a nuestras páginas web para hacerlas
    mucho más atractivas.

    Para ver todas las posibilidades que ofrece Jquery EasyUI lo mejor es echarle un ojo a su
    web.

    http://www.jeasyui.com/

    Como ya hicimos en otro artículo con Flex, vamos a ver como generar un árbol
    utilizando esta librería, veremos que es muy sencillo.

    https://www.codifica.me/jquery-easyui-componente-tree/ 1/6
    3/7/2020 Jquery EasyUI : Componente Tree

    INSTALACIÓN 

    Lo primero es bajarnos la librería:

    http://www.jeasyui.com/download/index.php

    En el momento de realizar este artículo la última versión es la jQueryEasyUI 1.2.3

    Una vez nos hemos bajado el chero jquery-easyui-1.2.3.zip lo descomprimimos dentro


    de una carpeta, por ejemplo jQueryEasyUI123.

    Entre otras cosas vemos que se nos han descomprimido:

    jquery-1.4.4.min.js: Librería jquery necesaria para que funcione jqueryEasyUI

    jquery.easyui.min.js: Librería jqueryEasyUI

    Carpeta demo: Un monton de ejemplos de todos los componentes de la librería (muy


    útil)

    Carpeta plugins: Ficheros JS auxiliares que necesitan los componentes de la librería

    Carpeta themes: Iconos y cheros CSS

    EMPEZAMOS

    Bueno pues una vez visto esto podemos empezar, sólo vamos a necesitar 2 cheros, un
    chero HTML y un chero donde estén los datos estos cheros van a ser arbol.html y
    arbol.json ambos los vamos a ubicar en el directorio donde hemos descomprimido la
    libreria (jQueryEasyUI).

    Los datos deben estar representados en JSON y además con un formato especial para
    que el componente tree los pueda interpretar (que le vamos a hacer). Así que si nuestra
    aplicación recibe los datos en XML o en JSON sin este formato deberemos
    transformarlos a este formato.

    Por ejemplo, si tuviesemos un XML (arbol.xml) como el del artículo del Árbol en FLEX de
    este estilo:

    https://www.codifica.me/jquery-easyui-componente-tree/ 2/6
    3/7/2020 Jquery EasyUI : Componente Tree

    <categoria nombre=”Categorias” url=”https://www.codi ca.me“>


    <categoria nombre=”Cat1? url=”https://www.codi ca.me“>
    <categoria nombre=”Cat1.1? url=”https://www.codi ca.me”/>
    </categoria>
    <categoria nombre=»Cat2″ url=»https://www.codi ca.me»>
    <categoria nombre=»Cat2.1″ url=»https://www.codi ca.me»/>
    <categoria nombre=»Cat2.2″ url=»https://www.codi ca.me»>
    <categoria nombre=»Cat2.2.1″ url=»https://www.codi ca.me»/>
    <categoria nombre=»Cat2.2.2″ url=»https://www.codi ca.me»/>
    </categoria>
    </categoria>
    </categoria>

    Su equivalente JSON adaptado al componente tree sería más o menos así (arbol.json)

    [{
    «id»:0,
    «text»:»Categorias»,
    «children»:
    [{
    «id»:»1″,
    «text»:»Cat1″,
    «children»:
    [{
    «id»:»2″,
    «text»:»Cat1.1″,
    «attributes»:{
    «url»:»https://www.codi ca.me«,
    «name»:»Categorias»
    }
    }]
    },
    {
    «id»:»3″,
    «text»:»Cat2″,
    «children»:

    https://www.codifica.me/jquery-easyui-componente-tree/ 3/6
    3/7/2020 Jquery EasyUI : Componente Tree

    [{
    «id»:»4″,
    «text»:»Cat2.1″,
    «attributes»:{
    «url»:»https://www.codi ca.me«,
    «name»:»Categorias»
    }
    },
    {
    «id»:»5″,
    «text»:»Cat2.2″,
    «children»:
    [{
    «id»:»6″,
    «text»:»Cat2.2.1″,
    «attributes»:{
    «url»:»https://www.codi ca.me«,
    «name»:»Categorias»
    }
    },
    {
    «id»:»7″,
    «text»:»cat2.2.2″,
    «attributes»:{
    «url»:»https://www.codi ca.me«,
    «name»:»Categorias»
    }
    }]
    }]
    }]
    }]

    La conversión de XML a JSON es cosa vuestra, hay librerias tanto en java como en JS
    que convierten de XML a JSON, pero no tienen el formato concreto que necesita este
    componente así que habría que ingeniarselas de alguna manera para conseguirlo.

    Ahora hay que crear el documento HTML para mostrar el árbol (arbol.html)

    https://www.codifica.me/jquery-easyui-componente-tree/ 4/6
    3/7/2020 Jquery EasyUI : Componente Tree

    <?xml version=»1.0″ encoding=»UTF-8″?>


    <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Strict//EN»
    «http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd«>
    <!– <!DOCTYPE html PUBLIC «-//W3C//DTD XHTML 1.0 Transitional//EN»
    «http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd«>  –>
    <html xmlns=»http://www.w3.org/1999/xhtml» xml:lang=»es» lang=»es»>
    <head>
    <meta http-equiv=»Content-Type» content=»text/html; charset=utf-8″ />
    <meta http-equiv=»content-language» content=»es»>
    <!– importamos las librerias jquery y jquery EasyUI–>
      <script src=’jquery-1.4.4.min.js’ type=»text/javascript»></script>
    <script src=’jquery.easyui.min.js’ type=»text/javascript»></script>
    <!– añadimos las hojas de estilo utilizadas–>
      <link rel=»stylesheet» type=»text/css» href=»themes/default/easyui.css»>
    <link rel=»stylesheet» type=»text/css» href=»themes/icon.css»>
    <script type=»text/javascript»>
    //Esta función se ejecuta al cargar la pagina
       $(function(){
        //obtenemos el elemento html sobre
    //el que vamos a pintar el arbol y
    //lo con guramos
    $(‘#tt2’).tree({
    checkbox: false,
    url: ‘arbol.json’,
    onClick:function(node){
    if (node.attributes != unde ned)
    window.location.href = node.attributes.url;
    }
    });
    });
    </script>
    </head>
    <body>
    <h1>Arbol</h1>
    <p>Arbol JSON</p>
    <ul id=»tt2″></ul>

    https://www.codifica.me/jquery-easyui-componente-tree/ 5/6
    3/7/2020 Jquery EasyUI : Componente Tree

    </body>
    </html>

    Despues de todo esto el resultado tiene que ser algo así:

    https://www.codifica.me/jquery-easyui-componente-tree/ 6/6

    También podría gustarte