Update the datasource of a jqxGrid

Question

Update the datasource of a jqxGrid

Navigation

#1 by (0 votes)

1

I am filling a grid of JQWIDGETS with data from an array that I form from data entered in inputs text (code, description, price, quantity and total).

By giving enter on the input quantity the data is shown in the grid, but this creates an array every time I do this.

How can I make a new record in the same array every time I fill the inputs and do not replace the contents of the grid each time?

Thanks

This is what I have:

$(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.');
        }
    }
});

javascript jquery array

asked by daniel2017- 05.09.2016 в 17:34

source

1 answer

How can I create sprite animations in a "grid-based" game in love2d? Show data with Mongoose and NodeJS

score 0 · Answer 1

Take out the declaration of your fix and the initialization of the grid for outside of the event keyup otherwise you will continue to reset your collection.

$(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.');
            }
        }
    });
});

Since the variables source and dataGrilla are in a higher scope you can continue manipulating it within the event.

A couple of notes.

To add elements to an array use the push
To create fixes, use preferably var arr = [] instead of var arr = new Array()
To access the properties of the objects use preferably a.b in the winery of a['b'] (unless it is a syntax error such as a['b-b'] )