jqGrid 模态编辑仅保存更改的数据和标记的编辑行?
jqGrid modal edit save only changed data and marked edited row?
我使用 jqGrid 4.9.3-pre - Oleg 的免费 jqGrid。我使用模型 window "Form Editing" 编辑数据。数据从服务器获取。
datatype: "json" with loadonce: false, 分页数据不使用
我使用标准 table。只需调用 "Form Editing" ondblClickRow。
ondblClickRow: function(rowid) {
$(this).jqGrid('setSelection', rowid)
.jqGrid("editGridRow", rowid, {
recreateForm: true,
width: 1000,
height: "auto"});
}
两个问题:
- 标记已编辑的行。
- 当您编辑数据并按下按钮保存时。如何将修改后的数据发送到服务器?
我觉得你的问题很有趣,所以我创建了 the demo,它演示了一种可能的实现形式编辑的编辑字段。结果如下图所示
对应的代码在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>");
});
}
我使用 jqGrid 4.9.3-pre - Oleg 的免费 jqGrid。我使用模型 window "Form Editing" 编辑数据。数据从服务器获取。 datatype: "json" with loadonce: false, 分页数据不使用 我使用标准 table。只需调用 "Form Editing" ondblClickRow。
ondblClickRow: function(rowid) {
$(this).jqGrid('setSelection', rowid)
.jqGrid("editGridRow", rowid, {
recreateForm: true,
width: 1000,
height: "auto"});
}
两个问题:
- 标记已编辑的行。
- 当您编辑数据并按下按钮保存时。如何将修改后的数据发送到服务器?
我觉得你的问题很有趣,所以我创建了 the demo,它演示了一种可能的实现形式编辑的编辑字段。结果如下图所示
对应的代码在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>");
});
}