Question

我有一个主要的细节jqGrid，它工作得很好。正在根据主网格选定行的单元格值和对API的{a}调用datatype: 'json'和url: 'http://myServiceurl/rowdata.id'来填充详细信息网格。

但是，对于某些Master行，为详细行设置数据集，因此需要花费一些时间来加载，详细网格显示“正在加载...”。这是完全正常的，直到用户单击主网格中的不同行，而细节网格仍然是“正在加载...”。这是一个问题，因为我在详细网格的caption上加载了一些额外的信息，而细节网格上的数据仍然从前一行加载选择细节网格的标题更改以反映当前主网格的行选择但实际表数据来自主网格中选择的上一行。

主 - 细节网格在主网格上编码为jqgrid选项 -

onSelectRow: function(ids) {      //load the detail table tabDiv2
                $("#"+divToHide).show();    //show the hidden div for detail grid
                var rowdata = jQuery("#"+tabDiv).getRowData(ids);
                    jQuery("#"+tabDiv2).jqGrid('setGridParam',{url:useruri+"/"+rowdata.dbsid,
                                                           datatype: 'json'})
                    jQuery("#"+tabDiv2).jqGrid('setCaption',"Database Name:&nbsp;"+rowdata.dbname)
                    .trigger('reloadGrid');
                },

我能想象的一个解决方案是在主网格上使用beforeSelectRow选项并检查细节网格是否仍在加载 -

beforeSelectRow: function(){
       //check if detail grid is fully loaded <--
       //if fully loaded return true else return false
}

如何检查详细网格是否已满载？我已经尝试$("#"+tabDiv2)[0].grid但它总是返回true，因为我认为网格的整体DOM元素在数据加载到其中之前被加载。我已经尝试使用$("#"+tabDiv2).getGridParam("records")检查记录数量，但这可能并不总是有效，因为没有任何选定主网格行的详细网格是有效方案，并将永久禁用主网格上的rowSelect。还有什么我的选择？

Answer 1

在Ajax请求加载网格期间，

jqGrid将$("#"+tabDiv2)[0].grid.hDiv.loading设置为true。然后你可以在第一个网格中使用以下回调

beforeSelectRow: function () {
    var detailGrid = $("#"+tabDiv2)[0];
    return detailGrid != null && detailGrid.grid != null && detailGrid.grid.hDiv.loading ?
        false : true;
}

Answer 2

使用以下代码解决它。但是，基于我关于如何使用beforeSelectRow进行操作的问题，我更喜欢@ Oleg的答案。但为了以防万一，下面是另一种方式。

在详情网格的主网格setgridparam和beforeRequest上设置loadcomplete。

onSelectRow: function(ids) {      //load the detail table tabDiv2
                $("#"+divToHide).show();    //show the hidden div for detail grid
                var rowdata = jQuery("#"+tabDiv).getRowData(ids);
                    jQuery("#"+tabDiv2).jqGrid('setGridParam',{url:useruri+"/"+rowdata.dbsid,
                                                           datatype: 'json',
                                                           beforeRequest: function(){
                                                             jQuery("#"+tabDiv).jqGrid('setGridParam',{
                                                                          beforeSelectRow: function(){
                                                                            return false;
                                                                          }
                                                             })
                                                           },
                                                         loadComplete:function(){
                                                           jQuery("#"+tabDiv).jqGrid('setGridParam',{
                                                                        beforeSelectRow: function(){
                                                                          return true;
                                                                        }
                                                           })
                                                         }
                                                       })
                    jQuery("#"+tabDiv2).jqGrid('setCaption',"Database Name:&nbsp;"+rowdata.dbname)
                    .trigger('reloadGrid');
                }

如何在jqGrid中加载细节网格时禁用主网格rowSelect？

2 个答案: