ag网格水平滚动

Posted 2023-03-13

【中文标题】ag网格水平滚动

【英文标题】：ag grid horizontal scroll

【发布时间】：2017-07-06 17:23:49

【问题描述】：

我在角度应用程序中使用了 ag-grid ng。当列数超过时无法获得水平滚动条。

【参考方案1】：

尝试在 ag-grid 中的每个 columnDefs 中输入 minWidth，这可以确保每个都有与之关联的宽度道具，因此如果溢出，下方会出现一个水平滚动条

columnDefs = [

minWidth : 100, field: 'a', headerName: 'test1',

minWidth: 120, field: 'b', headerName: 'test2',

minWidth: 80, field: 'c', headerName: 'test2'

]

【参考方案2】：

如果你使用你会发现什么：

gridOptions.api.sizeColumnsToFit();

是不是有些页面需要很长时间才能显示出来。 我发现api上有一个标志来显示宽度是否脏。因此我实现了一种检查方法：

  refreshTable() 
    if (this.gridColumnApi.columnController && this.gridColumnApi.columnController.bodyWidthDirty) 
      this.gridApi.sizeColumnsToFit();
      if (this.refreshAttempts) 
        this.refreshAttempts--;
        setTimeout(() => 
          this.refreshTable();
        , 100);
      
     else 
      this.refreshAttempts = 0;
    
  

我把它放在一个带有初始化器的服务类中，刷新尝试也传递给它。我建议绕两次，你可能还想玩超时延迟，因为你可能不希望这么大。

这似乎发生在一些更复杂的网格上的原因是，一次 shuffle 会产生一些工作，但宽度仍然很脏。下一个，也许下一个会有所帮助。

【参考方案3】：

你可以说，

gridOptions.api.sizeColumnsToFit();

这将设置列宽，从而消除水平滚动。

【参考方案4】：

确定您没有将 gridOptions 对象上的 suppressHorizo​​ntalScroll 属性设置为 true 吗？

var gridOptionsTop = 
    columnDefs: columnDefs,
    // don't show the horizontal scrollbar on the top grid
    suppressHorizontalScroll: false,
    enableSorting: true,
;

【参考方案5】：

你确定是因为列数？我遇到了同样的问题，解决方案是取消每列的固定选项。

例如，如果你有这个：

headerName: "Athlete", field: "athlete", width: 150, pinned: 'left'

必须是：

headerName: "Athlete", field: "athlete", width: 150

【讨论】：

嘿，谢谢。我还使用了固定选项。根据您的建议，我取消了固定选项并且它有效。非常感谢。

我想知道如何显示固定列的滚动条？因为如果滚动到最后一行，固定列和未固定列的行不会对齐。