JqGrid Inline Adding Record Save

问题

I've gone through many of the questions regarding adding records inline in JqGrid but I haven't been able to figure it out. I have inline editing working and adding a record using a modal popup. I'm using ASP.NET MVC5 with EF.

I have the add button already working with a modal popup and the record saves to the database, but what I need is for an empty line to be added to the end of the grid (which I have working) and for the record to save to the database when the enter key is pressed after the fields have been entered. Thank you in advance for your help!

I'm using jqgrid version 4.4.4.

Here is the create method I'm currently using in the 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;
    }

I have inline editing working as you can see in this next code block:

    $("#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);
    },

The following code has been one of my many attempts to get the inline adding working. I got the blank row to add, but I can't get it to save when pressing enter after all the fields have been entered:

    .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:

I'm not sure which problem you have exactly. In any way the usage of inlineNav in retro version 4.4.4 is very bad idea, because old version contains many bugs. I suggest you to upgrade to free jqGrid 4.13.1 and use new style of editing options described detailed in the wiki article. By the way position: "afterSelected" is already implemented in free jqGrid

It's important to use inlineNav one and not inside of onSelectRow. Try just to use the option

inlineEditing: { keys: true }

which allows to specify default options of any calls of editRow, direct inside of onSelectRow and indirect, which do inlineNav.

Additionally I'd recommend you to use built-in "savedRow" parameter of jqGrid instead of lastSelectedRow. You can move the part of the code from onSelectRow to beforeSelectRow like described in the answer. It will do correct actions in case of errors in saveRow, for example validation errors.

I think that no additional navButtonAdd will be needed. In any way I'd recommend you to remove <div id="pager"></div> from HTML markup of your page and to use pager: true option instead of pager: '#pager'. By call of navGrid, inlineNav and navButtonAdd you can skip the parameter '#pager'. Free jqGrid detect the type of the parameter and will automatically use the pager of the grid.

I'd recommend you finally to use Font Awesome and optionally Bootstrap instead of jQuery UI CSS. Free jqGrid supports all the features.

来源：https://stackoverflow.com/questions/36071239/jqgrid-inline-adding-record-save