Flexigrid es una herramienta poderosa y flexible basada en jQuery que simplifica la gestión y el análisis de datos en diversos proyectos. Su interfaz intuitiva y su amplia gama de funciones hacen que sea accesible para usuarios con diferentes niveles de experiencia en la manipulación de datos. Si estás buscando una solución eficiente para gestionar tus datos y obtener información valiosa, no dudes en explorar todo lo que Flexigrid tiene para ofrecer.

En el mundo de la programación web, la gestión de datos enriquecidos y su presentación efectiva son aspectos clave para el éxito de cualquier proyecto. Es aquí donde entra en juego Flexigrid, una potente biblioteca para jQuery que simplifica la manipulación, visualización y ordenación de datos en una interfaz dinámica y amigable para el usuario. Si estás buscando una forma eficiente y elegante de administrar tus datos, continúa leyendo esta guía completa sobre cómo utilizar Flexigrid.

Flexigrid ofrece una amplia gama de funcionalidades adicionales que se adaptan a diferentes casos de uso y necesidades específicas. Puedes aprovechar su capacidad para trabajar con datos en tiempo real, integrarlo con otras herramientas y sistemas, y personalizar su apariencia y funcionalidad para que se ajuste perfectamente a tus requerimientos.

Para comenzar a utilizar Flexigrid en tus proyectos con jQuery, sigue estos pasos:

1. Incluir la biblioteca Flexigrid: Descarga la última versión de Flexigrid desde el sitio oficial y asegúrate de incluir la biblioteca jQuery en tu proyecto.

2. Inicializar Flexigrid: Utiliza el selector jQuery para seleccionar la tabla y llamar a la función flexigrid() para inicializarla. Puedes especificar opciones como la URL de los datos, el tipo de solicitud (GET o POST), y personalizar el diseño y el comportamiento de la tabla según tus necesidades.

3. Obtener datos dinámicamente: Configura la URL de los datos en la opción correspondiente y asegúrate de que tu servidor proporcione los datos en el formato adecuado (por ejemplo, JSON). Flexigrid se encargará de cargar y visualizar automáticamente los datos en la tabla.

4. Personalizar y agregar funcionalidades: Explora las numerosas opciones y métodos proporcionados por Flexigrid para personalizar la apariencia y el comportamiento de la tabla. Puedes agregar funciones de ordenación, filtrado, paginación y búsqueda para mejorar la experiencia del usuario.

5. Implementar acciones personalizadas: Utiliza los eventos y métodos de Flexigrid para agregar acciones personalizadas a la tabla. Por ejemplo, puedes agregar un botón de "Editar" que permita al usuario modificar los datos directamente en la tabla y luego guardar los cambios.

Ejemplo básico de uso:

En nuestro html.

//Definimos el contenedor 
<table id="grid"></table>

Preparamos el Flexigrid en el js.

<script>
$(document).ready(function() {
  $('#grid').flexigrid({
    url: 'datos.json',
    dataType: 'json',
    colModel: [
      { display: 'ID', name: 'id', width: 80, sortable: true, align: 'center' },
      { display: 'Nombre', name: 'nombre', width: 200, sortable: true, align: 'left' },
      { display: 'Edad', name: 'edad', width: 80, sortable: true, align: 'center' }
    ],
    sortname: 'id',
    sortorder: 'asc',
    usepager: true,
    title: 'Datos de ejemplo',
    useRp: true,
    rp: 10,
    showTableToggleBtn: true,
    height: 200
  });
});
</script>

En este caso los datos los recogemos de un archivo json llamado datos.json pero se puede recoger de una URL o una variable.

//datos.jon
[
  { "id": 1, "nombre": "Juan", "edad": 25 },
  { "id": 2, "nombre": "María", "edad": 30 },
  { "id": 3, "nombre": "Pedro", "edad": 35 }
]

Con estos pasos básicos, habrás configurado un Flexigrid simple que muestra los datos del archivo JSON en una tabla con opciones de ordenamiento, paginación y personalización. Puedes explorar las opciones de Flexigrid y ajustarlas según tus necesidades específicas.

