Introducción a Jquery EasyUI
Jquery EasyUI es una librería javascript que nos proporciona una serie de componentes predefinidos 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.
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.
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.codifica.me“>
<categoria nombre=”Cat1? url=”https://www.codifica.me“>
<categoria nombre=”Cat1.1? url=”https://www.codifica.me”/>
</categoria>
<categoria nombre=”Cat2″ url=”https://www.codifica.me”>
<categoria nombre=”Cat2.1″ url=”https://www.codifica.me”/>
<categoria nombre=”Cat2.2″ url=”https://www.codifica.me”>
<categoria nombre=”Cat2.2.1″ url=”https://www.codifica.me”/>
<categoria nombre=”Cat2.2.2″ url=”https://www.codifica.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.codifica.me“,
“name”:”Categorias”
}
}]
},
{
“id”:”3″,
“text”:”Cat2″,
“children”:
[{
“id”:”4″,
“text”:”Cat2.1″,
“attributes”:{
“url”:”https://www.codifica.me“,
“name”:”Categorias”
}
},
{
“id”:”5″,
“text”:”Cat2.2″,
“children”:
[{
“id”:”6″,
“text”:”Cat2.2.1″,
“attributes”:{
“url”:”https://www.codifica.me“,
“name”:”Categorias”
}
},
{
“id”:”7″,
“text”:”cat2.2.2″,
“attributes”:{
“url”:”https://www.codifica.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)
<?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í: