Flexigrid con CodeIgniter

Surge la necesidad cada vez, de enconcontrar la forma de mostrar la información de la base de datos, de manera presentable, dandole al usuario fácil interacción con los registros. Habíamos publicado anteriormente, información sobre el Flexigrid, un plugin de JQuery bastante fácil de personalizar.

Testeado con CodeIgniter v2.x y Flexgrid v1.1

¿Por qué usar Flexigrid? - es sencillamente fácil de adaptar a tus proyectos ..

- el tamaño de las columnas se puede cambiar en tiempo de desarrollo o ejecución.
- permite filtrar facilmente los campos, pudiendo el programador, agregar nuevos filtros sin mayor complicación.
- permite la paginación de resultados.
- se puede mostrar u ocultar columnas del grid, en tiempo de ejecución o por defecto.
- el estilo es fácil de personalizar.
- permite ajustar el ancho de las columnas.
- permite ordenar los datos por columnas.
- permite conectarse (utilizando AJAX) a fuente de datos XML o JSON.
- permite mostrar u ocultar las columnas.

Veamos un ejemplo de como adaptarlo a CodeIgniter, a partir del código colgado en sanderkorvemaker.nl.

Descargar el ejemplo (sólo archivos del ejemplo)
Descargar el ejemplo completo (incluye el framework y sus configuraciones)

A continuación dejo visible sólo el código principal:

Modelo: grid_m.php

- clic aquí para ver el código

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Grid_m extends CI_Model {
    public function __construct(){
        parent::__construct();
        $this->load->database('mi_db');    
    }

    function eliminar_registros($items){
        
        if(empty($items)) return false;
        
        // eliminamos espacios en blancos y comas al final de la cadena
        $items    = rtrim($items,",");
        $arrItems = explode(',',$items);
        
        $this->db->where_in('id',$arrItems);// WHERE id IN ($items)
        $this->db->delete('country');

        return json_encode(array('total'=>$this->db->affected_rows()));
    }
    
    function eliminar_todo(){
        
        //$this->db->empty_table('country'); // elimina los registros uno por uno ..
        $this->db->truncate('country');  // borra la tabla y la recrea de nuevo 
        return true;
    }
    
    function _get_total($query='',$qtype='',$letter_pressed='Mostrar todo'){
     
        # ----------------------------------------------------------------------
        # si se usan las opciones de filtro
        if(!empty($qtype) and $letter_pressed<>'Mostrar todo'){
            
            // caso: se esta usando el buscador
            if($query!='')
                $this->db->like($qtype,$query);// WHERE campo LIKE %valor%  

            // caso: se filtra por letra
            elseif($letter_pressed!='')// WHERE campo LIKE valor%  
                $this->db->like($qtype,$letter_pressed, 'after');

            // caso: se filtra por titulo
            elseif($letter_pressed=='#')// WHERE campo REGEXP '[[:digit:]]' 
                $this->db->where($qtype, " REGEXP '[[:digit:]]' ");
        }#----------------------------------------------------------------------
        # la opcion (Mostrar todo) por defecto no aplicara filtro    
        
        $this->db->from('country');
        return $this->db->count_all_results();
    }

    // devuelve en formato JSON los datos ..
    function get_json($query,$qtype,$letter_pressed,$page
                ,$rp,$sortname,$sortorder){

        // obtenemos el total de registros solicitados..
        $total = $this->_get_total($query,$qtype,$letter_pressed);
        
        // numero de pagina por defecto 1
        $page = (int)(empty($page) ? 1 : $page);

        // numero de registros a mostrar, por defecto 10
        $rp = (int)(empty($rp) ? 10 : $rp);

        // desde donde comenzar
        $start = (($page-1) * $rp);

        // ordenar por X campo
        $sortname = empty($sortname) ? 'name' : $sortname;

        // orden ascendente o descendente
        $sortorder = empty($sortorder) ? 'desc' : $sortorder;
        
        // armamos la consulta
        $this->db->select('id, iso, name, printable_name, iso3, numcode');
        $this->db->from('country');
        
        # ----------------------------------------------------------------------
        # si se usan las opciones de filtro
        if(!empty($qtype) and $letter_pressed<>'Mostrar todo'){
            
            // caso: se esta usando el buscador
            if($query!='')
                $this->db->like($qtype,$query);// WHERE campo LIKE %valor%  

            // caso: se filtra por letra
            elseif($letter_pressed!='')// WHERE campo LIKE valor%  
                $this->db->like($qtype,$letter_pressed, 'after');

            // caso: se filtra por titulo
            elseif($letter_pressed=='#')// WHERE campo REGEXP '[[:digit:]]' 
                $this->db->where($qtype, " REGEXP '[[:digit:]]' ");
        }#----------------------------------------------------------------------

        $this->db->limit($rp, $start);
        $this->db->order_by($sortname, $sortorder);
        $query = $this->db->get();

       // echo $this->db->last_query();exit;
        
        // si hay resultados
        if ($query->num_rows()>0){

            // arrmamos un array con los datos a codificar
            $arrDatos = array(
                'page'  => $page,
                'total' => $total
            );
        
            foreach($query->result() as $row){

                $arrDatos['rows'][] = array(
                    'id'   => htmlspecialchars($row->id,ENT_QUOTES),
                    'cell' => array(
                            htmlspecialchars($row->id,ENT_QUOTES),
                            htmlspecialchars($row->iso,ENT_QUOTES),
                            htmlspecialchars($row->name,ENT_QUOTES),
                            htmlspecialchars($row->printable_name,ENT_QUOTES),
                            htmlspecialchars($row->iso3,ENT_QUOTES),
                            htmlspecialchars($row->numcode,ENT_QUOTES)
                    )
                );
            }#end foreach
            
            $query->free_result();
            return json_encode($arrDatos);
        }
    }
}
?>