Recuerda incluir las bibliotecas de Flexigrid (jquery.flexigrid.js y flexigrid.css) en tu proyecto y asegurarte de que las rutas de los archivos estén correctamente especificadas en el código HTML.

Opciones de configuración de Flexigrid

    height:          200,                // altura
    width:           'auto',             // ancho auto
    buttons:         btns,               // botones opcionales
    striped:         true,               // aplica colores pares/impares
    novstripe:       false,
    minwidth:        30,                 // ancho minimo de columnas
    minheight:       80,                 // altura minima de columnas
    resizable:       true,               // redimensionamiento
    url:             false,              // URL, archivo o variable
    method:          'POST',             // metodo de envio
    dataType:        'xml',              // xml o json
    errormsg:        'Error de conexión', // mensaje error
    usepager:        false,
    nowrap:          true,
    page:            1,                     // pagina actual
    total:           1,                     // total paginas
    useRp:           true,                  // caja de resultados
    rp:              15,                    // resultados por pagina
    rpOptions:       [10, 15, 20, 30, 50],  // resultados 
    title:           false,                 // titulo
    idProperty:      'id',
    pagestat:        'Mostrando del {from} al {to} de {total} resultados',
    pagetext:        'Página',
    outof:           'de',
    findtext:        'Buscar',
    params:          [],                    // enviar datos
    procmsg:         'Cargando ...',
    query:           '',
    qtype:           '',
    nomsg:           'No hay resultados',
    minColToggle:    1,              
    showToggleBtn:   true,                  // muestra un toggle
    hideOnSubmit:    true,
    autoload:        true,
    blockOpacity:    0.5,
    preProcess:      false,
    addTitleToCell:  false,                 
    dblClickResize:  false,                 
    singleSelect:    true,                  // Eleccion simple
    onDragCol:       false,
    onToggleCol:     false,
    onChangeSort:    false,
    onDoubleClick:   false,
    onSuccess:       false,                // Una vez cargada la tabla
    onError:         false,
    onSubmit:        false,                 

Opciones de las columnas

La opción colModel es un Array de objetos que especifica las columnas presentes en la tabla. Cada objeto describe una columna y debe contener los siguientes atributos:

display:   ...,   //Titulo columna
name:      ...,   //Nombre columna
width:     ...,   //ancho columna
sortable:  false, // ordenacion
align:     'left'|'center'|'right', //alineacion
hide:      false      // ocultar columnas

colModel: [
      { display: 'ID', name: 'id', width: 80, sortable: true, align: 'center' },
      { display: 'Nombre', name: 'nombre', width: 200, sortable: true, align: 'left' },
      { display: 'Edad', name: 'edad', width: 80, sortable: true, align: 'center', hide: true }
    ],

Botones en la tabla

Podremos insertar botones en la parte de arriba de la tabla para lanzar diversas funciones.

buttons: btns

var btns = [
		{label: 'Texto botón', name: 'nombre', bclass: 'clase', onpress: lanzarFuncion},
		{separator: true},
        {label: 'Otro botón', name: 'nombre', bclass: 'clase', onpress: lanzarOtraFuncion}
	];

Para recoger datos del Flexigrid por si queremos trabajar con ellos lo haremos en el onSuccess

Si queremos hacerlo individualmente:

let campo = $(grid + ' .trSelected:first').find("td[abbr='nombre']").text();

Si queremos coger todos los campos:

onSuccess: function () {

// Obtener los datos del JSON una vez recibidos
var rows = $(#grid).find('tbody tr');
var datos = [];
                
// Recorrer cada fila y obtener los datos deseados
rows.each(function() {
 var fila = $(this);
 var id = fila.find("td[abbr='id']").text();
 var nombre = fila.find("td[abbr='nombre']").text();
 var edad = fila.find("td[abbr='edad']").text();

// Crear un objeto con los datos
 var dato = {
  id: id,
  nombre: nombre,
  edad: edad
 };
                    
// Agregar el objeto al arreglo de datos
 datos.push(dato);
});

// Ya tenemos nuestro objeto
console.log(datos);
}