jqGrid的在线添加记录保存 [英] JqGrid Inline Adding Record Save

查看：439
本文介绍了jqGrid的在线添加记录保存的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！

问题描述

我已经经历了许多关于jqGrid的直列添加记录的问题了，但我一直没能弄明白。我有内联编辑工作，并使用模式弹出添加记录。我使用ASP.NET MVC5与EF

我添加按钮已经与模式弹出工作和记录保存到数据库中，但我需要的是被添加到网格（这是我的工作）的最后一个空行，并记录在案保存到数据库中，当输入的字段已输入后，关键是pressed。预先感谢您的帮助！

我使用的jqGrid版本4.4.4。

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

  [HttpPost]
    公共字符串创建（[绑定（不包括=TRANS_ID）] TRANSACTIONS_DETAIL tcrdetails）
    {
        string信息;
        尝试{
            ModelState.Remove（TRANS_ID）;
            如果（ModelState.IsValid）
            {
                db.TRANSACTIONS_DETAIL.Add（tcrdetails）;
                db.SaveChanges（）;
                味精=成功保存;
            }
            其他
            {
                味精=验证数据未全成;
            }
        }
        赶上（异常前）
        {
            味精=发生错误：+ ex.Message;
        }
        返回味精;
    }

我有内联编辑工作，你可以在接下来的code座看到：

  $（＃电网）。jqGrid的（{
    网址：/交易/ GetTransactions /
    / * URL：/Transactions/GetTransactions/@ViewBag.hohupi\",*/    addParams：{
        位置：afterSelected
        addRowParams：{
            // editRow的参数用于编辑新行
            键：真实，
            oneditfunc：功能（ROWID）{
                警报（新行的rowid =+ ROWID +添加）;
            }
        }
    }，    //网址联编辑
    editurl：/交易/修改，
    //事件联编辑
    onSelectRow：功能（currentSelectedRow）{
        如果（currentSelectedRow＆安培;＆安培;！currentSelectedRow = $ .lastSelectedRow）{
            //保存行更改
            $（'＃网格）的jqGrid（'saveRow'，$ .lastSelectedRow，假的）。
            $ .lastSelectedRow = currentSelectedRow;
        }
        //$('#grid').jqGrid(\"inlineNav，#pager，{addParams：{立场：最后一个}}）;
        $（'＃网格）的jqGrid（'inlineNav'，'#pager'，{addParams：{立场：最后一个}}）。
        //为行触发器联编辑
        $（'＃网格）的jqGrid（'editRow'，$ .lastSelectedRow，真实）。
       // $（'＃网格）的jqGrid（'addRow'，$ .lastSelectedRow，真实）。
    }，

以下code一直是我的许多尝试，以获得在线添加的工作之一。我得到的空白行补充，但我不能把它保存在pressing所有字段输入后已输入：

  .navButtonAdd（'＃寻呼机'，{标题：ADD，buttonicon：UI图标圈加'，onClickButton：功能（ID）{
VAR NEWID = 1;
$（＃电网）找到（TBODY TR）每个（函数（）{如果（NEWID＆LT; = parseInt函数（this.id））{NEWID = parseInt函数（this.id）+1;}}）;
VAR数据行= {    HOH_UPI：，ICI：，BILL_QTR：，
    BNFT_YR：，BNFT_MTH：，金额，TRANS_TYPE：，
    CHECK_NMB：，CHK_DT_RCVD：，ENTRY_DT：，NAME_ON_CHECK：，
    INDV_BATCH_NMB：，USER_INIT：，RTN_CHK_DT：，LATE_DT：，FINAL_DT：评论说：，MODIFIED_DATE：};
VAR苏=的jQuery（＃电网）addRowData（NEWID，数据行，最后）。
如果（SU）{jQuery的（＃电网）editRow（NEWID，真）; jQuery的（＃电网）saveRow（NEWID，FALSE）;}}，标题：Add_new_row的位置：最后一个} ）;


解决方案

我不知道你有哪些问题完全吻合。以任何方式 inlineNav 的复古版本4.4.4的使用是非常糟糕的主意，因为旧版本包含了许多错误。我建议你​​升级到免费的jqGrid 4.13.1和使用说明的详细编辑选项的新风格维基文章 。顺便说一句位置：afterSelected已经在自由的jqGrid实施

使用是很重要的 inlineNav 的有一个的，而不是在 onSelectRow 的。尝试只使用选项

  inlineEditing：{键：真正}

它允许指定的任何电话 editRow 的，直接放在 onSelectRow 和间接的，它做 inlineNav 。

此外，我建议你使用内置的savedRow的jqGrid的参数而不是 lastSelectedRow 的。你可以像的 onSelectRow 的code部分移至 beforeSelectRow ：//stackoverflow.com/a/34976517/315935>答案。它会做错误的情况下正确的行动 saveRow ，例如验证错误。

我认为没有其他 navButtonAdd 将需要。以任何方式，我建议你的删除的＆LT; D​​IV ID =寻呼机＆GT;＆LT; / DIV＆GT; 从HTML标记你页面，并使用寻呼机：真正的选项，而不是呼叫器：#pager。通过 navGrid ， inlineNav 调用和 navButtonAdd 您可以跳过的参数'＃寻呼机。免费的jqGrid检测参数的类型和将自动使用网格的寻呼机

我建议你终于来使用字体真棒和可选的自举，而不是jQuery UI的CSS。免费的jqGrid支持所有功能。

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" });

解决方案

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.

这篇关于jqGrid的在线添加记录保存的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！

查看全文
相关文章
前端开发最新文章
热门教程
热门工具
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