AG-Grid 调整列的大小在与 Ember.js 中的模态叠加一起使用时需要很长时间才能响应

Question

我们在使用带有模态叠加的 ag-grid 时遇到了一个问题。我们有一个功能，我们必须显示一个模态框，以便在单击一行时显示扩展项目。现在，一旦这个模态框被关闭，然后用户尝试调整 ag-grid 列的大小，大约需要 10-15 秒才能完成初始实时调整大小。 此外，此模态框中的数据是动态填充的，这是相同的代码：-

for (const data of pop_data) {
if (count == pop_data.length-1) {
bn += data;
}
else {
bn += data+' </br>';
}
count++
}
jQuery(".ember-modal-dialog").addClass("data-show-more")
jQuery(".ember-modal-dialog").html(bn)

为了显示/隐藏此模态，我们使用 ember.js 控制器变量：

{{#if isShowingModal}}
{{#modal-dialog
onClose=(action "toggleModal")
targetAttachment="center"
translucentOverlay=true
}}
{{modalMessage}}
{{/modal-dialog}}
{{/if}}

以下是农业网格的定义：-

let columnDefs = [
{
headerName: "A", field: "email",
width: 300
},
{
headerName: "B", field: "enabled",
width: 93
},
{
headerName: "C", field: "f_l",
width: 200
},
{ headerName: "D", field: "mp", hide: !assign_features.includes("mp"), width:105 },
{ headerName: "OH", field: "oh", hide: !assign_features.includes("oh"), width:130},
{ headerName: "R", field: "vsr", hide: !assign_features.includes("vsr") },
{ headerName: "EC", field: "ir", hide: !assign_features.includes("ir") },
{ headerName: "UR", field: "ir", hide: !assign_features.includes("vsr") },
{ headerName: "MU", field: "mu", hide: !assign_features.includes("mu") },
{ headerName: "MC", field: "mc", hide: !assign_features.includes("mc")},
{
headerName: "CP",
field: 'buyers',
cellRenderer: 'modalbuyerRenderer',
cellClass: 'cell-wrap-text',
autoHeight: 'true',
width: 400,
}
];
let gridOptions = {
columnDefs: columnDefs,
components: {
'modalbuyerRenderer': mbr
},
defaultColDef: {
sortable: true,
resizable: true,
width: 130,
sortingOrder: ['asc','desc'],
},
onRowClicked: function(event) {
onRowClickedEvent(event);
}
},
};

Answer 1

如果没有看到有效的 plunkr/codepen，我认为您的问题的解决方案可能在于内置的 gridOptions API。最近我刚刚遇到了一个非常相似的问题(不是调整大小，而是交互后重新渲染单个单元格(，使用 api.setRowData 和 setColumnDefs 解决了我的问题。下面的代码基于 angularJS，并简化了很多内容，以大致了解您可以尝试的内容。我希望这有所帮助 - 它解决了我的类似问题。

首先启动网格选项：

$scope.gridOptions = {
// we are using angular in the templates
defaultColDef: {
filter: true,
sortable: true,
resizable: true,
},
...,
onCellClicked: function(event, $event) {
//
}
onGridReady: () => {
//setup first yourColumnDefs and yourGridData
//now use the api to set the columnDefs and rowData
$scope.gridOptions.api.setColumnDefs(yourColumnDefs);
$scope.gridOptions.api.setRowData(yourGridData);
},
onFirstDataRendered: function() {
//
}
};

然后发生交互(假设删除其中一行(。一个重要的注意事项是，$scope.gridLoaded是一个布尔值，它隐藏/显示DOM元素，即ag-grid本身。所以基本上在交互开始时，元素会短暂消失(并且出现一个加载器(，当交互完成后，表被重新渲染(加载器消失(。对于非常大的列表和频繁的交互，这种重新呈现显然不是最佳选择，尽管对于这些列表，ag-grid(没有分页(本身可能无法产生最佳性能。

$scope.delete = (params) => {
// safeApply() is a function which forces update immediately outside of the digest cycle
// gridLoaded is set false here
$rootScope.safeApply( () => { $scope.gridLoaded = false; });
let updatePromise = ...
$.when(updatePromise).then( () => {
$rootScope.safeApply(() => {
$scope.gridLoaded = true;
$scope.gridOptions.api.setRowData(yourGridData_updated);
// given that your problem is with resizing it might worth considering re-running the $scope.gridOptions.api.setColumnDefs(yourColumnDefs) function as well
})
}, (err) => {
console.warn(err);
})
}