Anexsoft | Blog y dictado de cursos de Tecnología

En este encontrarás tutoriales de tecnología como PHP, ASP.NET MVC, Front-End, entre otros y cursos exigentes de modalidad online que te ayudarán a crecer profesionalmente.

AnexGRID: ejemplo de CRUD con PHP
Actualizado el 21 Enero, 2016 y leído 9,874 veces
Calificación: 9.50 / 10

AnexGRID: ejemplo de CRUD con PHP

Anexsoft

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

¡Adquiera ya!

  • Código de fuente de Red Social desarrollada en ASP.NET MVC

    Código de fuente de Red Social desarrollada en ASP.NET MVC
  • Software de Venta e Inventario hecho en PHP y Codeigniter

    Software de Venta e Inventario hecho en PHP y Codeigniter
  • Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#

    Software de Portafolio Profesional hecho en ASP.NET MVC 5 C#

Últimas publicaciones

Encuesta

¿Sobre qué te gustaría que se hable más?

Síguenos

Estudia con nosotros y crece profesionalmente

Nuestros cursos han sido hecho en base a lo que demanda el mercado hoy en día.
La experiencia obtenida es la de un ambiente laboral.

Anexsoft
© 2017 Anexsoft, blog y cursos online de TI.