AnexGRID: ejemplo de CRUD con PHP

Vamos a implementar AnexGrid en nuestra plantilal Bootstrap 3 y realizar un ejemplo con PHP que implemente los métodos de CRUD.

Rodríguez Patiño, Eduardo
2020-09-27 | 14,446 lecturas

Antes que nada, quiero agredecer a los que les ha gustado AnexGRID, y por esta razón que estoy haciendo un par de ejemplos adicionales, este ejemplo incluye el listado de alumnos usando AnexGRID, registrar, actualizar y eliminar.

Preparando al servidor (PHP)

Lo primero que debemos hacer, es preparar a nuestro servidor (PHP) para que sepa comunicarse con AnexGRID, para esto ya tenemos automatizado un 70% del trabajo, ya que desarrolle una clase que se integra con AnexGRID.

public function Listar()
{
    try
    {
        /* AnexGRID */
        $anexgrid = new AnexGrid();

        /* Los registros */

        $sql = "
            SELECT * FROM alumnos
            ORDER BY $anexgrid->columna $anexgrid->columna_orden
            LIMIT $anexgrid->pagina, $anexgrid->limite
        ";

        $stm = $this->pdo->prepare( $sql );
        $stm->execute();

        $result = $stm->fetchAll(PDO::FETCH_OBJ);

        /* El total de registros */
        $total = $this->pdo->query("
            SELECT COUNT(*) Total
            FROM alumnos
        ")->fetchObject()->Total;

        return $anexgrid->responde($result, $total);
    }
    catch(Exception $e)
    {
        die($e->getMessage());
    }
}

Por lo tanto, cada ves que interactues con AnexGRID, es decir, pagines, filtres u ordenes registros se realizará una petición ajax al servidor, y con el código anterior es como nuestro servidor debe responder a las peticiones que solicita AnexGRID.

Adicionalmente, debemos hacer un print, ya que AnexGRID, el método responde, retorna un JSON que es necesario para crear la comunicación. En mi controlador lo tengo de la siguiente manera:

public function Listar()
{
    print_r($this->model->Listar());
}

Configurando AnexGRID

Esta configuración puede parecer tediosa si no tienes experiencia trabajando con grillas, pero a diferencia de otras, la configuración de este es mucho menor.

var agrid = $("#list").anexGrid({
    class: 'table-striped table-bordered',
    columnas: [
        { style: 'width:48px;' },
        { leyenda: 'Nombre', columna: 'Nombre', ordenable: true },
        { leyenda: 'Correo', columna: 'Correo', style: 'width:240px;', ordenable: true },
        { leyenda: 'Sexo', columna: 'Sexo', style: 'width:70px;', ordenable: true },
        { leyenda: 'Nacimiento', columna: 'FechaNacimiento', style: 'width:120px;', ordenable: true },
        { style: 'width:60px;' },
        { style: 'width:80px;' },
    ],
    modelo: [
        { propiedad: 'Foto', formato: function(tr, obj, celda){
            if(celda == '') return '';

            return anexGrid_imagen({
                src: 'uploads/' + celda,
                style: 'width:48px;'
            });
        }},
        { propiedad: 'Nombre', formato: function(tr, obj, celda){
            return obj.Nombre + ' ' + obj.Apellido;
        }},
        { propiedad: 'Correo' },
        { propiedad: 'Sexo', formato: function(tr, obj, celda){
            return celda == 1 ? 'Hombre' : 'Mujer';
        }},
        { propiedad: 'FechaNacimiento', class: 'text-right' },
        { formato: function(tr, obj, celda){
            return anexGrid_link({
                class: 'btn-primary btn-xs btn-block',
                contenido: 'Editar',
                href: '?c=Alumno&a=Crud&id=' + obj.id
            });    
        }},
        { formato: function(tr, obj, celda){
            return anexGrid_boton({
                class: 'btn-danger btn-xs btn-block btn-eliminar',
                contenido: 'Eliminar',
                value: tr.data('fila')
            });    
        }},
    ],
    url: '?c=Alumno&a=Listar',
    paginable: true,
    limite: 20,
    columna: 'id',
    columna_orden: 'DESC'
})

Como pueden observar, he creado 2 columnas en blanco, la cual solo le he especificado un ancho mediante la propeidad style.

columnas: [ 
  ... 
  { style: 'width:60px;' },
  { style: 'width:80px;' },
]

Dichas columnas, la vamos a usar para crear 2 botones en nuestro modelo (configuración de AnexGRID), para ello necesitamos usar la propiedad formato que nos permite personalizar el valor a mostrar en la celda.

modelo: [
    ...
    { formato: function(tr, obj, celda){
        return anexGrid_link({
            class: 'btn-primary btn-xs btn-block',
            contenido: 'Editar',
            href: '?c=Alumno&a=Crud&id=' + obj.id
        });    
    }},
    { formato: function(tr, obj, celda){
        return anexGrid_boton({
            class: 'btn-danger btn-xs btn-block btn-eliminar',
            contenido: 'Eliminar',
            value: tr.data('fila')
        });    
    }},
],

Lo ideal es que descarguen el proyecto, y vayan modificando las propiedades de configuración para entender su comportamiento.

Botones de acción

Como vimos, tenemos 2 botones, uno para editar y el otro para actualizar. Para el botón editar, simplemente hemos creado un enlace hacia la URL que muestra el formulario de edición, para ello usamos el control anexGrid_link.

{ formato: function(tr, obj, celda){
            return anexGrid_link({
                class: 'btn-primary btn-xs btn-block',
                contenido: 'Editar',
                href: '?c=Alumno&a=Crud&id=' + obj.id
            });    
        }},

Para el botón eliminar, he querido hacer algo diferente, he declarado una clase llamada .btn-eliminar y mediante jQuery voy a declarar un "evento click". Luego de generar al grilla, anexGRID retorna un objeto que contiene información de la grilla, entre ellas, un método llamado tabla(), el cual nos retorna el objeto tabla de la grilla actual, es a este que le voy a aplicar el evento click.

var agrid = $("#list").anexGrid({ ... });

agrid.tabla().on('click', '.btn-eliminar', function(){
    if(!confirm('¿Esta seguro de eliminar este registro?')) return;

    /* Obtiene el objeto actual de la fila seleccionada */
    var fila = agrid.obtener($(this).val());

    /* Petición ajax al servidor */
    $.post('?c=Alumno&a=Eliminar', {
        id: fila.id
    }, function(r){
        if(r) agrid.refrescar();
    }, 'json')

    return false;
})

Nuestro controlador responde lo siguiente:

public function Eliminar(){
    $this->model->Eliminar($_REQUEST['id']);
    echo json_encode(true);
}

Como responde TRUE, ya que asume que no ocurrió un error, refrescamos la grilla.

agrid.refrescar();

Alternativa: otra opción era crea un enlace para el botón eliminar y que apunte a la ruta del controlador, desde ahí, hacíamos un redirect a la página del listado.

Documentación y enlace de descarga en: http://anexsoft.com/anexgrid