jqGrid從自定義editFunc重新加載不工作

Question

我有一個自定義「editFunc」jqGrid的代碼，打開我自己的jQuery-UI面板來編輯數據。

它保存的數據沒有問題，但我無法使用「$（」＃blog-posts「）自動使用新數據更新jqGrid。trigger（」reloadGrid「）;」它不適用於「editFunc」。代碼如下。不知道如何解決它。 我在這裏做錯了什麼？

我想過的另一種方法是不要做一個完整的jqGrid重裝，但只更新編輯的數據。如何從editFunc手動更新成功編輯的jqGrid行，併成功更改了記錄數據，而無需重新加載所有記錄？

這裏是我的jqGrid配置：

<table id="blog-posts"> 
</table> 
<div id="blog-posts-nav"> 
</div> 
<div id="edit-blog-post"> 
</div> 
<script type="text/javascript"> 

    function wireUpForm(dialog, updateTargetId, updateUrl) { 
     $('form', dialog).submit(function() { 
      $.ajax({ 
       url: this.action, 
       type: this.method, 
       data: $(this).serialize(), 
       success: function (result) { 
        // Check whether the post was successful 
        if (result.success) { 
         // Close the dialog 
         $(dialog).dialog('close'); 
         // reload doesn't work if called from here 
         $("#blog-posts").trigger("reloadGrid"); 
        } else { 
         // Reload the dialog to show model errors 
         $(dialog).html(result); 
         // Setup the ajax submit logic 
         wireUpForm(dialog, updateTargetId, updateUrl); 
        } 
       } 
      }); 
      return false; 
     }); 
    } 

    $('#blog-posts').jqGrid({ 
     url: 'http://localhost:24533/Admin/BlogPosts', 
     datatype: "json", 
     colModel: [ 
     { name: 'id', index: 'id', label: 'Post ID', width: 55 }, 
     { name: 'enabled', index: 'enabled', label: 'Enabled', width: 60, editable: true, edittype: "checkbox", editoptions: { value: "Yes:No"} }, 
     { name: 'slug', index: 'slug', label: 'Slug', width: 300, editable: true, editoptions: { style: "width:300px;"} }, 
     { name: 'header', index: 'header', label: 'Header', width: 300, editable: true }, 
     { name: 'HtmlTitle', index: 'HtmlTitle', label: 'HTML Title', width: 300, editable: true }, 
     {name: 'created', index: 'created', label: 'Created', width: 100, editable: true }, 
     { name: 'lastUpdate', index: 'lastUpdate', label: 'Last Update', width: 100 } 
    ], 
     rowNum: 10, 
     rowList: [10, 20, 30], 
     pager: '#blog-posts-nav', 
     sortname: 'id', 
     viewrecords: true, 
     sortorder: "desc", 
     caption: "Blog Posts", 
     height: 210, 
    }); 
    $('#blog-posts').jqGrid('navGrid', '#blog-posts-nav', 
     { 
      editfunc: function (rowid) { 
       var element = $(this); 
       // Retrieve values from the HTML5 data attributes of the link 
       var dialogId = '#edit-blog-post'; 
       var dialogTitle = 'Dialog Title'; 
       var updateTargetId = '#container-to-update'; 
       var updateUrl = 'http://localhost:24533/Admin/BlogPostEdit/'; 
       // Load the form into the dialog div 
       $(dialogId).load('http://localhost:24533/Admin/BlogPostEdit?id=' + rowid, function() { 
        $(this).dialog({ 
         modal: false, 
         resizable: true, 
         minWidth: 650, 
         minHeight: 300, 
         height: $(window).height() * 0.95, 
         title: dialogTitle, 
         buttons: { 
          "Save": function() { 
           // Manually submit the form 
           var form = $('form', this); 
           //alert('1'); 
           $(form).submit(); 
           $("#blog-posts").trigger("reloadGrid"); 
           //alert('2'); 
          }, 
          "Cancel": function() { 
           //alert($("#blog-posts")); 
           //$("#blog-posts").trigger("reloadGrid"); 
           //alert($("#blog-posts").getCell(2,2)); 
           //alert($("#blog-posts").getGridParam('caption')); 
           $("#blog-posts").trigger("reloadGrid"); 
           //alert(element.serialize()); 
           //element.trigger("reloadGrid"); 
           //alert(element.attr('id')); 
           //$(this).dialog('close'); 
          } 
         } 
        }); 

        wireUpForm(this, updateTargetId, updateUrl); 
       }); 

       return false; 
      }, 

     { height: 280, reloadAfterSubmit: true }, // edit options 
     {width: 600, reloadAfterSubmit: true, top: 100, left: 300, addCaption: 'Add Blog Post' }, // add options 
     {reloadAfterSubmit: true }, // del options 
     {} // search options 
    ); 


    $('.wysiwyg').livequery(function() { 
     $(this).wysiwyg(); 
    }); 

</script> 

UPDATE：有問題的代碼行是

$(dialogId).load('http://localhost:24533/Admin/BlogPostEdit?id=' + rowid, function() { 

後你做jQuery.load()的jqGrid的的程序重新加載結合呼叫trigger("reloadGrid")不工作了。在您執行jQuery.load()之後重新加載數據的唯一方法是工具欄中的重新加載按鈕。我仍然不知道如何解決它。

UPDATE2（解決方案）：問題是在HTML從jQuery.ajax（）返回的是與HTML頭和身體標籤完整的HTML頁面。服務器端開始返回後，只有jqGrid重載的形式開始工作。

Answer 1

我認爲存在的問題是因爲您使用了$(form).submit()。您可能想要做的是將數據從表單發送到服務器，並在服務器處理表單提交後刷新網格中的數據。

如果您的頁面主要來自表單，則會使用$(form).submit()。如果您提交的數據和頁面將被刷新。您可能真正想要做的事情可以通過參數$.ajax或type: 'POST'參數或簡化形式$.post來實現。您可以設置submit事件處理程序（或者如果您重命名按鈕的類型，則爲click處理程序），並且您可以手動將數據發送到服務器的每個$.ajax的處理程序內。在這種情況下，您可以使用success處理程序來重新加載網格。在submit事件處理程序的內部，您可以使用$(form).serialize()獲取表單數據，並且您應該返回false以防止標準提交表單。請參閱here一個示例。您應該不要忘記將name屬性定義到要發送到服務器的表單的所有字段（請參閱here）。

我不知道網格數據的格式與網格數據的確切關係，但是您可能使用的另一個選項是使用jqGrid的postData參數。有關更多詳情，請參閱here。