Cargando



Flexigrid grilla dinamica con JQuery y PHP

Esta libreria nos permite crear un crud con una grilla mediante JQuery y una tabla html. Mediante PHP y MySQL podemos incorporar datos.


mar 17 2016 21:40
Avanzado
mar 18 2016 10:43

Flexigrid con pHp y consultas MySQL

 

panta01.jpg

 

Flexigrid es una librería de JQuery libre y gratuita, que permite mostrar en una grilla el resultado de una consulta de datos, listarlos en un tabla, paginarlos, ordenarlos e interactuar con los datos. Flexigrid puede utilizar distintas fuentes de datos como ser XML, consultas a la base de datos usando PHP y devolver los datos en formato JSON para que sean mostrados por Flexgrid.

 

Podemos descargar Flexigrid desde su pagina oficial.

 

Cómo utilizar Flexigrid con pHp y consultas MySQL


Después de descargar Flexigrid, descomprimimos el archivo zip, luego en un servidor local o remoto como vimos en el tutorial para instalarte Xampp para convertir tu ordenador en un servidor web, crearemos una carpeta para contener el ejemplo, necesitamos las carpetas CSS y JS que son las librerías de Flexigrid.

 

panta02.jpg

 

También debe tener una versión de jQuery podemos utilizar una versión online como:

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
También podemos descargar la versión desde la pagina oficial jQuery.com. jQuery es una biblioteca de funciones de JavaScript.

 

A continuación vamos a crear una base de datos desde phpmyadmin para utilizar en el ejemplo

 

Base de datos: `FlexEmpresa`

CREATE DATABASE IF NOT EXISTS `FlexEmpresa` DEFAULT CHARACTER SET latin1 COLLATE latin1_swedish_ci;
Estructura de tabla para la tabla `clientes`
CREATE TABLE IF NOT EXISTS `clientes` (
  `id` int(11) NOT NULL,
  `nombre` varchar(100) DEFAULT NULL,
  `domicilio` varchar(255) NOT NULL,
  `ciudad` varchar(255) NOT NULL,
  `provincia` varchar(150) DEFAULT NULL
) ENGINE=MyISAM AUTO_INCREMENT=7 DEFAULT CHARSET=utf8;
Volcado de datos para la tabla `clientes`
INSERT INTO `clientes` (`id`, `nombre`, `domicilio`, `ciudad`, `provincia`) VALUES
(1, 'Adela Resjez', 'Lore de Balca 435', 'Madrid', 'Madrid'),
(2, 'Gretel Martinez', 'Juan XXIII 1232', 'Barcelona', 'Barcelona'),
(3, 'Olivia Asri', 'Marina Sur 123', 'Aranjuez ', 'Madrid'),
(4, 'Ledi Widaya', 'Calle 1 Norte 456', 'Sabadell', 'Barcelona'),
(5, 'Alfonso Praudi', 'Salerno 48 Piso 1', 'Valencia', 'Valencia'),
(6, 'Jose Albertez', 'Calle 13 586', 'Sevilla', 'Sevilla');
Indices de la tabla `clientes`
ALTER TABLE `clientes` ADD PRIMARY KEY (`id`);

ALTER TABLE `clientes` MODIFY `id` int(11) NOT NULL AUTO_INCREMENT,AUTO_INCREMENT=7;

panta03.jpg

 

A continuación deberemos crear un archivo index.php donde añadiremos el código con las cabeceras

<html>
<head>
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<title>Clientes</title>
<link rel="stylesheet" type="text/css" href="css/flexigrid.css" />
<script class="jsbin" src="js/jquery.min.js"></script>
<script class="jsbin" src="js/jquery-ui.min.js"></script>   
<script type="text/javascript">
var $DialogoBox = jQuery.noConflict();
</script>
<link type="text/css" href="css/base/ui.all.css" rel="stylesheet" />  
<script type="text/javascript" src="js/jquery-1.2.3.pack.js"></script>
<script type="text/javascript" src="js/ui/ui.datepicker.js"></script>   
<script type="text/javascript" src="js/ui/i18n/ui.datepicker-id.js"></script>
<script type="text/javascript" src="js/flexigrid.js"></script>
<script type="text/javascript" src="js/jquery.validate.js"></script>
<script type="text/javascript">
$(document).ready(function(){
/*id de la tabla que afecta el script */
$("#flexempresa").flexigrid
   (
   {
    /*pagina php donde se realiza la consulta sql */
   url: 'consulta.php',
   dataType: 'json',  /* tipo de datos devuelto json, xml */
   /* campo a mostrar en cada columna */
   colModel : [
    {display: 'ID', name : 'id', width : 40, sortable : true, align: 'left'},
    {display: 'nombre', name : 'nombre', width : 60, sortable : true, align: 'center'},
    {display: 'domicilio', name : 'domicilio', width : 180, sortable : true, align: 'left'},
    {display: 'ciudad', name : 'ciudad', width : 120, sortable : true, align: 'left'},
    {display: 'provincia', name : 'provincia', width : 120, sortable : true, align: 'left'}   
    ],
    /*campo que se podra hacer busqueda */
   searchitems : [
    {display: 'ID', name : 'id'},
    {display: 'Nombre', name : 'nombre', isdefault: true}
    ],
   
   sortname: "ID",  /* mostrar ordenador por id */
   sortorder: "desc",  /* ordenaor ascendente o descendente */
   usepager: true, /* activa o descativa paginación */
   title: 'Clientes', /* titulo de la tabla */
   useRp: true, /* activa o descativa que el usuario pueda cambiar la cantidad paginación 10.20,50 */
   rp: 10, /* cantidad de registros a mostrar por pagina */
   width: 800, /* ancho de tabla */
   height: 255 /*alto de tabla */
   }
   );  
});