Controlador: grid_c.php

- clic aquí para ver el código

<?php if ( ! defined('BASEPATH')) exit('No direct script access allowed');

class Grid_c extends CI_Controller {
    public function __construct(){
        parent::__construct();
     
        $this->load->model('grid_m','modelo');
    }

    public function get_json(){

        // armamos las condiciones segun sea el caso .. ------------------------
        $query          = $this->input->post('query');
        $qtype          = $this->input->post('qtype');
        $letter_pressed = $this->input->post('letter_pressed');
        $page           = $this->input->post('page');
        $rp             = $this->input->post('rp');
        $sortname       = $this->input->post('sortname');
        $sortorder      = $this->input->post('sortorder');

        // imprimimos los datos en formato json
        echo $this->modelo->get_json($query,$qtype,$letter_pressed,$page
                                                ,$rp,$sortname,$sortorder);
    }  
           
    public function index(){
       
        // indicamos que usaremos el flexgrid
        // esto indicara q se incluya la libreria 
        // y el css del flexgrid solo cuando se necesite
        $datos['ShowFlexgrid'] = true;
       
        // cargamos  la interfaz
        $this->load->view('grid_v', $datos);
    }
   
     public function eliminar_registros(){
       
         //echo $this->modelo->eliminar_registros($items);
         echo $this->modelo->eliminar_registros($this->input->post('items'));
     }
    
     public function eliminar_todo(){
       
        echo $this->modelo->eliminar_todo();
     } 
}
?>

Vista: grid_v.php

- clic aquí para ver el código

<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <script type="text/javascript" src="<?php echo base_url(); ?>js/jquery.js"></script>
   
    <?php
if(isset($ShowFlexgrid) and $ShowFlexgrid){
    echo '
<link rel="stylesheet" type="text/css" href="'.base_url().'js/flexigrid/flexigrid.css" />
<script type="text/javascript" src="'.base_url().'js/flexigrid/flexigrid.js"></script>
';
} ?>

</head>
<body>

