jquery - jqGrid。异步ajax调用

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 回答的回复 **********

再次感谢奥列格! 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>

行是显示覆盖的唯一行，但有人知道如何覆盖这一特定行吗？巫婆是把风格从显示改为阻止的脚本代码吗？感谢大家!祝你有美好的一天!乔恩

Answer 1

您使用内联编辑。所以你有一个接近的问题，但另一个问题如你引用的答案中所述。因此，如果您使用 ajaxSubgridOptions: { async: false } 它也没有帮助。在jqGrid的源代码中你可以找到the line这会给你带来麻烦。所以你应该使用

ajaxRowOptions: { async: true }

参见the answer它描述了密切的问题。

此外，我建议您不要评估。您可以使用更安全的 jQuery.parseJSON 来代替 eval('(' + xhr.responseText + ')') :$.parseJSON(xhr.responseText)。

更新:jqGrid 使用 the line

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

显示加载覆盖。您可以在 serializeRowData 回调内部隐藏叠加层(应将其定义为 jqGrid 参数):

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

或者在ajaxRowOptions中使用beforeSend回调:

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

我没有测试这些建议，但我希望两者都能起作用。