与 ember.js 中的模态叠加一起使用时，ag-grid 调整列的大小需要很长时间才能响应

Posted 2023-03-28

【中文标题】与 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);
    )