Handsontable tablas con javascritpt, jquery, angular.js al estilo excel



Handsontable tablas con javascritpt, jquery, angular.js al estilo excel, este plugin tiene la facilidad de mostrarnos la información mediante tablas similares a la funcionalidad que tiene las hojas de excel.

Este plugin tiene compatibilidad con backbone.js, jquery, bootstrap, raphael.js y angular.js, además tiene compatibilidad con:

1.- Ajax

2.- Trabaja conjuntamente con datos en formato json

3.- Tiene eventos que permiten realizar operaciones entre celdas.

4.- Aplica propiedades a celdas.

5.- Maneja tipos de celdas (Ejem. numérica, fecha, checkbox, select, dropdown, auto complementario,password).

6.- Permite tener el control del documento con el teclado.

7.- Maneja validaciones entre celdas.

8.- Permite la búsqueda de palabras entre las celdas.

 

La integración puedes encontrarla en el siguiente enlace:
Cell types: http://handsontable.com/demo/renderers.html

Validación: http://handsontable.com/demo/validation.html

Fecha: http://handsontable.com/demo/date.html


http://handsontable.com/

 

Para incluir está librería, simplemente hay que agregar el siguiente código.

 

Vamos a crear unas cuantas líneas, primero integramos lo que son las dependencias:


 <script src="handsontable/lib/jquery.min.js"></script>  <script src="handsontable/dist/handsontable.full.js"></script>  <link rel="stylesheet" media="screen" href="handsontable/dist/handsontable.full.css">

Posteriormente el siguiente código:


function getData() {
return [
["", "Kia", "Nissan", "Toyota", "Honda"],
["2008", 10, 11, 12, 13],
["2009", 20, 11, 14, 13],
["2010", 30, 15, 12, 13]
];
}
// Instead of creating a new Handsontable instance with the container element passed as an argument,
// you can simply call .handsontable method on a jQuery DOM object.
var $container = $("#hot");
$container.handsontable({
data: getData(),
startRows: 5,
startCols: 5,
minRows: 5,
minCols: 5,
maxRows: 10,
maxCols: 10,
rowHeaders: true,
colHeaders: true,
minSpareRows: 1,
contextMenu: true
});
// This way, you can access Handsontable api methods by passing their names as an argument, e.g.:
var hotInstance = $("#hot").handsontable('getInstance');

 

 

 

You may also like...