function crud(evento) {

 
if (evento == 'Nuevo') {
  $DialogoBox("#formadd").dialog('open'); 

} 
/* Debe seleccionar una fila antes de pulsar el boton */
if (evento == 'Editar') {
$('.trSelected').each(function() {
var id = $(this).attr('id');
id = id.substring(id.lastIndexOf('row')+3);
alert("alta nuevo cliente”);
});
}
/* Debe seleccionar una fila antes de pulsar el boton */
if (evento == 'Eliminar') {
$('.trSelected').each(function() {
var id = $(this).attr('id');
id = id.substring(id.lastIndexOf('row')+3);
alert("Eliminar Cliente ID " + id);
});
}
}
			   
</script>
</head>
<body>
<table id="flexempresa" style="display:none"></table>

</body>
</html>
A continuación deberemos crear el archivo consulta.php para realizar la consulta SQL cuando sea invocada por la librería.
<?php
error_reporting(0);
function Ejecutacsql($csql) {
$servidor = "localhost";
$usuario = "root";
$clave = "";
$db   = "flexempesa";
$conectar = mysql_connect($servidor,$usuario,$clave) or die ("Error: could not connect to database");
$db = mysql_select_db($db);
$resultado = mysql_query($csql) or die ('query not running');
return $resultado;
mysql_close($conectar);
}
function TotalRegistros($fname,$tname,$where) {
$sql = "SELECT count($fname) FROM $tname $where";
$resultado = Ejecutacsql($sql);
while ($row = mysql_fetch_array($resultado)) {
return $row[0];
}
}
//Cuando pasamos de pagina se reordena la tabla y se muestra
// la nueva paginacion
//Ordenar por el campo indicado ascendente o descendente
$pagina = $_POST['page'];
$rp = $_POST['rp'];
$ordenarcampo = $_POST['sortname'];
$ordenarmetodo = $_POST['sortorder'];

//Ordenar por id en forma descendente por defecto
if (!$ordenarcampo) $ordenarcampo = 'id';
if (!$ordenarmetodo) $ordenarmetodo = 'desc';
  if($_POST['query']!=''){
   $where = "WHERE `".$_POST['qtype']."` LIKE '%".$_POST['query']."%' ";
  } else {
   $where ='';
  }
  if($_POST['letter_pressed']!=''){
   $where = "WHERE `".$_POST['qtype']."` LIKE '".$_POST['letter_pressed']."%' ";
  }
  if($_POST['letter_pressed']=='#'){
   $where = "WHERE `".$_POST['qtype']."` REGEXP '[[:digit:]]' ";
  }
$sort = "***** BY $ordenarcampo $ordenarmetodo";

if (!$pagina) $pagina = 1;
if (!$rp) $rp = 10;
$start = (($pagina-1) * $rp);
$limit = "LIMIT $start, $rp";
//Consulta SQL a realizar
$sql = "select id, nombre, domicilio, ciudad, provincia from clientes $where $sort $limit";
$resultado = Ejecutacsql($sql);

$total = TotalRegistros('id','clientes',$where);

//Limpíamos la cache
header("Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" );
header("Cache-Control: no-cache, must-revalidate" );
header("Pragma: no-cache" );
header("Content-type: text/x-json");
//Creamos los el formato json con los parametros y datos necesarios
$json = "";
$json .= "{\n";
$json .= "page: $pagina,\n";
$json .= "total: $total,\n";
$json .= "rows: [";
$rc = false;
while ($row = mysql_fetch_array($resultado)) {
if ($rc) $json .= ",";
$json .= "\n{";
$json .= "id:'".$row['id']."',";
$json .= "cell:['".$row['id']."'";
$json .= ",'".addslashes($row['nombre'])."'";
$json .= ",'".addslashes($row['domicilio'])."'";
$json .= ",'".addslashes($row['ciudad'])."'";
$json .= ",'".addslashes($row['provincia'])."']";
$json .= "}";
$rc = true;
}
$json .= "]\n";
$json .= "}";
//enviamos las datos al script para que los muestre en la tabla
echo $json;
?>
El resultado de mostrar en el navegador deberá ser el siguiente:

 

panta04.jpg

 


¿Te ayudó este Tutorial?


5 Comentarios

Yo la conocía esta libreria, es super útil, el que la usa sabe de que hablamos. grande Sergio. saludos

Para crear Crud me parece muy chulo. Lo tengo en cuenta para más adelante. Saludos Sergio.


Ronald Morales
dic 13 2016 17:26

Excelente tutorial, por favor si tuvieras un tutorial como exportar el contenido del flexIgrid incluidas las cabeceras o nombres de columnas a Excel e imprimir seria muy útil. Saludos cordiales.

hola! excelente ejemplo. Como puedo pasar una variable desde la funcion de flexgrid a la url que se declara como variable.

 

Saludos,


Osvaldo Leonardo O Pazo
sep 09 2017 03:29

yo me he quedado con dudas, de principiante y básico, pero dudas. es posible que tengan ahí un demo con código fuente?, pues lo que quiero es llenar la grilla pero con filtro, es decir, no traer toda la tabla, sino ciertas tuplas.

No esperes más y entra en Solvetic
Deja tus comentarios y aprovecha las ventajas de la cuenta de usuario ¡Únete!

X