FlexiGrid

0 COMENTARIOS -  Publicado hace 16 meses -  Clasificado en: , ,

FlexiGrid es un ligero datagrid que usa jQuery, con columnas redimensionables, ordenación por columnas, paginación, búsqueda, la capacidad de leer datos en XML o JSON mediante Ajax, etc.

FlexiGrid

El ejemplo más sencillo sería convertir una tabla en una grid, para ello incluimos tanto la librería jQuery como el javascript de Flexigrid

<script type="text/javascript" src="lib/jquery/jquery.js"></script>
<script type="text/javascript" src="flexigrid.js"></script>

El CSS correspondiente, que también viene en el paquete de Flexigrid:

<link rel="stylesheet" type="text/css" href="css/flexigrid/flexigrid.css">

Construimos la tabla:

<table class="clasedelatabla">
<thead> <tr> <th width="100">Col 1</th> <th width="100">Col 2</th> <th width="100">Col 3</th> <th width="300">Col 4</th> </tr> </thead> <tbody> <tr> <td>Dato 1</td> <td>Dato 2</td> <td>Dato 3</td> <td>Dato 4</td> </tr><tr> <td>Dato 1</td> <td>Dato 2</td> <td>Dato 3</td> <td>Dato 4</td> </tr><tr> <td>Dato 1</td> <td>Dato 2</td> <td>Dato 3</td> <td>Dato 4</td> </tr><tr> <td>Dato 1</td> <td>Dato 2</td> <td>Dato 3</td> <td>Dato 4</td> </tr><tr> <td>Dato 1</td> <td>Dato 2</td> <td>Dato 3</td> <td>Dato 4</td> </tr> </tbody> </table>

Ahora tan sólo queda asociar la tabla con la librería.

<script type="text/javascript">
$('.clasedelatabla').flexigrid();
</script>

También te puede interesar:

Bienvenido a Intenta. Has venido desde ; si andabas buscando algo espero que este post satisfaga tus expectativas.

SpaceGallery

Spacegallery - jQuery plugin

8 tips para jQuery

8 tips para jQuery

Picreflect: agrega reflejos a tus imágenes

Picreflect: agrega reflejos a tus imágenes

Speccy: averigua todo el hardware de un ordenador

Speccy: averigua todo el hardware de un ordenador

Efecto "Light Burst" con Photoshop

Efecto "Light Burst" con Photoshop
Haz un comentario

¡Gracias por dejar tu opinión! Por favor procura que tu comentarios sean apropiados respecto al tema tratado en la entrada; que no sean spam, u ofensivos, de otro modo, serán eliminados. Todos los comentarios serán moderados antes de su publicación por lo que su aparición en la web puede verse aplazada un cierto tiempo. Si deseas realizar algún comentario, crítica o sugerencia sobre la propia web puedes hacer a través de la siguiente dirección de correo: webintenta@webintenta.com