Ejemplos de AnexGRID

Ejemplo básico

AnexGRID ha sido desarrollado para consumir datos vía peticiones XHR (Ajax) usando el formato JSON, así que para poder tenerlo en acción, se requiere realizar una petición al servidor obligatoriamente.

<div id="ejemplo-1"></div>
Configuración
Estas propiedades de configuración son lo básico para poner en funcionamiento a AnexGRID.
var ejemplo_1 = {
    class: 'table-striped table-bordered',
    columnas: [
        { leyenda: 'Profesión', style: 'width:200px;', columna: 'Profesion_id' },
        { leyenda: 'Empleado', columna: 'Nombre', filtro: true },
        { leyenda: 'Correo', style: 'width:300px;', columna: 'Correo' },
        { leyenda: 'Sexo', style: 'width:120px;' },
        { leyenda: 'Sueldo', style: 'width:100px;', columna: 'Sueldo' },
        { leyenda: 'Registro', style: 'width:100px;', columna: 'FechaRegistro' }
    ],
    modelo: [
        { propiedad: 'Profesion.Nombre' },
        { formato: function(tr, obj, valor){
            return obj.Nombre + ' ' + obj.Apellido;
        }},
        { propiedad: 'Correo' },
        { propiedad: 'Sexo', formato: function(tr, obj, valor){
            return obj.Sexo == 1 ? 'Masculino' : 'Femenino';
        }},
        { propiedad: 'Sueldo', class: 'text-right', },
        { propiedad: 'FechaRegistro', class: 'text-right' }
    ],
    url: 'data.php',
    limite: 20,
    columna: 'id',
    columna_orden: 'DESC'
};
Implementación
$(document).ready(function(){
    $("#ejemplo-1").anexGrid(ejemplo_1);
})
Enviado
limite=20&pagina=1&columna=id&columna_orden=DESC
Respuesta
{
    data: [
        {
            "id":"580",
            "Correo":"jvizconde.paredez@outlook.pe",
            "Nombre":"Juan",
            "Apellido":"Vizconde Paredez",
            "Sexo":"1",
            "Sueldo":"5581.00",
            "Profesion_id":"5",
            "FechaNacimiento":"1981-07-01",
            "FechaRegistro":"2014-07-20",
            "Profesion":{
                "id":"5",
                "Nombre":"Ingeniero de Sistemas"
            }
        },
        ...
    ],
    total: 600
}                              
Ordenamiento y Paginación
<div id="ejemplo-2"></div>

Ordenamiento

Debemos agregar dentro de nuestra configuración, a las columnas que queremos que sean ordenables la siguientes propiedades:

  • ordenable: true
  • columna: 'Columna de la tabla de la base de datos'

Paginación

Para poder paginar la grilla, se requiere el uso de las siguientes propiedades:

  • paginable: true
  • limite: podemos asignar un entero o un array de enteros.

    • [20, 40, 60]: le indica que el usuario puede elegir la cantidad de registros a mostrar por página.
    • 20: le indica a la grilla que el usuario puede ver 20 registros por página.
$("#ejemplo-2").anexGrid({
    class: 'table-striped table-bordered',
    columnas: [
        { leyenda: 'Profesión', style: 'width:200px;', columna: 'Profesion_id', ordenable: true },
        { leyenda: 'Empleado', columna: 'Nombre', ordenable: true },
        { leyenda: 'Correo', style: 'width:300px;', columna: 'Correo', ordenable: true },
        { leyenda: 'Sexo', style: 'width:120px;', columna: 'Sexo', ordenable: true },
        { leyenda: 'Sueldo', style: 'width:100px;', columna: 'Sueldo', ordenable: true },
        { leyenda: 'Registro', style: 'width:100px;', columna: 'FechaRegistro', ordenable: true }
    ],
    modelo: [
        { propiedad: 'Profesion.Nombre' },
        { formato: function(tr, obj, valor){
            return obj.Nombre + ' ' + obj.Apellido;
        }},
        { propiedad: 'Correo' },
        { propiedad: 'Sexo', formato: function(tr, obj, valor){
            return obj.Sexo == 1 ? 'Masculino' : 'Femenino';
        }},
        { propiedad: 'Sueldo', class: 'text-right', },
        { propiedad: 'FechaRegistro', class: 'text-right' }
    ],
    url: 'data.php',
    limite: [20, 40, 60],
    paginable: true,
    columna: 'id',
    columna_orden: 'DESC'
});
Filtros
<div id="ejemplo-3"></div>

