Question

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

我有一个添加按钮已经使用模态弹出窗口并且记录保存到数据库，但我需要的是将空行添加到网格的末尾（我已经工作）和记录在输入字段后按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是非常糟糕的主意，因为旧版本包含许多错误。我建议您升级到free jqGrid 4.13.1并使用the wiki article中详述的新风格的编辑选项。顺便说一句position: "afterSelected"已经在免费的jqGrid中实现了

使用inlineNav 一个而不是onSelectRow内部非常重要。尝试使用选项

inlineEditing: { keys: true }

允许指定editRow的任意调用的默认选项，直接位于onSelectRow内，间接指定inlineNav。

此外，我建议您使用jqGrid的内置"savedRow"参数代替lastSelectedRow。您可以将代码的一部分从onSelectRow移至beforeSelectRow，如the answer中所述。如果saveRow出现错误，它会执行正确的操作，例如验证错误。

我认为不需要额外的navButtonAdd。无论如何，我建议您从页面的HTML标记中删除 <div id="pager"></div>，并使用pager: true选项代替pager: '#pager'。通过navGrid，inlineNav和navButtonAdd来电，您可以跳过参数'#pager'。 free jqGrid检测参数的类型，并自动使用网格的寻呼机。

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

JqGrid内联添加记录保存

1 个答案:

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

1 个答案:

JqGrid内联添加记录保存