Ver Mensaje Individual
  #17 (permalink)  
Antiguo 07/01/2013, 10:49
Avatar de david_blanco_2000
david_blanco_2000
 
Fecha de Ingreso: enero-2013
Ubicación: Caracas
Mensajes: 2
Antigüedad: 11 años, 4 meses
Puntos: 0
Respuesta: Como Mostrar Datos en un JqGrid()

Guardar datos en tablas postgresql con jqgrid

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