Tutorial JqGrid + PHP + MYSQL

Siguiendo los cursos de JqGrid, ahora voy a mostrarles como hacer para montar el lado del servidor con PHP y MYSQL.

JqGrid es un sistema muy poderoso pero tiene la limitante que en modo data local máximo puede contener mil registros por las limitantes de Javascript, pero conectado directamente con un servidor que se encargue de todos los procesos, puede contener el numero de registros que necesitemos. Lo cual nos permite almacenar tranquilamente 20.000 filas de elementos sin ningún problema.

En este tutorial explicamos como conectar JqGrid con mysql, para cargar los datos JqGrid requiere para poder realizar la consulta ajax, que el archivo este en formato json o xml, en este tutorial vamos a explicar como se usa JqGrid en formato json, para cargar la data desde un servidor en php.



Formato de la solicitud AJAX
La solicitud ajax echa por JqGrid al servidor tiene estos parámetros:

• nd: es simplemente la hora en la que se hizo la solicitud.
• rows: el numero de lineas que se va a mostrar al usuario.
• page: la pagina que se va a consultar en el momento.
• sidx: el elemento por el cual se va a ordenar la consulta.
• sord: el tipo de orden de la tabla asc o desc.
• _search: esto es un bolleano que contiene false o true en el caso de que se se use la barra de filtros y se este buscando algo en especifico.
• Listas de elementos: cada uno de los index de los elementos que usemos en la búsqueda van a salir de la filter toolbar también serán enviados como parámetros.

Formato del archivo JSON
El archivo json por el servidor debe contener los siguientes atributos:

• page: La pagina actual que esta mostrando.
• records: el numero de registros que hay en total en la tabla.
• rows: las filas que vamos a devolver actualmente al sistema
• total: el numero de paginas en total que hay en el sistema.

Conectando JqGrid con PHP y Mysql.

El proceso para hacer el puente de la información es:

1. Primero hacemos lo normal y nos conectamos a la base de datos. 
2. Después guardamos en un array todos los elementos de la solicitud que hace JqGrid.
3. Construimos la consulta de filtrado para la barra de búsqueda. para construir la consulte lo dividi en dos partes el area de los like y el área de los equal, porque hay campos como los nombres que la búsqueda se puede parecer y hay campos como un total que tienen que ser exactos, pero ya cada uno podrá elegir como prefiera.
4. Hacemos una consulta a la base de datos para saber el numero de filas que hay en total. 
5. Calculamos el numero de paginas que hay, y averiguamos si la pagina es la correcta.
6. Construimos la consulta añadiéndole los filter, los search y el orden.
7. Hacemos la consulta para traernos los resultados que necesitamos en especifico.
8. Por ultimo le devolvemos los datos al JqGrid.

Aquí esta el código explicado:

(isset($_REQUEST['rows']))?$_REQUEST['rows']:'',
  'page'=>(isset($_REQUEST['page']))?$_REQUEST['page']:'',
  'orderby'=>(isset($_REQUEST['sidx']))?$_REQUEST['sidx']:'',
  'orden'=>(isset($_REQUEST['sord']))?$_REQUEST['sord']:'',
  'search'=>(isset($_REQUEST['_search']))?$_REQUEST['_search']:'',
 );
 $se ="";
 //creamos la consulta de busqueda. 
 if($post['search'] == 'true'){
  $b = array();
  //Usamos la funci{on elements para crear un arreglo con los datos que van a ser para buscar por like
  $search['like']=elements(array('total','nota'),$_REQUEST);
  //haciendo un recorrido sobre ellos vamos creando al consulta.
  foreach($search['like'] as $key => $value){
   if($value != false) $b[]="$key like '%$value%'";
  }
  //Usamos la funci{on elements para crear un arreglo con los datos que van a ser para buscar por like
  $search['where']=elements(array('fecha','cantidad','taza','cliente'),$_REQUEST);
  //haciendo un recorrido sobre ellos vamos creando al consulta.
  foreach($search['where'] as $key => $value){
   if($value != false) $b[]="$key = '$value'";
  }
  //Creamos la consulta where
  $se=" where ".implode(' and ',$b );  
 }
 //Realizamos la consulta para saber el numero de filas que hay en la tabla con los filtros
 $query = mysql_query("select count(*) as t from inventario".$se);
 if(!$query)
  echo mysql_error();
 $count = mysql_result($query,0);

 if( $count > 0 && $post['limit'] > 0) {
  //Calculamos el numero de paginas que tiene el sistema
  $total_pages = ceil($count/$post['limit']);
  if ($post['page'] > $total_pages) $post['page']=$total_pages;
  //calculamos el offset para la consulta mysql.
  $post['offset']=$post['limit']*$post['page'] - $post['limit'];
 } else {
  $total_pages = 0;
  $post['page']=0;
  $post['offset']=0;
 }
 //Creamos la consulta que va a ser enviada de una ves con la parte de filtrado
 $sql = "select id, fecha, cliente, cantidad, taza, total, nota from inventario  ".$se;
 if( !empty($post['orden']) && !empty($post['orderby']))
  //Añadimos de una ves la parte de la consulta para ordenar el resultado
  $sql .= " ORDER BY $post[orderby] $post[orden] ";
 if($post['limit'] && $post['offset']) $sql.=" limit $post[offset], $post[limit]";
  //añadimos el limite para solamente sacar las filas de la apgina actual que el sistema esta consultando
  elseif($post['limit']) $sql .=" limit 0,$post[limit]";
 
  
 $query = mysql_query($sql);
 if(!$query)
  echo mysql_error();
 $result = array();
 $i = 0;
 while($row = mysql_fetch_object($query)){
   $result[$i]['id']=$row->id;
  $result[$i]['cell']=array($row->id,$row->fecha,$row->cliente,$row->cantidad,$row->taza,$row->total,$row->nota);
  $i++;
  
 }
 //Asignamos todo esto en variables de json, para enviarlo al navegador.

 
 $json = new stdClass();
 $json->rows=$result;
 $json->total=$total_pages;
 $json->page=$post['page'];

 $json->records=$count;
 echo json_encode($json);
 
 mysql_close($link);
 
 function elements($items, $array, $default = FALSE)
 {
  $return = array();
  if ( ! is_array($items)){
   $items = array($items);
  }
  foreach ($items as $item){
   if (isset($array[$item])){
    $return[$item] = $array[$item];
   }else{
    $return[$item] = $default;
   }
  }
  return $return;
 }
?>

Este es el resultado final: http://bomba1990.pythonanywhere.com/sosinformatico/js/JqGrid_Basico4
Codigo Github: https://github.com/bomba1990/JqGrid-Ejemplos/blob/master/JqGrid-Basico-4-DB.html
y https://github.com/bomba1990/JqGrid-Ejemplos/blob/master/ajax.php

Suerte y espero que les sea de utilidad a todos los que lo solicitaron.