post data from datagrid to server (JSON)

Question

I want to make use of jqgrid / inline edit and want to:

• inline edit the data
• when done, user clicks on save and the (changed) data rows are send te the server

I have tried, but no results. Please see jsiddle here:

<script type="text/javascript">
        function postAllGridData() {
        // TODO : JSON request to server + reload grid
        alert('code here');
    }
</script>

http://jsfiddle.net/2Gc7K/

Answer 1

I modified your code to the following: http://jsfiddle.net/OlegKi/2Gc7K/2/.

In the code I set selected row in inline editing mode and save previous editing row (if any exist)

onSelectRow: function (rowid) {
    if (rowid && rowid !== lastSel) { 
        $(this).jqGrid("saveRow", lastSel); 
        lastSel = rowid; 
    }
    $(this).jqGrid("editRow", rowid, true); 
}

After the user click on "save current grid data to server" the current editing row (if any exist) will be saved and then current data from the grid will be saved in the variables gridData. After then one can send the data to the server by separate jQuery.ajax call. In the simplest way I serialized the object to JSON string using JSON.stringify and displayed the results with respect of alert:

$("#postAllGridData").click(function () {
    var gridData;
    $grid.jqGrid("saveRow", lastSel)
    gridData = $grid.jqGrid("getGridParam", "data");
    alert("data:\n" + JSON.stringify(gridData));
});

I used rowNum: 10000. So that no local paging of data are used. The code will work in the same way even if local paging were used. In the case one should just specify the value of rowNum less as the number of rows and add top pager (by adding toppager: true option) or add empty <div> (like <div id="mypager"></div>) to the page and use pager: "#mypager" option.

UPDATED: One can modify the above code to the following

$("#postAllGridData").click(function () {
    var gridData,
        // get ids of edited rows
        editedRows = $.map($grid.find(">tbody>tr[editable]"),
                           function(elem){
                               return $(elem).attr("id");
                           });
    $grid.jqGrid("saveRow", lastSel);
    alert("data:\n" + JSON.stringify(editedRows));
    // get data of edited rows
    gridData = $.grep($grid.jqGrid("getGridParam", "data"), function(row) {
        return $.inArray(row.id, editedRows) >= 0;
    });
    alert("data:\n" + JSON.stringify(gridData));
});

(see http://jsfiddle.net/OlegKi/2Gc7K/5/). I used jQuery.map to get ids of rows which was edited (even non changed) and jQuery.grep to filter data to the rows which was edited.

The most common code will be

$("#postAllGridData").click(function () {
    var gridData, indexes = $grid.jqGrid("getGridParam", "_index"),
        idPrefix = $grid.jqGrid("getGridParam", "idPrefix"),
        // get ids of edited rows
        indexesOfEditedRows = $.map($grid.find(">tbody>tr[editable]"),
                                    function(elem) {
                                        return indexes[$.jgrid.stripPref(idPrefix, $(elem).attr("id"))];
                                    });
    // get data of edited rows
    gridData = $.grep($grid.jqGrid("getGridParam", "data"), function(row, i) {
        return $.inArray(i, indexesOfEditedRows) >= 0;
    });
    alert("data:\n" + JSON.stringify(gridData));
});

(see http://jsfiddle.net/OlegKi/2Gc7K/10/). Because we still use existence of editable attribute to filter the data it's important that the method works only in case of displaying all rows on one page. In case of paging one will have to save ids or indexes of edited rows on the current page before go to another page. One can use onPaging callback in the case. As the result we get the demo http://jsfiddle.net/OlegKi/2Gc7K/13/ with the following code

var lastSel, indexesOfOldEditedRows = [], $grid = $("#list4");

$grid.jqGrid({
    ...
    onPaging: function () {
        var $self = $(this),
            indexes = $grid.jqGrid("getGridParam", "_index"),
            idPrefix = $grid.jqGrid("getGridParam", "idPrefix"),
            indexesOfEditedRows;
        $self.jqGrid("saveRow", lastSel); 
        indexesOfEditedRows = $.map($self.find(">tbody>tr[editable]"),
                                    function(elem) {
                                        return indexes[$.jgrid.stripPref(idPrefix,
                                                                         $(elem).attr("id"))];
                                    });
        $.merge(indexesOfOldEditedRows, indexesOfEditedRows);
    }
});


$("#postAllGridData").click(function () {
    var gridData, indexes = $grid.jqGrid("getGridParam", "_index"),
        idPrefix = $grid.jqGrid("getGridParam", "idPrefix"),
        indexesOfEditedRows;
        // get ids of edited rows
    $grid.jqGrid("saveRow", lastSel);
    indexesOfEditedRows = $.map($grid.find(">tbody>tr[editable]"),
                                function(elem) {
                                    return indexes[$.jgrid.stripPref(idPrefix, $(elem).attr("id"))];
                                });
    $.merge(indexesOfOldEditedRows, indexesOfEditedRows);
    // get data of edited rows
    gridData = $.grep($grid.jqGrid("getGridParam", "data"), function(row, i) {
        return $.inArray(i, indexesOfOldEditedRows) >= 0;
    });
    alert("data:\n" + JSON.stringify(gridData));
});