jqGrid模式編輯僅保存更改的數據並標記為已編輯行？

Question

我使用的是jqGrid 4.9.3-pre-Oleg提供的免費jqGrid。 我使用模型窗口“表單編輯”來編輯數據。 數據從服務器獲取。 數據類型：“ json” ， 加載時間：false ， 不使用數據分頁我使用標准表。 只需在ondblClickRow上調用“表單編輯”即可。

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

兩個問題：

1. 在編輯時標記該行。
2. 當您編輯數據並按保存按鈕時。 如何將已修改的數據發送到服務器？

Answer 1

我發現您的問題很有趣，因此我創建了演示 ，演示了使表單編輯的可編輯字段成為可能的一種實現。 結果如下圖所示

相應的代碼在beforeShowForm回調內部：

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>");
    });
}