AG Grid 固定列宽度与滚动优化：实现可控的左侧固定区域-js教程-PHP中文网

AG Grid 固定列宽度与滚动优化：实现可控的左侧固定区域

本文针对AG Grid中固定列过多导致非固定列被遮挡的问题，提出了一种非标准但有效的解决方案。通过对AG Grid的DOM结构进行定制化包装、引入独立的滚动机制并结合CSS样式覆盖，实现了左侧固定列区域的最大宽度限制和横向滚动功能，同时保持了与非固定列的同步滚动，解决了用户在拥有大量列时的数据比较难题。

1. 问题描述

ag grid是一个功能强大的数据网格组件，其固定列（pinned columns）功能允许用户将重要列锁定在网格的左侧或右侧，以便在横向滚动时始终可见。然而，当用户固定过多列时，这些固定列可能会占据网格的全部宽度，导致非固定列完全被遮挡，用户无法查看或滚动到这些数据。ag grid的核心功能目前并未提供直接的解决方案来限制固定列的总宽度并使其内部可滚动，这在处理包含30-40列甚至更多列的复杂数据集时尤为突出，用户难以进行有效的数据对比。

2. 解决方案概述

由于AG Grid核心功能缺乏对固定列宽度限制和内部滚动的支持，本教程将介绍一种通过直接操作DOM结构、引入自定义容器、实现滚动同步以及覆盖CSS样式来实现这一目标的“非标准”解决方案。此方案能够让左侧固定列区域拥有最大宽度并支持横向滚动，从而避免遮挡非固定列，同时保持固定列头部与数据部分的同步滚动。需要注意的是，此方法由于直接操作AG Grid的内部DOM，可能在未来AG Grid版本更新时失效，且在某些情况下可能影响AG Grid的其他核心功能。此方案建议在开启分页（pagination）功能的AG Grid中使用。

3. 实现步骤

3.1 启用分页功能

为了确保此解决方案的兼容性和稳定性，建议在AG Grid配置中启用分页功能。

<AgGridReact
  // ... 其他配置
  pagination={true}
  paginationAutoPageSize={true} // 可选，根据页面大小自动调整每页行数
  // ...
/>

登录后复制

3.2 包装 AG Grid 内部 DOM 元素

此步骤是解决方案的核心，通过JavaScript在AG Grid渲染完成后（例如在 onGridReady 回调中）动态地将AG Grid的特定内部元素（固定列头部、固定列数据、非固定列头部、非固定列数据）包裹在自定义的 div 容器中。这样做是为了获取对这些区域的独立控制权，以便后续应用自定义样式和滚动行为。

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);
  }

  // ... 其他 onGridReady 逻辑
};

登录后复制

3.3 实现滚动同步

由于固定列的头部和数据区域现在被包裹在不同的容器中，它们不再由AG Grid统一管理滚动。为了确保用户在滚动固定列数据时，其对应的头部也同步滚动，我们需要为这些自定义容器添加事件监听器，并在滚动时手动同步它们的 scrollLeft 属性。

// 在 onGridReady 之后或组件挂载后添加事件监听器
componentDidMount() {
  // 确保 DOM 元素已存在
  setTimeout(() => { // 延迟执行以确保 DOM 操作已完成
    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 });
    }
  }, 0);
}

// 销毁组件时移除事件监听器，避免内存泄漏
componentWillUnmount() {
  const dataContainer = document.getElementsByClassName('data-container')[0];
  const unpinnedDataContainer = document.getElementsByClassName('unpinned-data-container')[0];

  if (dataContainer) {
    dataContainer.removeEventListener("scroll", this.runOnScroll1);
  }
  if (unpinnedDataContainer) {
    unpinnedDataContainer.removeEventListener("scroll", this.runOnScroll2);
  }
}

// 固定列数据区域滚动时，同步固定列头部滚动
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);
  }
};

登录后复制

3.4 应用 CSS 样式覆盖

最后，通过CSS样式来控制新创建的容器和AG Grid原有元素的布局、宽度、高度和滚动行为。!important 关键字在此处是必需的，以确保覆盖AG Grid的默认样式。

稿定AI社区

在线AI创意灵感社区

查看详情

/* 隐藏 AG Grid 默认的 body 区域滚动条，因为我们已经有了自定义容器的滚动 */
.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 注意事项：

max-width 和 width 属性用于限制左侧固定列区域的最大宽度，示例中设置为 50%，可根据实际需求调整为像素值或百分比。
overflow-x: scroll 确保了自定义容器内部可以横向滚动。
overflow-y: hidden 隐藏了不必要的纵向滚动条，因为AG Grid通常会管理整体的纵向滚动。
!important 关键字是强制覆盖AG Grid默认样式的关键，但过度使用可能导致样式管理复杂化。

4. 总结与注意事项

通过上述DOM操作、事件监听和CSS样式覆盖的组合，我们成功为AG Grid的固定列区域实现了最大宽度限制和内部横向滚动功能，有效解决了固定列过多导致非固定列被遮挡的问题。

重要注意事项：

侵入性与稳定性： 此方案直接操作AG Grid的内部DOM结构，属于非标准做法。AG Grid的未来版本可能会更改其内部DOM结构，从而导致此解决方案失效或引发新的问题。
兼容性： 建议此方案在AG Grid启用分页功能时使用，未经分页模式下的充分测试。
调试复杂性： 由于涉及DOM操作和样式覆盖，调试可能会更加复杂。
!important 的使用： 广泛使用 !important 可能会使CSS的优先级管理变得困难，建议在必要时才使用。
性能考量： 频繁的DOM操作和事件监听可能会对性能产生轻微影响，但在大多数场景下应可接受。

在采用此方案之前，请务必充分理解其潜在风险，并在开发和测试环境中进行全面验证。如果AG Grid官方未来提供更优雅的解决方案，应优先考虑使用官方方法。

以上就是AG Grid 固定列宽度与滚动优化：实现可控的左侧固定区域的详细内容，更多请关注php中文网其它相关文章！