Codigo:
--------
<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
$(function(){
$("#grps").jqGrid({
url:'Carga_Datos.php',
datatype: 'json',
mtype: 'GET',
colNames: ['Id_Registro','Codigo_Cuenta','Centro_Costo', 'Doc_Asoc','Tipo', 'Descripcion', 'Monto'],
colModel: [
{ name: 'Id_Registro', index: 'Id_Registro', width: 100, align: 'left',editable: true},
{ name: 'Codigo_Cuenta', index: 'Codigo_Cuenta', width: 100, align: 'left',editable: true},
{ name: 'Centro_Costo', index: 'Centro_Costo', width: 100, align: 'left',editable: true },
{ name: 'Doc_Asoc', index: 'Doc_Asoc', width: 100, align: 'left',editable: true },
{ name: 'Tipo', index: 'Tipo', width: 100, align: 'left',editable: true},
{ name: 'Descripcion', index: 'Descripcion', width: 200, align: 'left',editable: true},
{ name: 'Monto', index: 'Monto', width: 200, align: 'left',editable: true},
],
pager: '#pgrps',
rowNum:15,
rowList:[10,25,50,100],
autowidth: true,
sortname: 'Id_Registro',
sortorder: 'desc',
viewrecords: true,
width: "98%",
height: "100%",
editurl: "inlineEdit.php",
caption: 'Action Plan List'
});
$("#Editar").click(function()
{
var gr = jQuery("#grps").jqGrid('getGridParam','selrow');
if( gr != null )
{
jQuery("#grps").jqGrid('editGridRow',gr,{height:28 0,reloadAfterSubmit:false,closeAfterEdit:true});
}else{
alert("Seleccione el Registro a editar");
}
});
$("#Agregar").click(function()
{
jQuery("#grps").jqGrid('editGridRow',"new",{height :280,reloadAfterSubmit:false,closeAfterAdd:true});
});
$("#Eliminar").click(function(){
var gr = jQuery("#grps").jqGrid('getGridParam','selrow');
if( gr != null ) jQuery("#grps").jqGrid('delGridRow',gr,{reloadAfte rSubmit:false});
else alert("Seleccione el Registro a borrar!"); });
});
</script>
</head>
<body>
<h1>Title-Time</h1>
<table id="grps"></table>
<div id="pgrps"></div>
<input type="BUTTON" id="Editar" name="Editar" value="Editar" />
<input type="BUTTON" id="Agregar" value="Agregar" />
<input type="BUTTON" id="Eliminar" value="Eliminar" />
</body>
--------
Explicación:
------------------
Hojas de estilo:
-------------------------
<link rel="stylesheet" type="text/css" media="screen" href="css/ui-lightness/jquery-ui-1.8.16.custom.css" />
<link rel="stylesheet" type="text/css" media="screen" href="css/ui.jqgrid.css" />
Librerías a ser invocadas para poder trabajar con el grid:
----------------------------------------------------------------------------------
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>
<script src="js/i18n/grid.locale-en.js" type="text/javascript"></script>
<script src="js/jquery.jqGrid.min.js" type="text/javascript"></script>
<script type="text/javascript">
url:'Carga_Datos.php':
-------------------------------
Es la ruta y nombre del archivo PHP que será el que nos permite leer y cargar datos desde la base de datos (el código del mismo lo pondré un poco más abajo).
datatype: 'json':
----------------------
Indica el tipo de información que regresara el servidor puede ser XML también.
mtype: 'GET'
-------------------
Indica como se hará la petición ajax, “POST” o “GET”
colNames: ['Id_Registro','Codigo_Cuenta','Centro_Costo', 'Doc_Asoc','Tipo', 'Descripcion', 'Monto']:
---------------------------------------------------------------------------------------------------------
Estos son los nombres de los campos de la base de datos o del arreglo que estés trabajando.
colModel: [
{ name: 'Id_Registro', index: 'Id_Registro', width: 100, align: 'left',editable: true},
{ name: 'Codigo_Cuenta', index: 'Codigo_Cuenta', width: 100, align: 'left',editable: true},
{ name: 'Centro_Costo', index: 'Centro_Costo', width: 100, align: 'left',editable: true },
{ name: 'Doc_Asoc', index: 'Doc_Asoc', width: 100, align: 'left',editable: true },
{ name: 'Tipo', index: 'Tipo', width: 100, align: 'left',editable: true},
{ name: 'Descripcion', index: 'Descripcion', width: 200, align: 'left',editable: true},
{ name: 'Monto', index: 'Monto', width: 200, align: 'left',editable: true},
]:
----------------------------------------------------------------------------------------
Es un arreglo que describe las opciones de cada columna, algunas opciones son las siguientes
name: Nombre de la columna
index: Es el nombre que se envía al servidor cuando se ordenan los datos
width: Indica el ancho de la columna
editurl: "inlineEdit.php":
-------------------------------
Contiene el código que grabara los datos en la tabla de la base de datos (Pondré el código más adelante también).
resizable: Indica si el ancho de la columna se puede redimensionar, los posible valores son true o false
align: Alineación del texto, los posible valores son: left, center, right
pager: Indica que elemento HTML que sera la barra de paginacion, se utiliza su atributo id
rowNum: Indica cuantas filas se mostraran por pagina
sortname: Indica el campo por el cual se ordenaran los datos
sortorder: Indica si se ordenaran de forma ascendente “asc” o descendente “desc”
viewrecords: Indica se se mostrara el numero de registros que tiene la tabla, puede ser true o false
captio: Indica el titulo del grid
************************** CODIGO DEL ARCHIVO CARGA DATOS******
Importante: yo uso la librería adodb para conectarme al postgresql y trabajarlo puedes documentarte en esta dirección:
http://www.lacorona.com.mx/fortiz/adodb/docs-adodb-es.htm#ex11
<?php
require('funciones/Conectar.php');
$page = $_GET['page']; // get the requested page
$limit = $_GET['rows']; // get how many rows we want to have into the grid
$sidx = $_GET['sidx']; // get index row - i.e. user click to sort
$sord = $_GET['sord']; // get the direction
if(!$sidx) $sidx =1; // connect to the database
$SQL_Funciones ='SELECT "Asientos"."Id_Registro","Asientos"."Numero_Compro bante", "Asientos"."Codigo_Cuenta", "Asientos"."Numero_Documento", "Asientos"."Descripcion_Asiento", "Asientos"."Monto_Asiento" FROM "Asientos" INNER JOIN "Comprobante" ON ("Comprobante"."Numero_Comprobante" = "Asientos"."Numero_Comprobante") INNER JOIN "Centros_Costo" ON ("Centros_Costo"."Codigo_Centro" = "Asientos"."Codigo_Centro_Costo") INNER JOIN "Plan_Cuentas" ON ("Plan_Cuentas"."Codigo_Cuenta" = "Asientos"."Codigo_Cuenta") where "Asientos"."Numero_Comprobante"'."='"."b1040068"." '";
$Data_Funciones_N = $conn->Execute("$SQL_Funciones");
$count=$Data_Funciones_N->RecordCount();
if( $count >0 ) { $total_pages = ceil($count/$limit); } else { $total_pages = 0; }
if ($page > $total_pages) $page=$total_pages; $start = $limit*$page - $limit; // do not put $limit*($page - 1)
$responce->page = $page;
$responce->total = $total_pages;
$responce->records = $count;
$i=0;
while (!$Data_Funciones_N->EOF)
{
//$responce->rows[$i]['Codigo_Cuenta']=$Data_Funciones_N->fields[1];
$responce->rows[$i]['cell']=array($Data_Funciones_N->fields[0],$Data_Funciones_N->fields[1],$Data_Funciones_N->fields[2],$Data_Funciones_N->fields[3],$Data_Funciones_N->fields[4],$Data_Funciones_N->fields[5]);
$i++;
$Data_Funciones_N->MoveNext();
}
echo json_encode($responce);
?>
Explicación:
---------------
Este código simplemente se conecta a la base de datos lee los registros mediante un ciclo y devuelve los registros solicitados puedes cambiarlo por tu propio método de conexión y recorrida de registros.
*************CODIGO DEL ARCHIVO inlineEdit.php************
<?php
extract($_POST);
extract($_GET);
require('funciones/Conectar.php');
if (($_POST['oper']) == "add") {// agregar registros
$Sql_Inyecta="INSERT INTO ".'"Prueba"("campo") VALUES ';
$Sql_Valores="('".$_POST['Centro_Costo']."')";
$Sql_Inyecta=($Sql_Inyecta.$Sql_Valores);
if ($conn->Execute($Sql_Inyecta)== false) {print 'Error Insertando Registros';}
}
if (($_POST['oper']) == "del") {// eliminar registros
// query para borrar
}
if (($_POST['oper']) == "edit") {// editar registros
// query para editar
}
?>
Explicación:
---------------------
Al hacer clic en los botones Editar, Agregar o Eliminar mediante el método post son pasados a este archivo (inlineEdit.php) cada uno de los campos descritos en el colNames:
['Id_Registro','Codigo_Cuenta','Centro_Costo', 'Doc_Asoc','Tipo', 'Descripcion', 'Monto'],
Junto a un parámetro llamado oper el cual identifica el tipo de operación ejecutada si deseas ver internamente como trabaja este proceso instala el complemento de Firefox firebug selecciona la opción red, dentro de la opción red selecciona todo y luego selecciona la pestaña post y veras como son enviados los valores al archivo inlineEdit.php
Documentación de Firebug:
http://www.adictosaltrabajo.com/tutoriales/tutoriales.php?pagina=firebugAvanzado