JqG​​rid编辑表单和分页不在表单上一起工作

Question

我使用“编辑表单”对话框编辑网格。我提交按钮后需要重新加载网格。我已经设置了reloadAfterSubmit：true。这在我的网格上设置mtype =“POST”时有效。我提交编辑表单后立即重新加载网格。但我不能让寻呼机工作。

当我删除mtype =“POST”时，寻呼机将工作但编辑表单不会刷新网格。请给我一些意见。

$("#list").jqGrid({
                url: "../Hdlr.ashx?GetData",
                mtype: "POST",
               colNames: ['Id', 'Short Description', 'Long Description','', ''],
                colModel: [
                    { name: 'Id', index: 'Id', width: 50, align: 'left', editable: false },
                    { name: 'ShortDescription', index: 'ShortDescription', width: 200, align: 'left', sortable: true, editable: true, edittype: 'text', editrules: { required: true } },
                    { name: 'LongDescription', index: 'LongDescription', width: 200, align: 'left', sortable: true, editable: true, edittype: 'text', editrules: { required: true } },
                    { name: 'edit', width: 30, sortable: false, formatter: 'actions', formatoptions: { keys: true, editformbutton: true, delbutton: false, editbutton: false } },
                    { name: 'delete', width: 30, sortable: false, formatter: 'actions', formatoptions: { keys: true, editformbutton: false, delbutton: true, editbutton: false } }],
                postData: {
                    Category: function () { return $("#Category").val(); }
                },
                jsonReader: {
                    cell: "",
                    id: "0"
                },
                pager: '#pager',
                rowNum: 10,
                rowList: [10, 20, 50],
                rownumbers: true,
                sortname: 'Id',
                sortorder: "asc",
                viewrecords: true,
                caption: 'MY GridInformation'
            }).jqGrid("navGrid", "#pager", { edit: false, add: false, del: false, search: false });
        }

寻呼机不能用于jqGrid的简单声明。请帮忙

 $(function () {
            $("#list").jqGrid({
                url: "../Hdlr.ashx?method=GetData",
             mtype: 'POST',
                colNames: ['Id', 'Category', 'ShortDescription', 'LongDescription'],
                colModel: [
                    { name: 'Id', index: 'Id', width: 50, align: 'left', editable: false },
                    { name: 'Category', index: 'Category', width: 100, align: 'left', sortable: true },
                    { name: 'ShortDescription', index: 'ShortDescription', width: 200, align: 'left', sortable: true },
                    { name: 'LongDescription', index: 'LongDescription', width: 200, align: 'left', sortable: true }],
            jsonReader: {
                    cell: "",
                    id: "0"
                },
                pager: '#pager',
                rowNum: 10,
                rowList: [10, 20, 50],
                rownumbers: true,
              viewrecords: true,
                caption: 'Caption'
            }).jqGrid("navGrid", "#pager", { edit: false, add: false, del: false, search: false });
        });












    $.extend($.jgrid.edit, {
            editData: { Category: function () { return $("#Category").val(); } },
            url: '../Hdlr.ashx?SaveData',
            closeOnEscape: true,
            reloadAfterSubmit: true,
            closeAfterEdit: true,
            viewPagerButtons: false,
            });




I have removed edit and add options. The pager on grid is not working
<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="FeaturedContent" runat="server">
     <link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/redmond/jquery-ui.css" rel="stylesheet" type="text/css" />
    <link rel="stylesheet" href="../Content/ui.jqgrid.css" type="text/css" />
    <script src="http://ajax.aspnetcdn.com/ajax/jquery/jquery-1.7.2.min.js"></script>
    <script src="http://ajax.aspnetcdn.com/ajax/jquery.ui/1.8.20/jquery-ui.min.js"></script>
    <script type="text/javascript" src="../Scripts/grid.locale-en.js"></script>
    <script type="text/javascript" src="../Scripts/jquery.jqGrid.min.js"></script>

    <script type="text/javascript">
        $.jgrid.no_legacy_api = true;
        $.jgrid.useJSON = true;
    </script>
  <script type="text/javascript" src="../Scripts/Common.js"></script>

    <script type="text/javascript">
        $(function () {
            "use strict";

            $("#list").jqGrid({
                url: "../Hdlr.ashx?method=GetData",
                mtype: 'POST',
                colNames: ['Id'],
                colModel: [{ name: 'id', index: 'id', width: 500}],
                jsonReader: {cell: "0"},
                pager: '#pager',
                rowNum: 10,
                rowList: [10, 20, 50],
                caption: 'Grid Information'
            }).jqGrid("navGrid", "#pager", { edit: false, add: false, del: false, search: false });
        });
        </script>
</asp:Content>
<asp:Content ID="Content3" ContentPlaceHolderID="MainContent" runat="server">
      <table id="list">
                </table>
                <div id="pager"></div>
</asp:Content>

    enter code here

Answer 1

作为示例，您可以构建自己的编辑功能，而不是扩展jqGrid设置，以便在连续按下按钮时调用。

function EditCollectionItem (rowid, grid){

    $(grid).jqGrid('editGridRow', rowid,
    {
        viewPagerButtons: false,
        editData: { ValueName: value },
        afterShowForm: function (formid) {
            //dostuff here if you wish, ex make a field have focus
        }, //afterShowForm
        afterComplete: function (response) {
          //deal with how the edit went
        } //afterComplete
    }); //$this.jqGrid('editGridRow

}//function EditCollectionItem (rowid, grid){

您可以在此设置所有其他编辑选项，与在原始代码中扩展它们的位置相同。