Search code examples
javascriptjqgridfree-jqgrid

jqGrid modal edit save only changed data and marked edited row?

I use jqGrid 4.9.3-pre - free jqGrid by Oleg. I edit data using the model window "Form Editing". The data get from the server. datatype: "json" with loadonce: false, paging of data don't use I use a standard table. Just call "Form Editing" ondblClickRow.

    ondblClickRow: function(rowid) {
  $(this).jqGrid('setSelection', rowid)
           .jqGrid("editGridRow", rowid, { 
    recreateForm: true,
    width: 1000,
    height: "auto"});
    }

Two questions:

  1. Mark the row when has been edited. enter image description here
  2. When you edit the data and press the button Save. How do I send the data that has been modified data to the server?
Solution

  • I find your question interesting and so I created the demo, which demonstrates one of the possible implementation of making edited field of form editing. The results looks like on the picture below

    enter image description here

    The corresponding code is inside of beforeShowForm callback:

    beforeShowForm: function ($form) {
    var $self = $(this),
        myMarker = "<span class='mychanged-item fa fa-lg fa-arrow-circle-o-left' style='display:none;border-radius:6px;background-color:LightGreen;'></span>";
    $form.find(".FormElement").focusout(function () {
        var colName = $(this).attr("name"),
            rowid = $form.find("input[name='" + $self[0].id + "_id" + "']")
                    .val(),
            oldValue = $self.jqGrid("getCell", rowid, colName),
            $myMarker = $(this).closest("td")
                        .next("td")
                        .find("span.mychanged-item");
        if ($(this).val() !== oldValue) {
            $myMarker.css("display", "");     // show
        } else {
            $myMarker.css("display", "none"); // hide
        }
    }).each(function () {
        $(this).closest("td")
            .after("<td style='width:15px'>" + myMarker + "</td>");
    });
}