AGGrid固定列宽与滚动设置教程

哈喽！今天心血来潮给大家带来了《AG Grid固定列宽与横向滚动设置教程》，想必大家应该对文章都不陌生吧，那么阅读本文就都不会很困难，以下内容主要涉及到，若是你正在学习文章，千万别错过这篇文章~希望能帮助到你！

本教程旨在解决AG Grid中固定（pinned）列过多导致非固定列被遮挡的问题。通过一种“非官方”的DOM操作、事件监听及CSS覆盖方案，实现固定列区域的宽度限制和横向滚动，确保用户始终能访问所有数据。该方案适用于特定场景，尤其与AG Grid分页功能结合使用效果更佳，但需注意其潜在的兼容性风险。

引言：AG Grid固定列的挑战

AG Grid作为一款功能强大的数据表格组件，其列固定（pinned columns）功能在数据比较和导航时提供了极大的便利。然而，当需要固定的列数量较多时，一个常见的问题便会浮现：固定列会占据表格的全部可用宽度，导致非固定列区域完全不可见。AG Grid核心功能目前并未提供直接的解决方案来限制固定列的宽度并使其自身可横向滚动，从而在保持固定列可见性的同时，也允许用户访问被遮挡的非固定数据。

本文将介绍一种“非官方”的解决方案，通过直接操作DOM结构、监听滚动事件并应用自定义CSS样式，实现AG Grid固定列的宽度限制和内部横向滚动。

解决方案概述与前提条件

该方案的核心思想是为AG Grid的固定列区域和非固定列区域分别创建独立的容器，然后通过CSS控制这些容器的尺寸和滚动行为，并通过JavaScript同步滚动事件。

重要提示：

1. “非官方”方案： 此方法涉及直接操作AG Grid生成的DOM结构，可能与AG Grid未来的版本更新产生兼容性问题，甚至可能破坏其某些核心功能。请在生产环境谨慎使用，并进行充分测试。
2. 分页功能： 该方案在AG Grid启用分页（pagination={true}）时表现最佳，建议同时开启paginationAutoPageSize={true}。

实现步骤

1. 启用AG Grid分页功能

首先，确保你的AG Grid实例配置了分页功能。这有助于在DOM结构上提供更稳定的基础，以进行后续的DOM操作。

<AgGridReact
  // ...其他配置
  pagination={true}
  paginationAutoPageSize={true}
  // ...
/>

2. DOM结构重构：包裹AG Grid内部区域

此步骤是解决方案的关键，我们需要在AG Grid渲染完成后，通过JavaScript动态地为固定列的头部、数据区以及非固定列的头部、数据区创建新的父容器。这使得我们能够独立地控制这些区域的布局和滚动。

在onGridReady回调函数中执行以下DOM操作：

onGridReady = (params) => {
  this.gridApi = params.api;
  this.gridColumnApi = params.columnApi;

  // 包裹固定左侧的头部区域
  var headerParent = document.getElementsByClassName('ag-header')[0];
  var headerChild = document.getElementsByClassName('ag-pinned-left-header')[0];
  var newHeaderContainer = document.createElement('div');
  newHeaderContainer.id = 'header-container';
  newHeaderContainer.className = 'header-container';
  if (headerParent && headerChild) {
    headerParent.replaceChild(newHeaderContainer, headerChild);
    newHeaderContainer.appendChild(headerChild);
  }

  // 包裹固定左侧的数据区域
  var dataParent = document.getElementsByClassName('ag-body-viewport')[0];
  var dataChild = document.getElementsByClassName('ag-pinned-left-cols-container')[0];
  var newDataContainer = document.createElement('div');
  newDataContainer.id = 'data-container';
  newDataContainer.className = 'data-container';
  if (dataParent && dataChild) {
    dataParent.replaceChild(newDataContainer, dataChild);
    newDataContainer.appendChild(dataChild);
  }

  // 包裹非固定数据区域
  var unpinnedDataParent = document.getElementsByClassName('ag-center-cols-viewport')[0];
  var unpinnedDataChild = document.getElementsByClassName('ag-center-cols-container')[0];
  var newUnpinnedDataContainer = document.createElement('div');
  newUnpinnedDataContainer.id = 'unpinned-data-container';
  newUnpinnedDataContainer.className = 'unpinned-data-container';
  if (unpinnedDataParent && unpinnedDataChild) {
    unpinnedDataParent.replaceChild(newUnpinnedDataContainer, unpinnedDataChild);
    newUnpinnedDataContainer.appendChild(unpinnedDataChild);
  }

  // 包裹非固定头部区域
  var unpinnedHeaderParent = document.getElementsByClassName('ag-header-viewport')[0];
  var unpinnedHeaderChild = document.getElementsByClassName('ag-header-container')[0];
  var newUnpinnedHeaderContainer = document.createElement('div');
  newUnpinnedHeaderContainer.id = 'unpinned-header-container';
  newUnpinnedHeaderContainer.className = 'unpinned-header-container';
  if (unpinnedHeaderParent && unpinnedHeaderChild) {
    unpinnedHeaderParent.replaceChild(newUnpinnedHeaderContainer, unpinnedHeaderChild);
    newUnpinnedHeaderContainer.appendChild(unpinnedHeaderChild);
  }

  // 连接滚动事件监听器
  const dataContainer = document.getElementsByClassName('data-container')[0];
  const unpinnedDataContainer = document.getElementsByClassName('unpinned-data-container')[0];

  if (dataContainer) {
    dataContainer.addEventListener("scroll", this.runOnScroll1, { passive: true });
  }
  if (unpinnedDataContainer) {
    unpinnedDataContainer.addEventListener("scroll", this.runOnScroll2, { passive: true });
  }
};

代码解释：

• 我们通过document.getElementsByClassName获取AG Grid的特定内部元素（例如ag-pinned-left-header、ag-pinned-left-cols-container等）。
• 为每个目标元素创建一个新的div容器（例如header-container、data-container）。
• 使用replaceChild将原始元素替换为新的容器，然后将原始元素作为新容器的子元素。
• 添加了if条件判断，确保在元素存在时才进行DOM操作，增加代码健壮性。

3. 同步滚动事件

由于我们已经将固定列的头部和数据区、非固定列的头部和数据区分别包裹在独立的容器中，它们将不再自动同步横向滚动。因此，我们需要手动添加事件监听器来同步它们的滚动位置。

runOnScroll1 = (evt) => {
  const headerContainer = document.getElementsByClassName('header-container')[0];
  if (headerContainer) {
    headerContainer.scrollTo(evt.srcElement.scrollLeft, 0);
  }
};

runOnScroll2 = (evt) => {
  const unpinnedHeaderContainer = document.getElementsByClassName('unpinned-header-container')[0];
  if (unpinnedHeaderContainer) {
    unpinnedHeaderContainer.scrollTo(evt.srcElement.scrollLeft, 0);
  }
};

代码解释：

• runOnScroll1监听固定数据区的横向滚动，并将其滚动位置同步到固定头部区域。
• runOnScroll2监听非固定数据区的横向滚动，并将其滚动位置同步到非固定头部区域。
• 使用passive: true可以优化滚动性能。

4. 应用自定义CSS样式

最后一步是应用一系列CSS样式来控制新创建容器的宽度、高度和滚动行为，同时覆盖一些AG Grid的默认样式。

/* 隐藏AG Grid原有的滚动条，由我们新容器控制 */
.ag-body-viewport {
    overflow: hidden !important;
}
/* 调整AG Grid头部高度 */
.ag-header {
    height: 55px !important; /* 根据实际需求调整 */
}

/* 固定数据容器样式 */
.data-container {
    min-width: 50% !important; /* 固定列区域最小宽度 */
    max-width: 50% !important; /* 固定列区域最大宽度 */
    width: 50% !important;     /* 固定列区域宽度 */
    height: 100% !important;
    overflow-x: scroll !important; /* 允许固定列区域横向滚动 */
    overflow-y: hidden !important; /* 隐藏纵向滚动条 */
}

/* 非固定数据容器样式 */
.unpinned-data-container {
    height: 100% !important;
    overflow-y: hidden !important; /* 隐藏纵向滚动条 */
    overflow-x: scroll !important; /* 允许非固定列区域横向滚动 */
}

/* 隐藏AG Grid左侧的水平间隔，避免视觉冲突 */
.ag-horizontal-left-spacer {
    visibility: hidden;
}

/* 固定头部容器样式 */
.header-container {
    height: 120px !important; /* 根据实际需求调整 */
    width: 50% !important;
    max-width: 50% !important;
    min-width: 50% !important;
    overflow-x: hidden !important; /* 头部区域横向滚动由数据区同步，自身隐藏 */
    overflow-y: hidden !important;
}

/* 非固定头部容器样式 */
.unpinned-header-container {
    height: 120px !important; /* 根据实际需求调整 */
    overflow-y: hidden !important;
    overflow-x: hidden !important; /* 头部区域横向滚动由数据区同步，自身隐藏 */
}

CSS解释：

• .ag-body-viewport的overflow: hidden !important用于禁用AG Grid默认的滚动行为，将控制权交给我们的自定义容器。
• .data-container和.header-container通过min-width, max-width, width属性限制了固定列区域的宽度（例如，50%）。overflow-x: scroll !important是实现固定列横向滚动的关键。
• .unpinned-data-container和.unpinned-header-container则控制非固定列区域的滚动行为。
• !important用于强制覆盖AG Grid的内联或默认样式。
• height属性需要根据实际的表头高度进行调整。

注意事项与总结

• 宽度配置： 示例中固定列的宽度被设置为50%。在实际应用中，你可能需要根据屏幕尺寸、固定列数量和用户体验需求动态计算或调整这个宽度。
• 性能考量： 频繁的DOM操作和事件监听可能会对性能产生轻微影响，但在大多数现代浏览器和应用场景下通常可以接受。
• AG Grid版本兼容性： 由于此方案直接依赖AG Grid的DOM结构，未来的AG Grid版本更新可能会改变内部类名或结构，导致此方案失效。因此，在升级AG Grid版本时务必进行充分测试。
• 替代方案： 在可能的情况下，优先考虑AG Grid官方提供的解决方案。如果官方方案无法满足需求，此“非官方”方法可以作为一种应急或特定场景的解决方案。

通过上述步骤，你可以在AG Grid中实现固定列的宽度限制和横向滚动功能，有效解决固定列过多导致非固定数据被遮挡的问题。尽管此方案具有一定的“黑科技”性质和潜在风险，但在特定需求下，它能提供有效的用户体验改进。

理论要掌握，实操不能落！以上关于《AGGrid固定列宽与滚动设置教程》的详细介绍，大家都掌握了吧！如果想要继续提升自己的能力，那么就来关注golang学习网公众号吧！