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方法的选项，单击导航栏的“编辑”按钮将调用该方法。您使用edit: false的{{1}}选项，该参数将被忽略。下一个参数指定在单击“添加”按钮时调用的navGrid选项。您没有指定任何选项，因此将使用默认选项。 jqGrid将使用editGridRow作为选项。

要保存新行，需要按表单编辑的“提交”按钮。 无需保存按钮。它将仅用于用户首次单击editurl添加的“添加/编辑”按钮进行内联编辑，然后用户需要单击“保存”按钮以保存更改。因为您写道，您需要只设置添加表单编辑按钮＆＃34;，您应该删除inlineNav，这将从导航栏中删除不需要的保存按钮。

更新：如果您确实需要使用内联编辑而不进行表单编辑，那么您应该在不添加“添加”按钮的表单中使用inlineNav，然后使用navGrid添加“添加”按钮，并在inlineNav和url选项中指定editParams选项。两个选项的使用是必需的，因为您使用旧的jqGrid 4.5.1，其中包含错误addParams.addRowParams。不过我希望下面的代码可以工作：

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")' } } } );，可以通过按 Enter 键来保存行。我建议您更新到free jqGrid以减少问题，并且能够使用the wiki article中描述的内联编辑的简化选项。

内联JqGrid保存按钮单击问题

1 个答案: