[JQuery] JExcel plugin para mostrar datos en paginas web como si fuera en Excel

JExcel es un plugin jquery para mostrar datos similares a hojas de calculo en nuestras paginas web o aplicaciones web, una forma de salir de las clásicas tablas.

El plugin JExcel lo podemos descargar de la pagina oficial http://bossanova.uk/jexcel ahi podremos descargar los archivos necesarios y ver la documentacion oficial, en este articulo les hare un review sobre lo mas basico y util.

Librerias necesarias

Necesitamos lo siguiente:

<script type=”text/javascript” src=”jquery.min.js”></script>
<script src=”dist/js/jquery.jexcel.js”></script>
<link rel=”stylesheet” href=”dist/css/jquery.jexcel.css” type=”text/css” />
<script src=”dist/js/jquery.jcalendar.js”></script>
<link rel=”stylesheet” href=”dist/css/jquery.jcalendar.css” type=”text/css” />

Son las librerias jquery, jexcel, jcalendar y sus respectivos archivos css.

Contenedor

Necesitamos un contenedor para poner el componente que se generara.

[code language=”html”] <div id="contienedatos"></div>
[/code]

De ese div usaremos el ID mas adelante.

Datos

Para los datos vamos a usar el formato json.

[code language=”javascript”] datos = [
[‘X’, "Doe", "2015-16-10",1,1],
[‘Will’, "Smith", "1990-09-22",3,2],
[‘Herman’, "Li", "1992-01-15",2,1],
[‘Steve’, "Vai", "2017-04-20",1,3],
];
[/code]

Los datos estan agrupagos por corchetes [], y dentro del grupo general, hay un grupo por cada fila que se quiere agregar y tambien se agrupan en [] y los datos correspondientes a las columnas se separan por comas.

Los campos de texto se usan comillas simples o dobles.

Para las fechas se usa el formato “dd-mm-yyyy” dia-mes-año.

Existen valores predefinidos mediante dropdowns para los cuales no se agrega el valor sino el ID.

Iniciando y configurando el plugin jExcel

Esta parte es facil y medio compleja pero una vez que se le entiende es facil.

[code language=”javascript”]

$(‘#contienedatos’).jexcel({
data:datos,
colHeaders: [‘Nombre’, ‘Apellido’, ‘Fecha de nac.’, ‘Grado’,’Clase’],
colWidths: [ 300, 80, 120,60 ,50],
columns: [
{type:’text’},
{type:’text’},
{type:’calendar’},
{type:’text’},
{ type: ‘dropdown’, source:[ {‘id’:’1′, ‘name’:’A’}, {‘id’:’2′, ‘name’:’B’}, {‘id’:’3′, ‘name’:’C’} ] },
] });
[/code]

Nos vamos a centrar el los atributos principales:

• data: son los datos que vamos a agregar en la tabla, tal como tenemos los datos en una variable, simplemente le pasamos la variable donde tenemos los datos.
• colHeaders: son las cabeceras de datos en un array, para darle significado a los datos, similar al thead.
• colWidths: tambien es un array donde se pueden agregar la medida de ancho a cada columna.
• columns: Este es el que se complica mas, este es un array que equivale a los tipos de datos de cada campo, y cada tipo de dato tambien se especifica en un array colocando el tipo y los parametros adicionales.

Por ejemplo el campo tipo dropdown, tiene unos parametros que son el source, donde se especifica en otro array los datos del dropdown, usando otro array para agrupar los datos ID y nombre.

Resultado

Codigo

Se incluyen los archivos de la libreria y el archivo con el codigo funcionando.

[sociallocker]

Link: Descargar desde Google Drive

[/sociallocker]

No olvides apoyarnos, suscribirte, compartir, etc.