如何在 jqGrid 中加载详细信息网格时禁用主网格行选择？答案

【问题标题】：How to disable master grid rowSelect while detail grid is loading in jqGrid?如何在 jqGrid 中加载详细信息网格时禁用主网格行选择？
【发布时间】：2017-04-21 06:36:37
【问题描述】：

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

但是，对于某些主行，为详细行设置了数据，因此加载需要一些时间，并且详细信息网格显示“正在加载...”。这很好，直到用户单击主网格中的不同行，而细节网格仍处于“正在加载...”。这是一个问题，因为我正在详细信息网格的 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。我还有什么选择？

【问题讨论】：

标签： javascript jquery jqgrid

【解决方案1】：

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

【讨论】：

这是用更少的代码实现它的好方法。再次感谢@Oleg！
出现了一个新问题。我现在使用loadError: function (jqXHR){ $('#alertDiv'.show(); } 来显示警报（基本上是引导警报类型的<div>），如果详细网格中没有数据或错误。当我这样做时，您上面的代码将停止工作。不完全确定为什么，但我在下面发布的答案仍然适用于稍作修改。
@Annjawn：您使用哪个版本的 jqGrid 以及来自哪个 jqGrid 分支（free jqGrid、商业Guriddo jqGrid JS 或版本 loadError 的默认实现，它在网格体的“错误 div”中显示错误。无论如何，grid.hDiv.loading 应该在调用loadError 后自动（由 jqGrid）设置为 false。
谢谢@Oleg，我会找出版本（有很多我使用的插件不记得所有版本）。我会考虑你的建议，因为我喜欢这种方法。干净多了。

【解决方案2】：

使用下面的代码解决了它。但是，基于我关于如何使用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');
                }

【讨论】：