内联 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 方法。 navGrid 的完整参数列表在the documentation 中描述，它看起来像

$("#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 添加的添加/编辑按钮，然后用户需要单击保存按钮以保存更改。因为你写了你“只需要设置添加表单编辑按钮”，你应该删除inlineNav，这将从导航栏中删除不需要的保存按钮。

更新：如果您确实需要使用内联编辑并且没有表单编辑，那么您应该在没有添加按钮的表单中使用navGrid，然后使用@ 987654346@ 添加添加按钮并在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 以减少问题并能够使用the wiki article 中描述的简化选项进行内联编辑。