JqGrid編輯窗體和頁面不在窗體上一起工作

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){ 

您可以在此處將您所有其他編輯選項設置爲與原始代碼中的擴展位置相同。