jqGrid。異步阿賈克斯呼籲

Question

首先，感謝您的時間。

我想使用jqGrid做一個可編輯的網格。我想要用戶編輯行，jqGrid發送更改並且不等待服務器的響應，用戶繼續編輯行。如果服務器響應正常，則什麼都不做，如果出現錯誤，我會顯示某種錯誤日誌（但這不會讓我擔心）。

此代碼：

var ultimaFila = 0; // globally available    

var saveActRow = function(){ 
    jQuery('#gridLineas').jqGrid('saveRow', ultimaFila, 
     function(xhr) {       
      var response = eval('(' + xhr.responseText + ')'); 
      if(response.respuesta == "ok"){ 
       return true; 
      } else{ 
       return false; 
      } 
     } 
     , 'ActualizarLineaAlbaran.action' 
    ); 
};   

var addActRow = function(e) {         
    var lastRowInd = jQuery("#gridLineas").jqGrid("getGridParam","reccount"); 
    if (ultimaFila == lastRowInd){ // ¿es última línea? 
     jQuery("#gridLineas").jqGrid('addRow',{ 
      rowID : parseInt(ultimaFila) + 1, 
      initdata : {'numLinea':parseInt(ultimaFila) + 1}, 
      position :"last", 
      useDefValues : false, 
      useFormatter : false, 
      addRowParams : {extraparam:{}} 
     }); 
    } 
};   


jQuery(document).ready(function(){ 
     $("#gridLineas").jqGrid({ 
      jsonReader : {root:"albaLineas", cell: "", repeatitems: false}, 
      url:'albaLineas.action', 
      //ajaxGridOptions: { async: false }, 
      loadui: 'disable', 
      datatype: 'json', 
      mtype: 'POST',      
      colNames:['codIndiceAlb', 'numLinea', 'Código', 'CSP', 'cantidad'], 
      colModel :[ 
       {name:'codIndiceAlb', index:'codIndiceAlb', hidden: true, width:50, editable: false, sortable:false, align: "center"}, 
       {name:'numLinea', index:'numLinea', hidden: false, width:50, editable: false, sortable:false, align: "right"}, 
       {name:'codigoArticulo', index:'codigoArticulo', width:50, editable: true, sortable:false, align: "right"}, 
       {name:'articuloCSP', index:'articuloCSP', width:50, editable: true, sortable:false, align: "right"}, 
       {name:'cantidad', index:'cantidad', width:60, editable: true, sortable:false, align: "right", 
        editoptions: { dataEvents: [            
         { type: 'keydown', fn: function(e) {                 
          var key = e.charCode || e.keyCode; 
          if (key == 13){ 
           saveActRow(); 
           addActRow(); 
          }}}]} 
       },    
      ], 
      rowNum:100, 
      sortname: 'numLinea', 
      sortorder: 'desc', 
      gridview: true, 
      caption: 'líneas', 
      height: 350,     
      loadtext :'cargando líneas...', 
      editurl: 'ActualizarLineaAlbaran.action', 
      onSelectRow: function(id) { 
       if (id && id !== ultimaFila) { 
        jQuery('#gridLineas').jqGrid('restoreRow',ultimaFila); 
        ultimaFila = id; 
        /*jQuery("#grid_id").jqGrid('editRow',rowid, keys, oneditfunc, 
          succesfunc, url, extraparam, aftersavefunc,errorfunc, afterrestorefunc);*/ 
        jQuery('#gridLineas').jqGrid('editRow', id, false, null, 
         function(xhr) { 
          /* SUCCESFUNC*/ 
          var response = eval('(' + xhr.responseText + ')'); 
          if(response.respuesta == "ok"){ 
           return true; 
          } else{ 
           return false; 
          } 
         } 
         , 'ActualizarLineaAlbaran.action' 
        );        
       } 

      }      
    }); 

，但用戶無法繼續編輯，直到服務器響應。我認爲Ajax技術對此非常有用，但我是Ajax和jGrid中的絕對新手。

我試過Synchronous Calls with jqGrid?答案，但對我沒有結果。

那麼，反正有沒有「等」服務器應答呢？ 任何幫助表示讚賞。

謝謝 喬恩

*************編輯 - 響應OLEG ANSWER ***********

再次感謝奧列格！ ajaxRowOptions: { async: true }工程完美，但（總是有一個但; ;-)）用戶仍然看到灰色的網格。我懷疑有一些做

ui.jqgrid.css line .ui-jqgrid .jqgrid-overlay 

，因爲如果我刪除這條線覆蓋已經出來了，但我有意想不到的效果（網格是百達灰色）。使用Firebug我看到

<div id="lui_gridLineas" class="ui-widget-overlay jqgrid-overlay" style="display: none;"></div> 

行是一個女巫顯示疊加，但有人知道如何改寫這一行？女巫是改變風格從顯示到塊的腳本代碼？ 謝謝大家！祝你有美好的一天！ Jon

Answer 1

您使用內聯編輯。所以你有密切關係，但是你引用的答案中描述了另一個問題。所以，如果你會使用ajaxSubgridOptions: { async: false }它沒有幫助。在jqGrid的源代碼中，您可以找到the line，這會對您造成問題。所以你應該使用

ajaxRowOptions: { async: true } 

請參閱the answer它描述了密切的問題。

此外，我會建議你不要eval。而不是eval('(' + xhr.responseText + ')')你可以使用更安全的jQuery.parseJSON：$.parseJSON(xhr.responseText)。

修訂：使用的jqGrid the line

$("#lui_"+$t.p.id).show(); 

顯示裝載覆蓋。您可以隱藏serializeRowData回調內部的覆蓋或者（它應該被定義爲jqGrid的參數）：

serializeRowData: function (postdata) { 
    $("#lui_" + this.p.id).hide(); 
    return postdata; 
} 

或使用beforeSend回調在ajaxRowOptions：

ajaxRowOptions: { 
    async: true, 
    beforeSend: function() { 
     // the gridLineas below should be the id of the grid 
     $("#lui_gridLineas").hide(); 
    } 
} 

我沒有測試過建議，但我希望這兩者都應該工作。