我已经解决了许多有关在 JqGrid 中添加内联记录的问题,但我一直无法弄清楚。我有内联编辑工作并使用模式弹出窗口添加记录。我将 ASP.NET MVC5 与 EF 结合使用。
我的添加按钮已经可以使用模态弹出窗口,并且记录保存到数据库中,但我需要的是在网格末尾添加一个空行(我正在工作)并进行记录输入字段后按 Enter 键时保存到数据库。预先感谢您的帮助!
我使用的是 jqgrid 版本 4.4.4。
这是我当前在 Controller 中使用的创建方法:
[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" });
最佳答案
我不确定您到底遇到哪个问题。以任何方式使用 inlineNav
在复古版本 4.4.4 中是非常糟糕的主意,因为旧版本包含许多错误。我建议您升级到free jqGrid 4.13.1 并使用 the wiki article 中详细描述的新编辑选项样式。顺便说一句position: "afterSelected"
已经在免费的 jqGrid 中实现了
使用 inlineNav
很重要一个并且不在onSelectRow
内。尝试仅使用该选项
inlineEditing: { keys: true }
它允许指定 editRow
的任何调用的默认选项,直接在 onSelectRow
内部和间接,inlineNav
.
此外,我建议您使用内置 "savedRow"
jqGrid 的参数而不是 lastSelectedRow
。您可以将onSelectRow
中的部分代码移走至beforeSelectRow
如 the answer 中所述。如果 saveRow
中出现错误,它将执行正确的操作,例如验证错误。
我认为没有额外的navButtonAdd
将需要。无论如何,我建议您删除 <div id="pager"></div>
从页面的 HTML 标记并使用 pager: true
选项而不是 pager: '#pager'
。调用navGrid
, inlineNav
和navButtonAdd
您可以跳过参数'#pager'
。免费的jqGrid检测参数的类型,会自动使用grid的分页器。
我最终建议您使用 Font Awesome 和可选的 Bootstrap 而不是 jQuery UI CSS。免费的jqGrid支持所有功能。
关于javascript - JqGrid 内联添加记录保存,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/36071239/