10781 Suscriptores al Feed del Blog
85 Suscriptores al Feed de Anotaciones Breves
39 usuarios online
diseño web valencia en 500 iconos gratuitos para tus aplicaciones web
FlexiGrid
0 COMENTARIOS - Publicado hace 16 meses - Clasificado en: JQUERY, DATAGRID, SCRIPTSFlexiGrid 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>
También te puede interesar:
Bienvenido a Intenta. Has venido desde ; si andabas buscando algo espero que este post satisfaga tus expectativas.
|
|
|
|
|
