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

Question

我有一个运行良好的 Master detail jqGrid。详细信息网格正在根据主网格选定行的单元格值和对 API 的 ajax 调用进行填充，即 datatype: 'json' 和 url: 'http://myServiceurl/rowdata.id'.

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

master-detail 网格在主网格上编码如下 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 但它总是 returns 正确，因为我认为网格的整体 DOM 元素在数据加载到其中之前被加载。我已经尝试使用 $("#"+tabDiv2).getGridParam("records") 检查记录数，但这可能并不总是有效，因为详细信息网格没有任何行用于选定的主网格行是一个有效的场景，并且将永久禁用主网格上的 rowSelect。我还有什么选择？

Answer 1

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

通过在主网格 beforeRequest 和详细网格 loadcomplete 上设置 setgridparam。

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

Answer 2

jqGrid 在 Ajax 期间将 $("#"+tabDiv2)[0].grid.hDiv.loading 设置为 true 加载网格的请求处于待处理状态。然后你可以在第一个网格中使用下面的回调

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

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

How to disable master grid rowSelect while detail grid is loading in jqGrid?

javascript

jquery

jqgrid