Trying to build a multidimentionnal array for a datagrid in javascript

165 Views Asked by At

I'm trying since the last couple of hours to make an array to put in a easyui datagrid. The format is like that :

$('#dg').datagrid({
                columns:[[
                    {field:'Date',title:'Date',width:150},
                    {field:'project',title:'Project',width:150},
                    ....
                ]]
            });

So I what I want is to create that array in a loop, my column in the datagrid can change, and to know what to show or not show, I get the data from a json php code (result is from a json_encode).

            var dg_grid = new Array();
$.getJSON("lib/getDatagridInfo.php", function(result){
              $.each(result, function(i, objet){
                    if(objet.visible == true){
                        var row = [{field: objet.dg_name, title: objet.dg_label, width: objet.dg_width}];
                        dg_grid.push(row);
                    }

              });
            });

Ok I'm progressing, I see in the console that the array seems OK, but when I put it in the datagrid like that :

        $('#dg').datagrid({
            columns:dg_grid
        });

I have no columns that show in my datagrid. I'm not sure where I'm doing something wrong.

EDIT 1:

I'm still progressing, here my code now :

            var dg_grid = new Array();
        var dg_column = new Array();

        $.getJSON("lib/getDatagridInfo.php", function(result){
              $.each(result, function(i, objet){
                    if(objet.visible == true){
                        var row = {
                                field: objet.dg_name, 
                                title: objet.dg_label, 
                                width: objet.dg_width
                                };
                        dg_grid.push(row);
                    }

              });
            });
        console.log(dg_grid);
        dg_column.push(dg_grid);    

        $('#dg').datagrid({
            columns:dg_column
        });

So now, I see a row of data in my datagrid, with the column I wish to show. This mean that the "field" part works, but my column have no title or no width. The format of the array that goes in the datagrid seems a bit weird, I'm still trying to figure out what is going out. If anyone know, I'm almost there, but not yet :(

EDIT 2 :

The following picture show my problem. I have my data, but no properties are working. If I put hidden to true, it's working tho. But title, width, etc are doing nothing. If I enter the same exact thing manually, it's working. But I need to get the column from a script, so I can't just write those line in the code.

I honnestly have no idea of what's going on, and the same things happens on every browser so it's not my Opera that is going crazy...

This is what I see, and the array in the console

Any help would be welcome !

Edit 3 :

I found that post here, but, his solution seems to be like my code, but that guy said it's working for him. His first problems looks like a bit like mine. I don't know if anyone can take a look to his solution code and mine, maybe there is something that I don't see... https://www.jeasyui.com/forum/index.php?topic=2197.0

Edit 4:

Ok so I had the idea to compare what I write manually, and what the code write, it's the same thing when I look in the console, but the console return me "false" so it means something is different.

var testrow = {field:"project",title:"Projet",width:150};
var row = {
    field: objet.dg_name,
    title: objet.dg_label,
    width: objet.dg_width,
    };
console.log(testrow == row);

When I display them in the console, they both looks similar but the comparaison return false. The "testrow" have the title and size right on my datagrid, while the other one who is generated by my code is wrong.

I honnestly need help, I can't understand what is going on here...

Edit 5 :

The problem was that I closed my function result too early. If I include the push inside, it's now all working. Here the working code

         var dg_grid = new Array();
    var dg_column = new Array();

    $.getJSON("lib/getDatagridInfo.php", function(result){
          $.each(result, function(i, objet){
                if(objet.visible == true){
                    var row = {
                            field: objet.dg_name, 
                            title: objet.dg_label, 
                            width: objet.dg_width
                            };
                    dg_grid.push(row);
                }

          });

    console.log(dg_grid);
    dg_column.push(dg_grid);    

    $('#dg').datagrid({
        columns:dg_column
    });
});
0

There are 0 best solutions below