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

Posted 2023-05-09

【中文标题】JqG​​rid 内联添加记录保存

【英文标题】：JqGrid Inline Adding Record Save

【发布时间】：2016-07-04 10:22:07

【问题描述】：

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

我的添加按钮已经在使用模式弹出窗口并且记录保存到数据库中，但我需要的是在网格末尾添加一个空行（我正在使用）和记录输入字段后按回车键保存到数据库。提前感谢您的帮助！

我使用的是 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" );

【参考方案1】：

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

重要的是使用inlineNav one 而不是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'。免费jqGrid检测参数的类型，会自动使用grid的pager。

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