Passar dados de JSON para um PivotGrid

rhenan silverio · Setembro 25, 2017

$(document).ready(function () {
        var datas = new Array();

        $.getJSON( "http://comex.io/request/report/jsonimport", function( data ) { 
            $.each( data, function( key, obj ) {

                var row = {};
                row['data_registro'] = obj.data_registro;
                row['tipo_carga'] = obj.tipo_carga;
                row['teus'] = obj.teus;
                row['nmconsignatario'] = obj.nmconsignatario;
                row['nmportoorigem'] = obj.nmportoorigem;
                row['nmportodestino'] = obj.nmportodestino;
                row['total_fcl'] = obj.total_fcl;
                datas[key] = row;
            });
        });

          console.log(datas);

           var source =
                {
                    //localdata: datas,
                     datatype: "json",
                     datafields:
                        [
                        { name: 'data_registro', type: 'string' },
                        { name: 'tipo_carga', type: 'string' },
                        { name: 'teus', type: 'string'},
                        { name: 'nmconsignatario', type: 'string' },
                        { name: 'nmportoorigem', type: 'string' },
                        { name: 'nmportodestino', type: 'string'},
                        { name: 'total_fcl', type: 'string'}
                        ]
               };

         //    console.log(source);  

            var dataAdapter = new $.jqx.dataAdapter(source);
                dataAdapter.dataBind();
                // create a pivot data source from the dataAdapter
                var pivotDataSource = new $.jqx.pivot(
                    dataAdapter,
                    {
                        pivotValuesOnRows: false,
                        rows: [{ dataField: '', width: 190 }],
                        columns: [],
                        values: [
                            { dataField: 'data_registro', width: 200, 'function': 'max', text: 'cells left alignment', formatSettings: { align: 'left', prefix: '', decimalPlaces: 2 } },
                            { dataField: 'tipo_carga', width: 200, 'function': 'max', text: 'cells center alignment', formatSettings: { align: 'center', prefix: '', decimalPlaces: 2 } },
                            { dataField: 'nmconsignatario', width: 200, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } },
                            { dataField: 'nmportoorigem', width: 200, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } },
                            { dataField: 'nmportodestino', width: 200, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } },
                            { dataField: 'total_fcl', width: 200, 'function': 'average', text: 'cells right alignment', formatSettings: { align: 'right', prefix: '', decimalPlaces: 2 } }
                        ]
                    });
             // console.log(source);

            $('#divPivotGrid').jqxPivotGrid(
                {
                    source: pivotDataSource,
                    treeStyleRows: true,
                    autoResize: false,
                    multipleSelectionEnabled: true });
});

Criei esse pivot grid, mas to com problemas, porque ele só aparece uma parte do grid e não me dá ele com os resultados alguém pode me dar um Help??

Snowden · Setembro 25, 2017

var dataAdapter = new $.jqx.dataAdapter({
  datatype: 'json',
  datafields: [
    ...
    { name: 'nmconsignatario', type: 'string' },
    { name: 'nmportoorigem', type: 'string' }
    ...
  ],
  id: 'id',
  url: 'http://comex.io/request/report/jsonimport',
  async: false
});
dataAdapter.dataBind();

var pivotDataSource = new $.jqx.pivot(dataAdapter, {
  pivotValuesOnRows: false,
  ...
});

$('#divPivotGrid').jqxPivotGrid({
  source: pivotDataSource,
  ...
});