<!-- establecemos las configuraciones -->
<script type="text/javascript">
$(document).ready(function(){

$("#flex1").flexigrid({

/* indicamos la dirección del archivo que desde el servidor se encarga de
acceder a la base de datos, puede ser un XML o una cadena en formato JSON
devuelta por un archivo PHP, por ejemplo.
*/
url: '<?php echo base_url(),'index.php/grid_c/get_json'; ?>',

// indicamos en que formato se manejaran los datos
dataType: 'json',

/* establecemos una lista de columnas a usar, indicando :
  display  -> el nombre que vera el usuario
  name     -> nombre interno de la columna
  width    -> anchura de la columna
  sortable -> si la columna se puede ordenar
  align    -> la alineación del texto.
*/
colModel : [
  {display: 'ID', name : 'id', width : 40, sortable : true, align: 'center'},
  {display: 'ISO', name : 'iso', width : 40, sortable : true, align: 'center'},
  {display: 'Nombre', name : 'name', width : 190, sortable : true, align: 'center'},
  {display: 'Printable', name : 'printable_name', width : 130, sortable : true, align: 'center'},
  {display: 'ISO3', name : 'iso3', width : 130, sortable : true, align: 'center', hide: false},
  {display: 'Codigo', name : 'numcode', width : 80, sortable : true, align: 'center'}
],

/* agregamos los botones que apareceran en la barra de herramientas
por ejemplo, botones para añadir, editar y eliminar registros.
con la propiedad BClass indicamos el tipo de boton, se establecera asi
la imagen de fondo para el botón
ejemplo: {name: 'Eliminar', bclass: 'add', onpress : funcion_eliminar}
*/
               
buttons : [
  {name: 'Agregar', bclass: 'agregar', onpress : test, title:'Agregar nuevo registro'},
  {name: 'Editar', bclass: 'editar', onpress : test, title:'Editar registro'},
  {name: 'Eliminar', bclass: 'eliminar', onpress : test, title:'Eliminar registro(s)'},
  {name: 'Eliminar todo', bclass: 'eliminar_todo', onpress : test, title:'Eliminar todos los registros'},
  {name: 'Mostrar todo', bclass: 'mostrar_todo', onpress : filtro, title:'Mostrar todos los registros'},
  /*{separator: true},
  {name: '[Mostrar todo]', onpress: filtro},*/
  {separator: true}, // linea separadora
  {name: 'A', onpress: filtro},
  {name: 'B', onpress: filtro},
  {name: 'C', onpress: filtro},
  {name: 'D', onpress: filtro},
  {name: 'E', onpress: filtro},
  {name: 'F', onpress: filtro},
  {name: 'G', onpress: filtro},
  {name: 'H', onpress: filtro},
  {name: 'I', onpress: filtro},
  {name: 'J', onpress: filtro},
  {name: 'K', onpress: filtro},
  {name: 'L', onpress: filtro},
  {name: 'M', onpress: filtro},
  {name: 'N', onpress: filtro},
  {name: 'O', onpress: filtro},
  {name: 'P', onpress: filtro},
  {name: 'Q', onpress: filtro},
  {name: 'R', onpress: filtro},
  {name: 'S', onpress: filtro},
  {name: 'T', onpress: filtro},
  {name: 'U', onpress: filtro},
  {name: 'V', onpress: filtro},
  {name: 'W', onpress: filtro},
  {name: 'X', onpress: filtro},
  {name: 'Y', onpress: filtro},
  {name: 'Z', onpress: filtro},
  {separator: true},
  {name: '#', onpress: filtro, title:'Buscar por números'}
],

// indicamos que columnas se pueden usar para filtrar las busquedas
searchitems : [
  {display: 'ISO', name : 'iso'},
  {display: 'Name', name : 'name', isdefault: true}
],

// indicamos el nombre de la columna con la
// q se ordenaran los registros por defecto
sortname: 'id',

// indicamos que por defecto los registros se mostraran ascendentemente
sortorder: "asc",

// esta propiedad permite activar o desactivar los botones de navegación de la página
usepager: true,

// titulo que aparecerá en la ventana
title: 'Lista de Paises',

// indicamos si se permite al usuario especificar el número de resultados por página.
useRp: true,

// numero de registros a mostrar, por defecto 30
rp: 30,

// esta propiedad permite establecer si se puede o no, minimizar la Flexigrid
// (icono en la esquina superior derecha)
showTableToggleBtn: true,

// ancho de la flexigrid por defecto
width: 700,

// alto de la flexigrid por defecto
height: 440

});});

function redireccionar(sControlador){ 
    $(location).attr('href',"<?php echo base_url(); ?>index.php/" + sControlador);
}

// funcion para los botones de filtro
function filtro(com){
   jQuery('#flex1').flexOptions({
      // indicamos los parametros del filtro
      newp:1, 
      params:[
         {name:'letter_pressed', value: com},
         {name:'qtype',value:$('select[name=qtype]').val()}
      ]
   });

   // recargamos la grid
   jQuery("#flex1").flexReload();
}

