JqG​​rid内联添加记录保存

我已经解决了许多关于在JqGrid中添加内联记录的问题，但我无法弄明白。 我有内联编辑工作，并使用模态弹出窗口添加记录。 我正在使用带有EF的ASP.NET MVC5。

我有一个添加按钮已经使用模态弹出窗口并且记录保存到数据库，但我需要的是将空行添加到网格的末尾（我已经工作）并将记录保存到输入字段后按Enter键时的数据库。 预先感谢您的帮助！

我正在使用jqgrid版本4.4.4。

这是我目前在控制器中使用的创建方法：

[HttpPost] public string Create([Bind(Exclude = "TRANS_ID")] TRANSACTIONS_DETAIL tcrdetails) { string msg; try{ ModelState.Remove("TRANS_ID"); if(ModelState.IsValid) { db.TRANSACTIONS_DETAIL.Add(tcrdetails); db.SaveChanges(); msg = "Saved Successfully"; } else { msg = "Validation data not successfull"; } } catch(Exception ex) { msg = "Error occured: " + ex.Message; } return msg; } 

我在内联编辑工作正如您在下一个代码块中看到的那样：

  $("#grid").jqGrid({ url: "/Transactions/GetTransactions/", /*url: "/Transactions/GetTransactions/@ViewBag.hohupi",*/ addParams: { position: "afterSelected", addRowParams: { // the parameters of editRow used to edit new row keys: true, oneditfunc: function (rowid) { alert("new row with rowid=" + rowid + " are added."); } } }, //url for inline edit editurl: "/Transactions/Modify", //event for inline edit onSelectRow: function(currentSelectedRow){ if(currentSelectedRow && currentSelectedRow != $.lastSelectedRow){ //save changes in row $('#grid').jqGrid('saveRow', $.lastSelectedRow, false); $.lastSelectedRow = currentSelectedRow; } //$('#grid').jqGrid("inlineNav", "#pager", { addParams: { position: "last" } }); $('#grid').jqGrid('inlineNav', '#pager', { addParams: { position: "last" } }); //trigger inline edit for row $('#grid').jqGrid('editRow', $.lastSelectedRow, true); // $('#grid').jqGrid('addRow', $.lastSelectedRow, true); }, 

以下代码是我尝试使内联添加工作的众多尝试之一。 我添加了空白行，但是在输入所有字段后按Enter键时我无法保存：

  .navButtonAdd('#pager',{caption:"ADD", buttonicon :'ui-icon-circle-plus',onClickButton:function(id){ var newID=1; $("#grid").find("tbody tr").each(function(){if(newID<=parseInt(this.id)){newID=parseInt(this.id)+1;}}); var datarow = { HOH_UPI: "", ICI: "", BILL_QTR: "", BNFT_YR: "", BNFT_MTH: "", AMOUNT: "", TRANS_TYPE: "", CHECK_NMB: "", CHK_DT_RCVD: "", ENTRY_DT: "", NAME_ON_CHECK: "", INDV_BATCH_NMB: "", USER_INIT: "", RTN_CHK_DT: "", LATE_DT: "", FINAL_DT: "", COMMENTS: "", Modified_date: "" }; var su=jQuery("#grid").addRowData(newID,datarow,"last"); if (su) {jQuery("#grid").editRow(newID,true);jQuery("#grid").saveRow(newID,false);}}, title:"Add_new_row", position:"last" }); 

Answer 1

我不确定你到底有哪些问题。 无论如何，在复古版本4.4.4中使用inlineNav是一个非常糟糕的主意，因为旧版本包含许多错误。 我建议你升级到免费的jqGrid 4.13.1，并使用wiki文章中详细描述的新风格的编辑选项。 顺便说一下position: "afterSelected"已经在免费的jqGrid中实现了

使用inlineNav 一个而不是onSelectRow是很重要的。 尝试使用该选项

 inlineEditing: { keys: true } 

允许指定editRow的任何调用的默认选项，直接在onSelectRow内部，而间接inlineNav 。

另外我建议你使用"savedRow"内置"savedRow"参数而不是lastSelectedRow 。 您可以将代码的一部分从onSelectRow到beforeSelectRow如答案中所述 。 如果saveRow出现错误，它将执行正确的操作，例如validation错误。

我认为不需要额外的navButtonAdd 。 无论如何，我建议您从页面的HTML标记中删除

，并使用pager: true选项而不是pager: '#pager' 。 通过调用navGrid ， inlineNav和navButtonAdd您可以跳过参数'#pager' 。 free jqGrid检测参数的类型，并自动使用网格的寻呼机。

我建议你最后使用Font Awesome和可选的Bootstrap而不是jQuery UI CSS。 免费的jqGrid支持所有function。