Blog

Programación, desarrollo web y SEO

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 fichero 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 ficheros CSS

EMPEZAMOS

Bueno pues una vez visto esto podemos empezar, sólo vamos a necesitar 2 ficheros, un fichero HTML y un fichero donde estén los datos estos ficheros 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:

<categoria nombre=”Categorias” url=”https://www.codigojavaoracle.com“>
<categoria nombre=”Cat1? url=”https://www.codigojavaoracle.com“>
<categoria nombre=”Cat1.1? url=”https://www.codigojavaoracle.com”/>
</categoria>
<categoria nombre=”Cat2″ url=”https://www.codigojavaoracle.com”>
<categoria nombre=”Cat2.1″ url=”https://www.codigojavaoracle.com”/>
<categoria nombre=”Cat2.2″ url=”https://www.codigojavaoracle.com”>
<categoria nombre=”Cat2.2.1″ url=”https://www.codigojavaoracle.com”/>
<categoria nombre=”Cat2.2.2″ url=”https://www.codigojavaoracle.com”/>
</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.codigojavaoracle.com",
"name":"Categorias"
}
}] },
{
“id”:”3″,
“text”:”Cat2″,
“children”:
[{
"id":"4",
"text":"Cat2.1",
"attributes":{
"url":"
https://www.codigojavaoracle.com",
"name":"Categorias"
}
},
{
"id":"5",
"text":"Cat2.2",
"children":
[{
"id":"6",
"text":"Cat2.2.1",
"attributes":{
"url":"
https://www.codigojavaoracle.com",
"name":"Categorias"
}
},
{
"id":"7",
"text":"cat2.2.2",
"attributes":{
"url":"
https://www.codigojavaoracle.com",
"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)

<?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 configuramos

$(‘#tt2′).tree({
checkbox: false,
url: ‘arbol.json’,
onClick:function(node){
if (node.attributes != undefined)
window.location.href = node.attributes.url;
}
});
});
</script>
</head>
<body>
<h1>Arbol</h1>
<p>Arbol JSON</p>
<ul id=”tt2″></ul>
</body>
</html>

 

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

Share this post

1 comment

Join the conversation
  • Grover - 19 marzo, 2014 reply

    Muchas gracias, easyui esta bien documentado y tiene ejemplos y demos por demas ilustrativos, pero no esta demas contar con mayor información para ir aclarando las ideas.

Join the conversation


4 − = dos

Related Posts