内联 JqGrid 保存按钮单击问题

Question

关于如何使用内联编辑 jQgrid 保存按钮调用我的 MVC 控制器操作，我几乎一天都在集思广益。请看下面的截图

我已经为 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'
            });

为了覆盖保存事件，我尝试了以下脚本

 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 配置有问题。任何人都可以纠正我解决我的问题。提前致谢

Answer 1

要使用表单编辑的添加按钮，您根本不需要使用inlineNav。您只需要使用 navGrid 和相应的参数。方法 navGrid 添加了一些按钮，并在单击导航栏的相应按钮时调用相应的 jqGrid 方法。 the documentation 中描述的 navGrid 的完整参数列表，它看起来像

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

navGridOptions 将用于指定 navGrid 本身的选项，就像您使用的 {edit: false, del: false} 一样。下一个参数（您使用 saveItem('PUT')）指定 editGridRow 方法的选项，该方法将在单击导航栏的编辑按钮时调用。您使用 navGrid 的 edit: false 选项，参数将被忽略。下一个参数指定在单击添加按钮时调用的 editGridRow 的选项。您没有指定任何选项，因此将使用默认选项。 jqGrid 将使用 editurl 作为选项。

要保存新行，需要按表单编辑的提交按钮。 不需要保存按钮。它将仅用于内联编辑，用户首先单击 inlineNav 添加的 Add/Edit 按钮，然后用户需要单击“保存”按钮以保存更改。因为你写了你 "need to set just the add form editing button"，你应该删除 inlineNav，这将从导航栏中删除不需要的保存按钮。

已更新： 如果您确实需要使用 内联编辑 而没有表单编辑，那么您应该使用 navGrid表单不添加添加按钮，然后使用 inlineNav 添加添加按钮并在 editParams 和 addParams.addRowParams 选项中指定 url 选项。这两个选项的使用都是必需的，因为您使用旧的 jqGrid 4.5.1，其中包含错误 inlineNav。尽管如此，我还是希望下面的代码能够工作：

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

我添加了 keys: true，它允许按 Enter 键保存行。我建议你更新到 free jqGrid to have less problems and to be able to use simplified options for inline editing described in the wiki article.

内联 JqGrid 保存按钮单击问题

Inline JqGrid save button click issue

asp.net-mvc

jquery

inline

jqgrid

inline-editing