与 ember.js 中的模态叠加一起使用时,ag-grid 调整列的大小需要很长时间才能响应
Posted
技术标签:
【中文标题】与 ember.js 中的模态叠加一起使用时,ag-grid 调整列的大小需要很长时间才能响应【英文标题】:ag-grid resizing columns taking too long to respond when used with an modal overlay in ember.js 【发布时间】:2020-05-04 01:35:01 【问题描述】:我们在使用带有模态覆盖的 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
这里是 ag-grid 的定义:-
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);
,
;
【问题讨论】:
您能否在 plunk 或 stackblitz 上重现您的问题,以便其他人可以轻松帮助您? 如何嵌入ag-grid
?
一次更新,此问题特定于 Google Chrome 和 Opera。我在 Firefox 上试过,一切正常。
【参考方案1】:
在没有看到工作 plunkr/codepen 的情况下,我认为您的问题的解决方案可能在于内置的 gridOptions API。最近我遇到了一个非常相似的问题(不是调整大小,而是在交互后重新渲染单个单元格)并使用 api.setRowData 和 setColumnDefs 解决了我的问题。下面的代码基于 angularJS 并进行了很多简化,以大致了解您可能会尝试什么。我希望这会有所帮助 - 它解决了我的类似问题。
首先启动gridOptions:
$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 是一个布尔值,它隐藏/显示作为 ag-grid 本身的 DOM 元素。因此,基本上在交互开始时,元素会短暂消失(并且会出现加载器),并且当交互完成时,会重新渲染表格(并且加载器会消失)。对于非常大的列表和频繁的交互,这种重新渲染显然不是最佳选择,尽管对于这些列表,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);
)
【讨论】:
以上是关于与 ember.js 中的模态叠加一起使用时,ag-grid 调整列的大小需要很长时间才能响应的主要内容,如果未能解决你的问题,请参考以下文章