我有一个完美工作的主细节JQGrid。细节网格是根据主电网选定的行中的细胞值和对API的ajax调用(即datatype: 'json'
和url: 'http://myServiceurl/rowdata.id'
。
但是,对于某些主行,详细行的数据集,因此它花了一些时间来加载,细节网格显示"加载..."。这是完全可以的,直到用户单击主网格中的另一排,而细节网格仍在"加载..."。这是一个问题,因为我正在加载一些有关详细信息网格的caption
的其他信息,而详细信息网格上的数据仍在从上一个rowelect上加载,详细信息网格的字幕更改以反映当前的主电网所选的当前主电网的行,但实际表数据来自在主网格中选择的上一行。
主尾网格在主网格上的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: "+rowdata.dbname)
.trigger('reloadGrid');
},
我可以想象的一个解决方案是在主网格上使用beforeSelectRow
选项,并检查细节网格是否仍在加载-e
beforeSelectRow: function(){
//check if detail grid is fully loaded <--
//if fully loaded return true else return false
}
如何检查细节网格是否已满载?我尝试过$("#"+tabDiv2)[0].grid
,但它总是返回的,因为我认为在数据加载到其中之前,网格的总体元素会加载。我已经尝试使用$("#"+tabDiv2).getGridParam("records")
检查数量的记录,但这可能并不总是可行的,因为细节网格对所选的主电网行没有任何行是一个有效的方案,并且会在主电网上永久禁用Rowselect。我还有什么选择?
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;
}
使用下面的代码解决了它。但是,基于我关于如何使用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: "+rowdata.dbname)
.trigger('reloadGrid');
}