AG Grid固定列宽度优化教程

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

本教程旨在解决AG Grid中固定列过多导致非固定列数据被遮挡的问题。由于AG Grid核心功能缺乏直接解决方案，本文将介绍一种通过DOM操作、自定义容器包裹、事件监听实现滚动同步以及CSS样式覆盖的非标准方法。该方案能为固定列设置最大宽度并使其可水平滚动，同时保持与非固定列的协调，但需注意其“hacky”性质和对分页功能的依赖。

问题描述

在使用AG Grid时，当用户固定（pinned）的列数量过多，特别是面对拥有30-40列甚至更多的大型数据集时，固定列可能会占据表格的全部或大部分宽度，导致非固定列的数据完全不可见或难以访问。AG Grid的内置功能目前没有提供直接的机制来限制固定列的总宽度并使其内部可水平滚动，从而允许用户在固定列内部滚动，同时也能看到非固定列的内容。这严重影响了用户在比较固定数据与非固定数据时的体验。

解决方案概述

鉴于AG Grid核心功能对此类场景的局限性，本文将提供一个非标准的、基于DOM操作和CSS覆盖的解决方案。此方案的核心思想是：

1. 启用分页： 某些AG Grid内部布局行为在启用分页后表现更稳定，此方案依赖于此。
2. 自定义容器包裹： 通过JavaScript动态地在AG Grid的固定列区域和非固定列区域外部包裹自定义div容器。
3. 滚动事件同步： 为这些自定义容器添加滚动事件监听器，确保固定列区域和非固定列区域的水平滚动能够同步。
4. CSS样式覆盖： 应用一系列CSS规则来控制这些自定义容器的宽度、高度和溢出行为，实现固定列区域的最大宽度限制和内部滚动。

重要提示： 这是一个侵入性较强的“hacky”解决方案，它直接修改了AG Grid的DOM结构和样式。因此，它可能与AG Grid未来的版本更新不兼容，或与某些核心功能（如列拖拽、调整大小等）产生冲突。在生产环境中使用前，务必进行充分的测试。

实施步骤

1. 启用AG Grid分页功能

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

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

2. 动态包裹AG Grid内部区域

此步骤涉及在AG Grid渲染完成后，通过JavaScript获取特定的DOM元素，并用自定义的div容器将其包裹起来。我们需要针对固定左侧列的头部、固定左侧列的数据区、非固定列的头部以及非固定列的数据区这四个关键区域进行操作。

代码示例：

// 在AgGridReact的onGridReady回调函数中执行此操作
onGridReady = (params) => {
    this.gridApi = params.api;
    this.gridColumnApi = params.columnApi;

    // 1. 包裹固定左侧列的头部区域
    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);
    }

    // 2. 包裹固定左侧列的数据区域
    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);
    }

    // 3. 包裹非固定列的数据区域
    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);
    }

    // 4. 包裹非固定列的头部区域
    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);
    }

    // ... 其他初始化逻辑
};

这段代码通过获取AG Grid内部的特定DOM元素（通过类名），然后创建新的div元素作为它们的父容器，从而将原始元素包裹起来。这样，我们就可以通过控制这些新容器的样式来实现自定义布局。

3. 同步水平滚动

由于我们将固定列和非固定列的头部和数据区域分别包裹在不同的容器中，这些容器会独立滚动。为了保持表格的视觉一致性，我们需要同步它们的水平滚动。具体来说，当数据区域水平滚动时，其对应的头部区域也应同步滚动。

代码示例：

// 在onGridReady函数中，在DOM包裹完成后添加事件监听器
document.getElementsByClassName('data-container')[0]?.addEventListener("scroll", this.runOnScroll1, { passive: true });
document.getElementsByClassName('unpinned-data-container')[0]?.addEventListener("scroll", this.runOnScroll2, { passive: true });

// 定义滚动处理函数
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样式覆盖

这是实现固定列最大宽度和滚动行为的关键步骤。我们需要为新创建的容器以及一些AG Grid的内部类应用自定义CSS样式。

CSS代码示例：

/* 隐藏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; /* 设置固定列的最大宽度，此处限制为总宽度的50% */
    width: 50% !important;     /* 确保宽度一致 */
    height: 100% !important;
    overflow-x: scroll !important; /* 允许水平滚动 */
    overflow-y: hidden !important; /* 隐藏垂直滚动条，由AG Grid控制 */
}

/* 非固定列数据容器样式 */
.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; /* 隐藏水平滚动条 */
}

样式说明：

• .ag-body-viewport：隐藏其默认的overflow，以便我们自定义容器控制滚动。
• .data-container：这是核心。通过max-width限制固定列区域的最大宽度（例如50%），并设置overflow-x: scroll使其内部可水平滚动。
• .unpinned-data-container：确保非固定列区域也能水平滚动，以显示所有非固定列。
• .header-container 和 .unpinned-header-container：与数据容器的宽度保持一致，并隐藏其水平滚动条，因为它们的滚动将通过JavaScript与数据容器同步。
• !important：由于是覆盖AG Grid的内置样式，使用!important确保我们的规则优先。

注意事项与潜在问题

• “Hacky”性质： 此方案通过直接操作DOM和覆盖样式实现，不属于AG Grid官方支持的扩展方式。AG Grid的未来更新可能导致此方案失效或引入新的视觉/功能问题。
• 兼容性： 方案可能不适用于所有AG Grid配置或所有浏览器版本。
• 性能： 频繁的DOM操作和事件监听可能对性能产生轻微影响，但在大多数现代应用中应可接受。
• 功能冲突： AG Grid的一些高级功能，如列拖拽、列调整大小、行分组、树形数据等，可能与此DOM结构修改方案发生冲突。
• 分页依赖： 确保pagination属性设置为true，否则可能导致布局错乱。

总结

尽管存在上述局限性，本文介绍的方法为AG Grid固定列过多导致非固定列被遮挡的问题提供了一个可行的解决方案。通过巧妙地利用DOM操作、事件同步和CSS覆盖，我们能够实现固定列的最大宽度限制和内部水平滚动，从而改善用户体验。然而，在实施此方案时，务必充分理解其非标准性质，并在投入生产环境前进行严格的测试和验证。在可能的情况下，优先考虑AG Grid官方提供的解决方案或等待未来版本的功能更新。

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