以下是一些建议,可以解决您的主要问题并改善您发布的Javascript代码。
首先,新的rowid产生 局部 需要本地编辑场景。如果将数据保存在数据库的后端,则应 在服务器上 生成新的rowid 。典型的实现包括在 每个
表中进行
PRIMARYKEY定义。它使ID唯一且固定。删除某一行并创建新行将永远不会被解释为对旧行的编辑,因为新行将始终获得新的ID,而该ID从未在表中使用过。
intIDENTITY__
要利用在 服务器端 生成的ID的优势,有两个主要选择:
- 每次“添加行”操作后重新加载网格。
- 在编辑时扩展与服务器的通信,以便服务器将在数据库表中生成的新ID返回给jqGrid。
aftersavefunc
在服务器上成功创建行后,可以使用回调(仅用于添加新行)来更新行ID。RESTful服务的许多标准实现都在“添加”或“编辑”上返回 全行数据( 包括ID)。可以使用aftersavefunc
回调内部的数据,并使用诸如$("#" + rowid).attr("id", newRowid);更新新行之类的方法。它会将ID保存在其他一些列中(例如,您使用隐藏id
列),然后应该setCell
另外使用方法更新单元格。
首选是最简单的方法,我建议您首先实施它。仅当网格的重新加载不能满足用户的需求时(他们又接连添加了许多行),您才应该编写一些代码并实现第二种方案。
您当前的代码
inlineNav用于通过内联编辑实现的“添加”和“编辑”操作,以及
navGrid通过表单编辑实现的“删除”操作的方法。
reloadAfterSubmit:true默认情况下,表单编辑(包括删除)使用选项。这意味着
url:"/RestWithDatabaseConnection/rest/fetchData"在删除每一行之后,将从服务器(从中)重新加载网格。您可以通过替换
afterSaveFunction以下内容来解决主要问题:
var afterSaveFunction = function () { $(this).trigger("reloadGrid", [{current: true, fromServer: true}]); };选项
current重装之后保持当前的选择和选项
fromServer: true都感觉只有在情况下,如果你使用
loadonce:true的选项还。您只需使用导航选项栏上的刷新/重新加载按钮,就可以强制使用
reloadGridOptions: {fromServer:true}选项 从服务器navGrid重新加载数据。如果没有太多需要在网格中显示的数据(例如少于1000行),则建议采取这种行为。 __
一些更常见的建议可以改善您的代码:
您可以考虑通过指定值来
height: "auto"代替
height: 250和管理网格的最大高度
rowNum。
scrollOffset:0在这种情况下,将不需要该选项。
从服务器返回的数据格式看起来像这样,因此您 没有实现服务器端的分页,排序和过滤 。您应该使用
loadonce:true和
forceClientSorting: true选项。该
loadonce: true运筹学的jqGrid保存 所有
从服务器内部本地返回的数据
data参数。您可以随时通过用法访问数组
$('#grid').jqGrid("getGridParam","data")。值rowNum(默认值为20)将用于 本地 分页。在
sortname与
sortorder将被用于 当地的
排序。然后,您将使用搜索对话框(由添加
navGrid)或过滤器工具栏(由添加
filterToolbar)来查找 本地
搜索/过滤。它简化了服务器代码,从用户的角度提高了网格的性能,并简化了服务器和客户端之间的接口。您可以在服务器上使用经典的RESTful接口,而无需任何扩展。
另一个说明:建议您删除不需要的隐藏
id列(
name:'id', label:'id', key: true, hidden: true,...)。关于rowid的信息将保存在
idrows(
<tr>元素)的属性中,不需要
<td>在每行的隐藏元素中保留重复信息。
您的代码还有很多其他部分,可以进行改进。例如,您在服务器端使用的DELETe操作似乎很奇怪。您使用
mtype: 'DELETE',但是将请求 正文
中已删除行的ID 发送到服务器,而不是将其附加到URL。对应于标准,HTTP DELETE不应该包含 body
。您可以使用jqGrid选项
formDeleting指定所有Delete选项,还可以将
url参数定义为函数:
formDeleting: { mtype: "DELETE", url: function (rowid) { return "/RestWithDatabaseConnection/rest/delete/" + rowid; }, ajaxDelOptions: { contentType: "application/json" }, serializeDeldata: function () { return ""; }}您需要原因修改服务器代码,
/RestWithDatabaseConnection/rest/delete/以使用相同的通信协议并从URL中获取已删除的ID。
您可以使用
navOptionsfree jqGrid的参数来指定以下选项
navGrid:
navOptions: { edit: false, add: false }(
searchtext: 'Search'以及您使用的其他选项似乎具有默认值,因此我将其删除了)。
为了更接近REST标准,可以使用HTTP PUT操作进行行编辑,并使用HTTP POST添加新行。您应该为后端的两个操作实现 不同的
入口点。您
/RestWithDatabaseConnection/rest/update已经使用过,可以实现
/RestWithDatabaseConnection/rest/create添加新行。
inlineEditing例如,您可以使用以下更改来实现方案:
inlineNavOptions: { add: true, edit: true },inlineEditing: { url: function (id, editOrAdd) { return "/RestWithDatabaseConnection/rest/" + (editOrAdd === "edit" ? "update" : "create"); }, mtype: function (editOrAdd) { return editOrAdd === "edit" ? "PUT" : "POST"; }, keys: true, serializeSavedata: function (postData) { return JSON.stringify(dataToSend); }, aftersavefunc: function () { $(this).trigger("reloadGrid", [{current: true, fromServer: true}]); }, addParams: { addRowParams: { position: "last", serializeSavedata: function (postData) { var dataToSend = $.extend({}, postData); // don't send any id in case of creating new row // or to send `0`: delete dataToSend.id; // or dataToSend.id = 0; return JSON.stringify(dataToSend); } } }}