function test(com, grid){
       
    if (com == 'Agregar'){
        redireccionar('add_edit_grid_c/index/ins');
   
    }else if (com == 'Editar'){
        if($('.trSelected',grid).length==1){

               var items = $('.trSelected',grid);
               var itemlist = items[0].id; // id es la primera columna 
               redireccionar('add_edit_grid_c/index/upd/' + itemlist);

        }else if($('.trSelected',grid).length>1){
            alert('Sólo puede seleccionar un registro para editar..');
            return false;
    }else {
            alert('Debe seleccionar un registro pata poder actualizarlo..');
            return false;
        }
   
    }else if (com == 'Eliminar') {

        if($('.trSelected',grid).length>0){
            if(confirm('Ha seleccionado ' + $('.trSelected',grid).length + ' registro(s) ¿desea eliminarlo(s)?')){
                var items = $('.trSelected',grid);
                var itemlist = items[0].id;// id es la primera columna
        $.ajax({
                    type: "POST",
                    dataType: "json",
                    url: "<?php echo base_url(),'index.php/grid_c/eliminar_registros'; ?>",
                    data: "items="+itemlist,
                    success: function(data){
                        alert("Se ha(n) eliminado un total de " + data.total + " registro(s).");
                        $("#flex1").flexReload();
                    }
                });
            }
    } else {
            alert('Debe seleccionar un registro pata poder eliminarlo..');
            return false;
        }
    }else if (com == 'Eliminar todo'){
       
        if(confirm('¿Realmente desea eliminar todo los registros de la tabla?')){
            $.ajax({
                type: "POST",
                dataType: "json",
                url: '<?php echo base_url(),'index.php/grid_c/eliminar_todo'; ?>',
                success: function(data){
                    alert("Se han eliminado todos los registros de la tabla.");
                    $("#flex1").flexReload();
                }
            });
    }
    }
}
</script>
<table id="flex1" style="display:none;font-size:11px;"></table>
</body>
</html>

Ahí se los dejo..

Enlaces:
Web oficial: flexigrid.info
Framework: codeigniter.com

Publicar un comentario

6Comentarios

- Los comentarios están siendo moderados y serán publicados en la brevedad posible.

Víctor Torres1/5/12, 1:41
interesante el post, habrá que probarlo, gracias
ResponderEliminar
Respuestas
Blog by Franco11/3/15, 11:01
i don't understand what url i must type. I install CI successfully and I copy your files from your drobox link http://127.0.0.1/ci_flexgrid/index.php/????

ci_flexigrid is my codeigniter folder
ResponderEliminar
Respuestas
Blog by Franco13/3/15, 7:32
hola! Puede compartir en zip su demo con CodeIgniter + Flexigrid? No entiendo cómo integrar el código. Cuando voy a escribir 127.0.0.1/index.php/grid_c/get_json me valores Flexigrid pero la tabla no se carga.
Es como si se perdió por completo las javascript y css
ResponderEliminar
Respuestas
Reinaldo IC.13/3/15, 17:05
hola, el demo lo puede descargar desde el siguiente enlace:
https://www.dropbox.com/s/cfo210rlvxw4o6m/ci_flexgrid.zip

si desea, déjeme un enlace de descarga del proyecto que lleva hecho para revisar el código.
ResponderEliminar
Respuestas
nando28/8/16, 3:48
Hola Reinaldo, descargue el ejemplo que tienes, pero difiere al que muestras en la imagen.
Lo cierto es que necesito ese ejemplo ya que permite realizar las tareas mas recurrentes.
Si pudieras publicarla te lo agrdeceria mucho. gracias
ResponderEliminar
Respuestas
Reinaldo IC.28/8/16, 12:09
Hola, el ejemplo usa CodeIgniter v2.x y Flexgrid v1.1, debes configurar el framework para que trabaje correctamente (el autoload.php, subir el script de la base de datos y configurar el database.php, etc.), te dejo el enlace al ejemplo completo con el framework configurado:

https://www.dropbox.com/s/gezk3q1q4ldgngh/ci_flexgrid_completo.zip?dl=0
ResponderEliminar
Respuestas

Añadir comentario

Flexigrid con CodeIgniter

Entradas relacionadas:

Publicar un comentario

CodeIgniter: un core, varias aplicaciones..

Sobre el autor

Contact form