jQuery.FlexiGrid - Convertí tus tablas HTML a un DataGrid de forma muy simple con este script. También permite manipular registros de forma dinámica desde archivos XML y JSON.

Más sobre el programa :: Requerimientos :: Videos :: Actualizaciones

Si en tu proyecto web necesitas implementar una grilla de datos o datagrid, para manipular o únicamente mostrar registros seguramente que este script de ejemplo te servirá.

Flexigrid.jQuery se trata de un script para poder mostrar un control DataGrid con datos. Contiene ejemplos de uso, con el que podrás cargar y manipular registros desde una fuente de datos XML o jSON mediante Ajax o registros cargados de forma manual simplemente añadiendo un ID a tu tabla HTML, y de esta forma poder convertirla en un DataGrid.

A continuación puedes ver mas información de esta alternativa gratuita para tu página o aplicación web.

Mas información sobre el programa.

Indice - Contenido.

  1. Características principales del script Flexigrid.jQuery.
  2. Ejemplos del Datagrid.
  3. Añadir el DataGrid en la página web.

 

1 - Características principales del script Flexigrid.jQuery.

  • Permite hacer las columnas o campos del datagrid redimensionables, es decir que el usuario puede modificar el ancho de la misma mediante el mouse o por programación.
  • Ordenamiento de los campos en orden alfabético en caso de campos string o también campos de números, fechas etc ...
  • Paginación de datos. Esto te permite cargar únicamente un cierto conjunto de registros, y los demás ir visualizandolos por páginas mediante flechas o botones.
  • Cambiar el look o estilo visual de la grilla de datos utilizando skin o temas.
  • Es posible utilizar el script para convertir una tabla común HTML a una grilla o Datagrid, empleando muy poco código, de forma fácil y rápida.
  • Es posible conectar el Datagrid a una fuente de datos AJAX ( Ajax Datasource), por medio de JSON y XML.
  • Mostrar y ocultar ciertas columnas del grid.
  • Api accesible para poder programar la grilla fácilmente.
  • Opción para poder buscar registros sin necesidad de programar la grilla. La opción de búsqueda de datos ya se encuentra implementada y se visualiza en la barra de herramientas.
  • Una opción muy importante, es que es compatible con la mayoría de los navegadores web de la actualidad, entre ellos: Google Chrome, Internet explorer, Opera, FireFox etc ..
  • Otras.

2 - Ejemplos del Datagrid.

En la página del autor, puedes ver tres ejemplos que son los siguientes:

El primer ejemplo, muestra una grilla muy simple donde solo se visualizan datos, es decir que el usuario no puede interactuar con las filas y registros.

El segundo ejemplo, es similar al anterior. Muestra una tabla de datos y permite ajustar el ancho y alto de los encabezados.

El código fuente es el siguiente:

$('.flexme2').flexigrid({height:'auto',striped:false})

Vista previa del grid.

El tercer ejemplo,permite cargar datos de forma dinámica conectado a un archivo jSon y ajustar algunas otras opciones, por ejemplo:

  • El parámetro URL, es la dirección del script del lado del servidor, que proporciona una representación JSON o XML de los resultados a mostrar en el DataGrid usando AJAX.
  • Añadir cada una de las columnas del datagrid en la función ColModel. Esta es una matriz que contiene una lista de columnas a usar. Puede configurar el nombre a mostrar en cada una de ellas, la anchura, si la columna se puede ordenar, y también la alineación del texto.
  • Establecer la columna por la cual se podrá buscar registros: Apartado searchItems. El uso de este parámetro puede utilizarce para especificar las columnas que se emplean para buscar los resultados en el área de "búsqueda rápida". Sólo tienes que especificar un nombre para la opción de búsqueda, el nombre de la columna, y si la columna es la opción de búsqueda por defecto.
  • Establecer la paginación de datos con la variable userPage: usepager: true.
  • El ancho y el alto del DataGrid con las variables Width y Height.
  • Establecer la columna por la cual se va a ordenar los registros y también el orden, ascendente o descendente: sortname y sortorder.
  • Establecer botones para interactuar con los registros: eliminar, añadir una nueva fila de datos, buscar etc ..
  • Establecer el título principal que se muestra en la parte superior del datagrid con la variable: Title.
  • Establecer el datasource: jSon o XML en la opción DataType.
  • La función Buttons. Es posible utilizar esta matriz para añadir botones en la parte superior de la Flexigrid, por ejemplo, es posible que desee crear botones para añadir, editar y eliminar registros. La propiedad BClass es la clase CSS utiliza para establecer la imagen de fondo para el botón, etc.
  • UseRP permite especificar la cantidad de registros que se mostrarán en cada página de resultados cuando utilizamos la opción de paginación en el Datagrid.

Vista previa del datagrid.

Código fuente del ejemplo 3.

3 - Añadir el DataGrid en la página web.

Agregar el Flexigrid a su página o aplicación web es muy sencillo. Sólo tienes que descargar los archivos del script y copiarlos en los directorios de tu sitio.

También es necesario tener una versión de la librería jQuery para ejecutar el script. Este se puede encontrar y descargar de forma gratuita en el sitio web oficial jquery.com.

Dentro de la carpeta de descarga, se encuentra un archivo llamado flexigrid.js. Este se deberá Incluir en la sección principal de su sitio ( Sección Head) como lo haría normalmente junto con el archivo proporcionado CSS (se tendrá que copiar todo el contenido completo del directorio 'CSS', incluyendo las imágenes).

Después de crear una tabla HTML en tu página con el id , a continuación ya podrás crear y convertirlo a un DataGrid.

Nota: Puedes ver mas información y una simple guía de uso y configuración en la carpeta tutorial.


Requerimientos de instalación y uso.

Plataforma: Javascript + Ajax.


Videos tutoriales.

No hay videos disponibles para este script.

Cambios, actualizaciones y mejoras del programa.

Buscar programas


Introduce los términos de búsqueda ...

Enlaces patrocinados.


Detalles y descargar

Web:
http://flexigrid.info/
Licencia:
Gratis - Software libre GPL MIT
Versión:
1.1
Idioma:
Inglés
Programa actualizado:


Si te ha gustado esta página, programa o artículo puedes votar haciendo clic en este botón: