jqGrid模态编辑只保存已更改的数据并标记已编辑的行?

时间:2016-01-27 10:30:05

标签: javascript jqgrid free-jqgrid

我使用了Oleg的jqGrid 4.9.3-pre-free jqGrid。我使用模型窗口编辑数据"表格编辑"。数据来自服务器。 数据类型:" json" loadonce:false 数据分页不使用 我使用标准表。只需拨打#34;表格编辑" ondblClickRow。

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

两个问题:

  1. 编辑时标记行。 enter image description here
  2. 编辑数据时,按“保存”按钮。如何将已修改数据的数据发送到服务器?

1 个答案:

答案 0 :(得分:0)

我觉得你的问题很有趣,所以我创建了the demo,它演示了编辑表单编辑字段的可能实现之一。结果如下图所示

enter image description here

相应的代码位于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>");
    });
}