CODEWITHSUNDEEP
javascriptjqueryfor-loopjqgrid
user1801810
user1801810

Reputation: 614

jQuery and jqGrid - For ... Each Loop To Extract Data

Environment:
* jquery-2.0.0.js
* jqSuitePHP_4_4_4_0

I have a grid populated with data; for every row in the grid I would like to extract only two of the columns, the same two columns for each row. I don't need the jgGrid ID of the row as I have my own which is one of the two fields I am after. The second field I want holds a select menu - I want the value as opposed to the text of the field.

In my experimenting, the best I could come up with was capturing the entirety of each row and JSON encoding it to submit.

jQuery('#myGrid').jqGrid().jqGrid
(
    'navButtonAdd', '#myPager', 
    {
        ...

        onClickButton: function()
        {
            var grid = $('#myGrid');
            var data = JSON.stringify(grid.jqGrid('getGridParam', 'data'));

            request = $.ajax({
                url: 'process.php',
                type: 'post',
                data: data
            });
        }
    }
);

The problem is I don't want to do that. So I'm stuck on how to for ... each to build my 'data' value that can be seen in the sample code in the AJAX POST. I want POST as 1=this&2=that where the integers are my row IDs (the first field I want to capture) and 'this' and 'that' are the values of the select menus (the second field I want) and do away with the JSON.

Thanks for your help.

=== EDIT ===
* Adding sample grid
* Highlighting the portion of code that is challenging me

+---------------------------------------------+
| Column 1 | * Column 2 | Column 3 | Column 4 |
|----------|------------|----------|----------|
| 1        | This       | Other    | Stuff    |
|----------|------------|----------|----------|
| 2        | That       | More     | Stuff    |
+---------------------------------------------+

*Column 2 is actually a select menu so rather than the text that appears to the user in the grid, I want the underlying value that they set. For conversation, we'll say 'This' = 100 and 'That' = 999. So from the sample above I want to be able to AJAX POST:

1=100
2=999

My AJAX request...

request = $.ajax({
    url: 'process.php',
    type: 'post',
    data: data
});

How do I get 1=100 and 2=999 into the variable 'data' to be used in the above AJAX request? I think I'm supposed to be using $.each() but not sure and even if that is correct I don't know what beyond that. I don't want Column 3 or 4.

Thanks for your time and thought.

Upvotes: 0

Views: 10621

Answers (1)

user1801810
user1801810

Reputation: 614

So here's what I came up with on my own and it works nicely.

onClickButton: function()
{
    var data = {};
    var grid = $('#myGrid');
    var rows = grid.jqGrid('getDataIDs');

    for (i = 0; i < rows.length; i++)
    {
        var rowData = grid.jqGrid('getRowData', rows[i]);
        data[rowData['field1']] = rowData['field2'];
    }

    request = $.ajax({
        url: 'process.php',
        type: 'post',
        data: {data: data}
    });
}

This yields a POST I can work with; based on my sample data the parameters and values are...

  • data[1]=This
  • data[2]=That

...which when POSTed is...

data%5B1%5D=This&data%5B2%5D=That

...which PHP sees as an array.

Upvotes: 2

Related Questions