Reportes con HTML y AJaX

Para un trabajo que estaba haciendo (si, el mismo de la entrada anterior) me pidieron agregar un módulo para generar órdenes de compra.

Lo agregué al programa como un ítem más, basándome en la estructura de las facturas (de hecho, era lo mismo… ) algo así ventana

Hasta ahí, nada nuevo. Se podría registrar en el sistema sin problemas… el problema era el traspasar eso a los reportes que usaban en la empresa 

Pensé en pasarlo a PDF… pero nunca lo había hecho, y no tenía tiempo como para aprender . Otra solución, era usar Crystal Reports, que ya había utilizado antes… pero iba a tener que instalarlo en el PC de la empresa (y lo que menos quiero es instalar cosas aparte en el PC -por eso usé SQLite-)

La última solución, crear un report en html y actualizar los datos con ajax🙂

Primero, tenía que mover la info desde la aplicación a la página html. Para hacerlo, utilicé json con la librería de Newtonsoft.Json

La lógica es de cada uno, pero lo que hice algo así:

1. Crear 2 variables de clase, una con el contenido total de la info, y un array

Private json As New JObject
Private jarray_detalle As New JArray 

Ahora, cada vez que agrego una línea al detalle, hice esto:

Dim linea_detalle As New
linea_detalle.Add("cod_pedido_proveedor", Me.txt_cod_pedido.
linea_detalle.Add("producto", Me.combo_producto.GetItemText(Me.combo_producto.
linea_detalle.Add("cod_interno", Me.combo_producto.SelectedValue.
linea_detalle.Add("compra", Me.txt_compra.
linea_detalle.Add("cantidad", Me.num_cantidad.Value.
linea_detalle.Add("precio", Me.txt_precio.
linea_detalle.Add("total",
Me.jarray_detalle.Add(linea_detalle) 

Con palabras: un JObject para guardar la info de dicha línea. Agrego tooodos los datos. Por último, agrego la línea al JArray del detalle.

Para terminar con los datos, los últimos datos de la órden:

Me.json.Add("ID", Me.maxOC)
Me.json.Add("Emisor", Me.txt_emisor.Text)
Me.json.Add("Proveedor", Me.getDatosProveedor(Me.combo_proveedor.SelectedValue))
Me.json.Add("Detalle", Me.jarray_detalle)
Me.json.Add("Pago", Me.combo_tipo_pago.GetItemText(Me.combo_tipo_pago.SelectedItem))
Me.json.Add("Observacion", Me.txt_observacion.Text)
Me.json.Add("Calculos", Me.calculos) 

Me.maxOC y Me.getDatosProveedor son funciones que uso para rescatar datos desde la BD que no ingresé en la órden.
Ahora que tengo toda la info necesaria en el objeto JSON, necesito guardarla en un archivo local de texto.
Simple con ésta función:

Private Function guardar(ByVal info As String) As Boolean
    Dim bAns As Boolean = False
    Dim objReader As StreamWriter
    Try
        objReader = New StreamWriter("datos.js")
        objReader.Write(info)
        objReader.Close()
        bAns = True
    Catch Ex As Exception
        MessageBox.Show(Ex.Message)
    End Try
    Return bAns
End Function 

Esto se guarda en la misma carpeta, y la estructura es así:

{
  "ID": 51,
  "Emisor": "Mario Cares",
  "Proveedor": {
    "Rut": "1234567",
    "Nombre": "Proveedor",
    "Direccion": "Direccion proveedor",
    "Correo": "mail@proveedor.cl",
    "Telefono": "(57) 123456"
  },
  "Detalle": [
    {
      "cod_pedido_proveedor": "10939",
      "producto": "Lustra muebles",
      "cod_interno": "101",
      "compra": "caja X 40",
      "cantidad": "5",
      "precio": "60",
      "total": 300
    },
    {
      "cod_pedido_proveedor": "100als",
      "producto": "Toalla Nova",
      "cod_interno": "301",
      "compra": "bolsas",
      "cantidad": "10",
      "precio": "400",
      "total": 4000
    }
  ],
  "Pago": "Contado",
  "Observacion": "Urgente",
  "Calculos": {
    "Recargo": "30",
    "Descuento": "40",
    "Neto": "4300",
    "IVA": "817",
    "Total": "5117"
  }
}

listo !
Terminamos con la parte del programa de escritorio, ahora abrimos la página plantilla y la cargamos con los datos.
Decir que a cada campo le asigné un ID para poder identificarlo (por ejemplo ) y en relación a eso asigno los valores.
Uso la función $.getJSON() de jQuery, quedando algo como esto:

$(document).ready(function()
{
	try{
		$.getJSON("datos.js", function(json) {
                        document.getElementById("id").innerText = json.ID;
			document.getElementById("emitidax").innerText = json.Emisor;
			document.getElementById("proveedor").innerText = json.Proveedor.Nombre;
			document.getElementById("rut").innerText = json.Proveedor.Rut;
			document.getElementById("direccion").innerText = json.Proveedor.Direccion;
			document.getElementById("telefono").innerText = json.Proveedor.Telefono;
			document.getElementById("mail").innerText = json.Proveedor.Correo;
			document.getElementById("pago").innerText = json.Pago;
			document.getElementById("observacion").innerText = json.Observacion;
			document.getElementById("recargo").innerText = json.Calculos.Recargo;
			document.getElementById("descuento").innerText = json.Calculos.Descuento;
			document.getElementById("neto").innerText = json.Calculos.Neto;
			document.getElementById("iva").innerText = json.Calculos.IVA;
			document.getElementById("total").innerText = json.Calculos.Total;
			for (z in json.Detalle){
				var x = document.getElementById("detalle").insertRow(1);
				var a = x.insertCell(0);var b = x.insertCell(1);var c = x.insertCell(2);
				var d = x.insertCell(3);var e = x.insertCell(4);
				var f = x.insertCell(5);var g = x.insertCell(6);
				a.innerHTML = json.Detalle[z].cod_pedido_proveedor;
				b.innerHTML = json.Detalle[z].producto;
				c.innerHTML = json.Detalle[z].cod_interno;
				d.innerHTML = json.Detalle[z].compra;
				e.innerHTML = json.Detalle[z].cantidad;
				f.innerHTML = json.Detalle[z].precio;
				g.innerHTML = json.Detalle[z].total;
			}
		});
	}catch(ex){
                //No es muy refinado, pero me indica el error al principio xD
		document.getElementById("id").innerText =ex.toString();
	}
}); 

Y eso es todo 8)

Lo he probado en Chrome y en IE. En Chrome no funciona y en IE corre a la perfección🙂 Como en la empresa usan IE… me basta con eso😉

Acerca de MaritoCares

Ingeniero Informático. Con tendencias a la programación en [C#, VB].NET, Java(Web principalmente...), PHP, JavaScript, algo mínimo de [ruby, python], y el clásico C.
Esta entrada fue publicada en Aplicación, JavaScript, SQLite, Tutoriales, VB, Windows. Guarda el enlace permanente.

Responder

Introduce tus datos o haz clic en un icono para iniciar sesión:

Logo de WordPress.com

Estás comentando usando tu cuenta de WordPress.com. Cerrar sesión / Cambiar )

Imagen de Twitter

Estás comentando usando tu cuenta de Twitter. Cerrar sesión / Cambiar )

Foto de Facebook

Estás comentando usando tu cuenta de Facebook. Cerrar sesión / Cambiar )

Google+ photo

Estás comentando usando tu cuenta de Google+. Cerrar sesión / Cambiar )

Conectando a %s