AG Grid 固定列最大宽度与滚动优化教程

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

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

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

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

/* 隐藏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; /* 隐藏水平滚动条 */
}