Question

首先，谢谢你的时间。

我正在尝试使用jqGrid来制作可编辑的网格。我想用户编辑行，jqGrid发送更改和WITHOUT等待来自服务器的响应，用户继续编辑行。如果服务器响应没问题，什么都不做，如果有错误，我会显示某种错误日志（但这不会让我担心）。

此代码有效：

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>

行是一个女巫正在显示叠加层，但是有人知道如何覆盖这个特定的行吗？ Witch是从显示到阻止改变风格的脚本代码？感谢大家！祝你有个美好的一天！乔恩

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();  
    }
}

我没有对这些建议进行测试，但我希望两者都有效。

jqGrid的。异步ajax调用

1 个答案: