FlexiGrid
Comentarios: 0Tags: JQUERY, DATAGRID, SCRIPTS
Fecha: 24/11/2008
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.
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>
Construyendo un verdadero triple click con jQuery
arturo Romo en 16 acciones de Photoshop para dar profesionalidad a tus imágenes
