内嵌jqGrid的保存按钮点击问题 [英] Inline JqGrid save button click issue

问题描述

我是集思广益如何调用我的MVC控制器操作与内联编辑jqGrid的保存按钮几乎一天。
请看下面的截图

I was brainstorming almost a day on how to invoke my MVC controller action with inline edit jQgrid save button. Please see the below screenshot

我已经尝试了jqGrid的以下配置

I have tried the following configuration for jqGrid

$("#tbl-items").CreateGrid({
                url: '@Url.Action("ItemList", "Item")',
                editurl: '@Url.Action("Create", "Item")',
                jsonReader: { id: "ItemID" },
                prmNames: { id: "ItemID" },
                colNames: ['Item ID', Item Name],
                colModel: [{ name: 'ItemID', index: 'ItemID', sorttype: 'integer', hidden: true, key: true },
                   { name: 'ItemName', index: 'ItemName', sortable: true, autowidth: true, shrinkToFit: true, searchoptions: { sopt: ['cn'] }, editable: true }],
                gridCompleteCallback: function () {
                    //Code to bind my custom edit and delete button as per the requirement
                },
                container: "#container-item",
                server: true,
                pagerID: "#itempager",
                sortName: 'ItemName',
                sortorder: 'asc',
                loadingText: 'Loading please wait',
                noRecordText: 'Not records found'
            });

为了覆盖拯救事件我曾尝试下面的脚本

In order to override the save event I have tried the following script

 function saveItem(action) {
                return {
                    url: '@Url.Action("Create", "Item")', // Url to my MVC controller
                    onclickSubmit: function (params) {
                        var list = $("#tbl-items");
                        var selectedRow = list.getGridParam("selrow");
                        // Code 
                    }
                };
            }

$("#tbl-items").jqGrid('navGrid', '#itempager',
            {
                //add: false,
                edit: false,
                del: false
            },
            saveItem('PUT')
        );
        $("#tbl-items").jqGrid('inlineNav', '#itempager',
            {
                edit: false,
                add: true, 
            });

我知道我做错了，我的jqGrid配置。任何人都可以纠正我修我的问题。在此先感谢

I know I have done something wrong in my jqGrid configuration. Can anyone correct me in fixing my issue. Thanks in advance

推荐答案

要使用添加表单编辑按钮您不需要用 inlineNav 所有即可。您需要使用仅 navGrid 通过相应的参数。该方法 navGrid 添加一些按钮，并呼吁点击导航栏中的相应按钮，相应的jqGrid的方法。中的 navGrid 参数的完整列表http://www.trirand.com/jqgridwiki/doku.php?id=wiki:navigator#definition 相对=nofollow>文档和它看起来

To use Add button of the form editing you don't need to use inlineNav at all. You need use only navGrid with the corresponding parameters. The method navGrid adds some buttons and it calls the corresponding jqGrid method on click on the corresponding button of navigator bar. The full list of parameters of navGrid described in the documentation and it looks as

$("#tbl-items").jqGrid("navGrid", "#itempager", navGridOptions,
    prmEdit, prmAdd, prmDel, prmSearch, prmView);

navGridOptions 将用于指定 navGrid 选项本身，如 {编辑：假的，德尔：假} ，您可以用。下一个参数（使用 saveItem（'PUT'））指定的 editGridRow 方法，该方法将在点击导航栏的编辑按钮来调用。您可以使用编辑：假 navGrid 和参数将被忽略的选项。下一个参数指定 editGridRow 的呼吁点击添加按钮的选项。你不指定的任何选项，这样的默认选项将被使用。 jqGrid的用途将 editurl 作为选项。

navGridOptions will be used to specify the options of navGrid itself, like {edit: false, del: false}, which you use. The next parameter (you use saveItem('PUT')) specify the options of editGridRow method which will be called on click on Edit button of navigator bar. You use edit: false option of navGrid and the parameter will be ignored. The next parameter specify the options of editGridRow called on click on Add button. You don't specified any options so the default options will be used. jqGrid will uses editurl as the option.

要保存新行一是需要preSS上提交表单编辑的按钮。 否保存按钮需要。这将仅适用于由 inlineNav 添加添加/编辑按钮，然后用户需要在保存按钮单击保存更改用户第一次点击直接编辑使用。因为你写的，你需要设置只是添加表单编辑按钮，就应该删除 inlineNav ，它将从导航栏中删除不需要的保存按钮。

To save the new row one need to press on Submit button of form editing. No Save button is needed. It will be used only for inline editing in the user first clicks on Add/Edit buttons added by inlineNav and then the user need to click on Save button for saving the changes. Because you wrote that you "need to set just the add form editing button", you should remove inlineNav, which will remove unneeded Save button from the navigator bar.

更新：如果您确实需要使用内联编辑并没有任何形式的编辑，那么你应该使用 navGrid 中其中新增无添加按钮，然后在表单中使用 inlineNav 里面添加添加按钮，并指定网​​址在这两个选项 editParams 和 addParams.addRowParams 选项。因为你用旧的jqGrid 4.5.1，其中包含越野车 inlineNav 的这两个选项的使用是必需的。不过，我希望低于code将工作：

UPDATED: If you do need to use inline editing and no form editing then you should use navGrid in the form which add no Add button and then use inlineNav which add Add button and which specify url option in both editParams and addParams.addRowParams options. The usage of both options is required because you use old jqGrid 4.5.1, which contains buggy inlineNav. Nevertheless I hope that the below code will work:

$("#tbl-items").jqGrid('navGrid', '#itempager',
    {
        add: false,
        edit: false,
        del: false
    }
);
$("#tbl-items").jqGrid('inlineNav', '#itempager',
    {
        edit: false,
        add: true, 
        editParams: {
            keys: true,
            url: '@Url.Action("Create", "Item")'
        },
        addParams: {
            addRowParams: {
                keys: true,
                url: '@Url.Action("Create", "Item")'
            }
        }
    }
);

我添加键：真正的，允许由pressing <大骨节病>输入键保存一行。我建议你​​更新到免费的jqGrid 以较少的问题，并能够使用简化的选项内联编辑在维基文章描述。

I added keys: true which allows to save the row by pressing Enter key. I recommend you to update to free jqGrid to have less problems and to be able to use simplified options for inline editing described in the wiki article.

这篇关于内嵌jqGrid的保存按钮点击问题的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！