Filtro de caja de texto (textbox)

Para indicarle a la columna que el filtro a usar es una caja de texto, debemos especificar la propiedad filtro.

filtro: true

Filtro de selección (select)

Para indicarle a la columna que el filtro a usar es un select, debemos especificarle a la propiedad filtro que recibe una función, esta deberá retornar el control select de AnexGRID.

columnas: [
    { leyenda: 'Profesión', style: 'width:200px;', columna: 'Profesion_id', filtro: function(){
        return anexGrid_select({
            data: [
                { valor: '', contenido: 'Todos' },
                { valor: '1', contenido: 'Abogado' },
                { valor: '2', contenido: 'Bombero' },
                { valor: '3', contenido: 'Doctor' },
                { valor: '4', contenido: 'Ingeniero Civil' },
                { valor: '5', contenido: 'Ingeniero de Sistemas' },
                { valor: '6', contenido: 'Músico' },
            ]
        });
    }},
                                    
En un futuro se esperà habilitar màs controles de filtro, por eso usa una funciòn como paràmetro de entrada.

Nota

En las pautas anteriores le indicamos a AnexGRID que columnas van a implementar filtros, adicionalmente, para que AnexGRID sepa que hay filtros a implementar debemos indicarle la propiedad filtrable a true.

{
    class: 'table-striped table-bordered',
    columnas: [
        ...
    ],
    modelo: [
        ...
    ],
    url: ...,
    filtrable: true,
    columna: ...,
    columna_orden: ...
}
                                    

Ejemplo completo

Al declarar las columnas y la propiedad filtro, tambíen debemos especificar el nombre de la columna (esta hace referencia al campo de la consulta que realiza a la base de datos) para que AnexGRID sepa que columna quiere filtrar.

$("#ejemplo-3").anexGrid({
    class: 'table-striped table-bordered',
    columnas: [
        { leyenda: 'Profesión', style: 'width:200px;', columna: 'Profesion_id', filtro: function(){
            return anexGrid_select({
                data: [
                    { valor: '', contenido: 'Todos' },
                    { valor: '1', contenido: 'Abogado' },
                    { valor: '2', contenido: 'Bombero' },
                    { valor: '3', contenido: 'Doctor' },
                    { valor: '4', contenido: 'Ingeniero Civil' },
                    { valor: '5', contenido: 'Ingeniero de Sistemas' },
                    { valor: '6', contenido: 'Músico' },
                ]
            });
        }},
        { leyenda: 'Empleado', columna: 'Nombre', filtro: true },
        { leyenda: 'Correo', style: 'width:300px;', columna: 'Correo' },
        { leyenda: 'Sexo', style: 'width:120px;', columna: 'Sexo'},
        { leyenda: 'Sueldo', style: 'width:100px;', columna: 'Sueldo' },
        { leyenda: 'Registro', style: 'width:100px;', columna: 'FechaRegistro' }
    ],
    modelo: [
        { propiedad: 'Profesion.Nombre' },
        { formato: function(tr, obj, valor){
            return obj.Nombre + ' ' + obj.Apellido;
        }},
        { propiedad: 'Correo' },
        { propiedad: 'Sexo', formato: function(tr, obj, valor){
            return obj.Sexo == 1 ? 'Masculino' : 'Femenino';
        }},
        { propiedad: 'Sueldo', class: 'text-right', },
        { propiedad: 'FechaRegistro', class: 'text-right' }
    ],
    url: 'data.php',
    filtrable: true,
    columna: 'id',
    columna_orden: 'DESC'
});
Celdas personalizadas y controles AnexGRID
<div id="ejemplo-4"></div>
Se recomienda leer la documentación para entender el uso de cada control y sus propiedades.

Definiendo una celda personalizada

Al definir el modelo en la configuraciòn de AnexGRID, cada una de ellas tiene una propiedad llamada formato, si esta es especificada, quiere decir que vas a generar un valor personalizado para dicha celda.

El formato recibe 3 parámetros:

  • tr: hace referencia a la fila actual, exactamente a la etiqueta HTML <tr>.
  • obj: hace referencia al objeto actual de nuestra colección, es decir que podemos acceder a cualquiera de las propiedades del indice actual de nuestra colección.
  • celda: si la propiedad "propiedad" ha sido definido para fila actual, retorná el valor de la propiedad actual..
modelo: [
    { propiedad: 'Profesion_id', style: 'width:32px;', class: 'text-center', formato:function(tr, obj, celda){
        var imagen = '';

        if(celda == 1) imagen = 'abogado.png';
        if(celda == 2) imagen = 'bombero.jpg';
        if(celda == 3) imagen = 'doctor.png';
        if(celda == 4) imagen = 'ingeniero.jpg';
        if(celda == 5) imagen = 'ingeniero.jpg';
        if(celda == 6) imagen = 'musico.jpg';

        return anexGrid_imagen({
            src: 'assets/images/' + imagen
        })
    }},
    { propiedad: 'Profesion.Nombre' },
    ... 
                                    

Controles AnexGRID

Se han creado 6 controles para agilizar código.

  • anexGrid_select: genera un select HTMl.
    return anexGrid_select({
        data: [
            { valor: '', contenido: 'Todos' },
            { valor: '1', contenido: 'Abogado' },
            { valor: '2', contenido: 'Bombero' },
            { valor: '3', contenido: 'Doctor' },
            { valor: '4', contenido: 'Ingeniero Civil' },
            { valor: '5', contenido: 'Ingeniero de Sistemas' },
            { valor: '6', contenido: 'Músico' },
        ]
    });
                                                
  • anexGrid_input: genera un input HTMl.
    return anexGrid_input({
        value: 'Soy una caja de texto'
    });
                                                
  • anexGrid_imagen: genera una imagen HTMl.
    return anexGrid_input({
        src: 'la ruta de la imagen'
    });
                                                
  • anexGrid_link: genera un enlace HTML.
    return anexGrid_link({
        contenido: 'texto para el enlace',
        href: 'la ruta del enlace'
    });
                                                
  • anexGrid_dropdown: genera un dropdown de Bootstrap 3.
    
    return anexGrid_dropdown({
        contenido: '<i class="glyphicon glyphicon-cog"></i>',
        class: 'btn btn-primary btn-xs',
        target: '_blank',
        id: 'editar-' + obj.id,
        data: [
            { href: '#', contenido: 'Editar' },
            { href: '#', contenido: 'Eliminar' }
        ]
    });
                                                

Ejemplo completo

$("#ejemplo-4").anexGrid({
    class: 'table-striped table-bordered',
    columnas: [
        { style: 'width:60px;' },
        { leyenda: 'Profesión', style: 'width:140px;' },
        { leyenda: 'Empleado' },
        { leyenda: 'Correo', style: 'width:220px;' },
        { leyenda: 'Sexo', style: 'width:120px;' },
        { leyenda: 'Sueldo', style: 'width:80px;' },
        { leyenda: 'Registro', style: 'width:100px;' },
        { leyenda: 'Editar', style: 'width:40px' },
        { leyenda: 'Eliminar', style: 'width:40px' }
    ],
    modelo: [
        { propiedad: 'Profesion_id', style: 'width:32px;', class: 'text-center', formato:function(tr, obj, celda){
            var imagen = '';

            if(celda == 1) imagen = 'abogado.png';
            if(celda == 2) imagen = 'bombero.jpg';
            if(celda == 3) imagen = 'doctor.png';
            if(celda == 4) imagen = 'ingeniero.jpg';
            if(celda == 5) imagen = 'ingeniero.jpg';
            if(celda == 6) imagen = 'musico.jpg';

            return anexGrid_imagen({
                src: 'assets/images/' + imagen
            })
        }},
        { propiedad: 'Profesion.Nombre' },
        { formato: function(tr, obj, valor){
            return obj.Nombre + ' ' + obj.Apellido;
        }},
        { propiedad: 'Correo' },
        { propiedad: 'Sexo', formato: function(tr, obj, valor){
            return obj.Sexo == 1 ? 'Masculino' : 'Femenino';
        }},
        { propiedad: 'Sueldo', class: 'text-right', function(tr, obj, celda){
            return valor.toFixed(2);
        }},
        { propiedad: 'FechaRegistro', class: 'text-right' },
        { formato: function(tr, obj, celda){
            return anexGrid_boton({
                clase: 'btn-primary',
                contenido: '<i class="glyphicon glyphicon-pencil"></i>',
                attr: [
                    'onclick="alert(\'Soy el botón editar, el ID de este registro es: ' + obj.id + '\');"'
                ]
            });
        }},
        { formato: function(tr, obj, celda){
            return anexGrid_boton({
                class: 'btn-danger',
                contenido: '<i class="glyphicon glyphicon-remove"></i>',
                attr: [
                    'onclick="alert(\'Soy el botón eliminar, el ID de este registro es: ' + obj.id + '\');"'
                ]
            });
        }}
    ],
    url: 'data.php',
    columna: 'id',
    columna_orden: 'DESC'
});                                    
Columnas personalizadas

Ahora puedes darle formato a las columnas, algunos querían agregar un ícono a la leyenda de la cabecera. Puedes realizar esto facilmente pero recuerda, si vas a usar la ordenación no intentes personalizar la leyenda de tu cabecera usando una etiqueta de enlace, porque vas a generar un enlace dentro de otro enlace, ya que la ordenación genera un enlace para la leyenda.

<div id="ejemplo-6"></div>

Para personalizar el formato usamos la propiedad formato dentro de las columnas y lo que retornemos será lo que mostrará la cabecera como leyenda.

{ leyenda: 'Empleado', class: '', ordenable: true, columna: 'Nombre', filtro: true, formato: function(){
    return '<i class="glyphicon glyphicon-user"></i> Nombre';
} },
{ leyenda: 'Correo', style: 'width:300px;', ordenable: true, filtro: true, columna: 'Correo', formato: function(){
    return '<i class="glyphicon glyphicon-envelope"></i>';
} },
Eventos de selecciòn, click y/o otros

AnexGRID ha dejado la manipulaciòn de eventos a libertad del usuario ya sea usando javascript puro o jQuery. En conclusión, al momento de declarar un botón en la grilla podrìamos agregarle una clase o id y llamarlo mediante un evento click.

<div id="ejemplo-5"></div>
var anexGrid = $("#ejemplo-5").anexGrid({
class: 'table-striped table-bordered',
columnas: [
{ leyenda: 'Profesión', style: 'width:140px;' },
{ leyenda: 'Empleado' },
{ leyenda: 'Correo', style: 'width:220px;' },
{ leyenda: 'Sexo', style: 'width:120px;' },
{ leyenda: 'Sueldo', style: 'width:80px;' },
{ leyenda: 'Registro', style: 'width:100px;' },
{ leyenda: 'Editar', style: 'width:40px' }
],
modelo: [
{ propiedad: 'Profesion.Nombre' },
{ formato: function(tr, obj, valor){
    return obj.Nombre + ' ' + obj.Apellido;
}},
{ propiedad: 'Correo' },
{ propiedad: 'Sexo', formato: function(tr, obj, valor){
    return obj.Sexo == 1 ? 'Masculino' : 'Femenino';
}},
{ propiedad: 'Sueldo', class: 'text-right', function(tr, obj, celda){
    return valor.toFixed(2);
}},
{ propiedad: 'FechaRegistro', class: 'text-right' },
{ formato: function(tr, obj, celda){
    var fila_id = tr.data('fila');
    return '<button value="' + fila_id + '" type="button" class="btn btn-primary btn-editar">Editar</button>';
}}
],
url: 'data.php',
columna: 'id',
columna_orden: 'DESC'
});                            
anexGrid.tabla().on('click', '.btn-editar', function(){
var obj = anexGrid.obtener($(this).val());
alert('Se hizo hizo click al empleado ' + obj.Nombre + ' ' + obj.Apellido);
})
ASP.NET MVC y PHP

Se adjuntan los ejemplos para ambas tecnologías incluyendo el código de fuente y backup de la base de datos.

Dudas y/o sugerencias deja un comentario ..

Desarrollado por Anexsoft.