1

Estoy llenando una grilla de JQWIDGETS con datos de un array que formo a partir de datos ingresados en inputs text(codigo,descripcion,precio,cantidad y total).

Al dar enter sobre el input cantidad se muestran los datos en la grilla, pero esto crea un array cada vez que hago esto.

Como puedo hacer que por cada vez que llene los inputs se cree un nuevo registro en el mismo array y no me reemplace el contenido de la grilla cada vez?

Gracias

Esto es lo que tengo:

$(document).keyup(function (e) {
    if ($("#txtCantServ").is(":focus") && (e.keyCode == 13)) {
        var cant = $('#txtCantServ').val();
        var punit = $('#txtprecio').val();
        if (cant > 0) {
            $('#txtCantServ').val('');

            var codigo = $('#txtcodserv').val();
            var nombre = $('#txtNomServ').val();
            var total = punit * cant;

            var dataGrilla = new Array();

            var codigos = [codigo];
            var nombres = [nombre];
            var cantidades = [cant];
            var precios = [punit];
            var totales = [total];

            for (var i = 0; i < 1; i++) {
                var row = {};
                row["colcodigos"] = codigos;
                row["colnombres"] = nombres;
                row["colcantidades"] = cantidades;
                row["colprecios"] = precios;
                row["coltotales"] = totales;
                dataGrilla[i] = row;
            }
            console.log(dataGrilla);
            var source =
            {
                localdata: dataGrilla,
                datatype: "array"
            };
            $("#jqxgrid").jqxGrid(
                {
                    width: 900,
                    source: source,
                    height: 200,
                    columns: [
                        { text: 'CODIGO', datafield: 'colcodigos', width: 100 },
                        { text: 'DESCRIPCION', datafield: 'colnombres', cellsformat: 'D',width: 500 },
                        { text: 'CANTIDAD', datafield: 'colcantidades', width: 80 },
                        { text: 'PRECIO', datafield: 'colprecios', width: 80, cellsalign: 'right' },
                        { text: 'TOTAL', datafield: 'coltotales', width: 100, cellsalign: 'right', cellsformat: 'c2' },
                    ]
                });
        }else{
            alert('Ingrese cantidad.');
        }
    }
});

1 respuesta 1

0

Saca la declaración de tu arreglo y la inicialización del grid para afuera del evento keyup de lo contrario vas a continuar reseteando tu colección.

$(function() {
    // Declaración del datasource
    var dataGrilla = [];

    var source = {
        localdata: dataGrilla,
        datatype: "array"
    };

    // Creación del widget
    $("#jqxgrid").jqxGrid({
        width: 900,
        source: source,
        height: 200,
        columns: [
            { text: 'CODIGO', datafield: 'colcodigos', width: 100 },
            { text: 'DESCRIPCION', datafield: 'colnombres', cellsformat: 'D',width: 500 },
            { text: 'CANTIDAD', datafield: 'colcantidades', width: 80 },
            { text: 'PRECIO', datafield: 'colprecios', width: 80, cellsalign: 'right' },
            { text: 'TOTAL', datafield: 'coltotales', width: 100, cellsalign: 'right', cellsformat: 'c2' },
        ]
    });

    $(document).keyup(function (e) {
        if ($("#txtCantServ").is(":focus") && (e.keyCode == 13)) {
            var cant = $('#txtCantServ').val();
            var punit = $('#txtprecio').val();
            if (cant > 0) {
                $('#txtCantServ').val('');

                var codigo = $('#txtcodserv').val();
                var nombre = $('#txtNomServ').val();
                var total = punit * cant;

                var codigos = [codigo];
                var nombres = [nombre];
                var cantidades = [cant];
                var precios = [punit];
                var totales = [total];

                var row = {};
                row.colcodigos = codigos;
                row.colnombres = nombres;
                row.colcantidades = cantidades;
                row.colprecios = precios;
                row.coltotales = totales;
                dataGrilla.push(row);

                console.log(dataGrilla);

                // Actualizar el data source
                $("#jqxgrid").jqxGrid({ source: source });
            }else{
                alert('Ingrese cantidad.');
            }
        }
    });
});

Como las variables source y dataGrilla están en un ámbito superior puedes seguir manipulándola dentro del evento.

Un par de notas.

  • Para agregar elementos a un arreglo usa el método push

  • Para crear arreglos usa de preferencia var arr = [] en lugar de var arr = new Array()

  • Para acceder a las propiedades de los objetos usa de preferencia a.b en lagar de a['b'](a menos que sea un error de sintáxis como a['b-b'])

2
  • gracias. funciona perfecto! Commented el 5 sept. 2016 a las 17:38
  • @daniel.- No te olvides de votar o marcar como aceptada la respuesta si te sirvió.
    – devconcept
    Commented el 5 sept. 2016 a las 18:19

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.