131 lines
4.3 KiB
JavaScript
131 lines
4.3 KiB
JavaScript
document.addEventListener('DOMContentLoaded', function() {
|
||
// 等待页面完全加载和渲染
|
||
setTimeout(initializeFixedTables, 500);
|
||
});
|
||
|
||
// 初始化所有固定表格
|
||
function initializeFixedTables() {
|
||
// 查找所有需要固定效果的表格容器
|
||
const tableContainers = document.querySelectorAll('.scrollable-table-container');
|
||
|
||
if (tableContainers.length === 0) {
|
||
console.warn('未找到.scrollable-table-container元素');
|
||
return;
|
||
}
|
||
|
||
tableContainers.forEach((container, index) => {
|
||
// 检查是否已初始化
|
||
if (container.dataset.initialized === 'true') {
|
||
return;
|
||
}
|
||
|
||
// 获取表格
|
||
const table = container.querySelector('table');
|
||
if (!table) {
|
||
console.warn('容器中未找到表格元素', container);
|
||
return;
|
||
}
|
||
|
||
// 确保表格有正确的结构
|
||
ensureTableStructure(table);
|
||
|
||
// 应用固定效果
|
||
applyFixedEffects(container, table);
|
||
|
||
// 标记为已初始化
|
||
container.dataset.initialized = 'true';
|
||
console.log(`表格 ${index + 1} 初始化完成`);
|
||
});
|
||
}
|
||
|
||
// 确保表格有正确的结构
|
||
function ensureTableStructure(table) {
|
||
// 如果没有thead，尝试从第一行创建
|
||
if (!table.tHead || table.tHead.rows.length === 0) {
|
||
const firstRow = table.rows[0];
|
||
if (firstRow) {
|
||
const thead = document.createElement('thead');
|
||
thead.appendChild(firstRow.cloneNode(true));
|
||
table.insertBefore(thead, table.firstChild);
|
||
firstRow.remove();
|
||
}
|
||
}
|
||
|
||
// 如果没有tbody，创建它
|
||
if (!table.tBodies || table.tBodies.length === 0) {
|
||
const tbody = document.createElement('tbody');
|
||
while (table.rows.length > 1) { // 假设第一行是表头
|
||
tbody.appendChild(table.rows[1]);
|
||
}
|
||
table.appendChild(tbody);
|
||
}
|
||
}
|
||
|
||
// 应用固定效果
|
||
function applyFixedEffects(container, table) {
|
||
// 设置表格和列的宽度
|
||
setTableLayout(container, table);
|
||
|
||
// 添加滚动事件监听器，确保固定效果
|
||
container.addEventListener('scroll', function() {
|
||
// 这个事件监听器确保固定效果在滚动时保持
|
||
// 实际上，CSS的sticky定位应该已经处理了这一点
|
||
// 这里主要是为了确保在某些浏览器中触发重绘
|
||
const thElements = table.querySelectorAll('thead th');
|
||
thElements.forEach(th => {
|
||
th.style.transform = `translateY(${container.scrollTop}px)`;
|
||
});
|
||
});
|
||
|
||
// 监听窗口大小变化，重新调整布局
|
||
window.addEventListener('resize', function() {
|
||
setTimeout(() => setTableLayout(container, table), 100);
|
||
});
|
||
}
|
||
|
||
// 设置表格布局
|
||
function setTableLayout(container, table) {
|
||
// 设置表格宽度
|
||
table.style.width = '100%';
|
||
|
||
// 设置列宽
|
||
const headerCells = table.tHead.rows[0].cells;
|
||
const containerWidth = container.offsetWidth;
|
||
|
||
// 首列宽度
|
||
if (headerCells.length > 0) {
|
||
headerCells[0].style.minWidth = '270px';
|
||
headerCells[0].style.width = '270px';
|
||
}
|
||
|
||
// 其他列平均分配剩余宽度
|
||
const remainingWidth = containerWidth - 270;
|
||
const otherColumnsWidth = Math.max(80, remainingWidth / (headerCells.length - 1));
|
||
|
||
for (let i = 1; i < headerCells.length; i++) {
|
||
headerCells[i].style.minWidth = `${otherColumnsWidth}px`;
|
||
headerCells[i].style.width = `${otherColumnsWidth}px`;
|
||
}
|
||
|
||
// 确保表体和表头列宽一致
|
||
if (table.tBodies.length > 0 && table.tBodies[0].rows.length > 0) {
|
||
const bodyCells = table.tBodies[0].rows[0].cells;
|
||
for (let i = 0; i < bodyCells.length; i++) {
|
||
if (i < headerCells.length) {
|
||
bodyCells[i].style.width = headerCells[i].style.width;
|
||
bodyCells[i].style.minWidth = headerCells[i].style.minWidth;
|
||
}
|
||
}
|
||
}
|
||
}
|
||
|
||
// 如果页面是通过AJAX等方式动态加载的，可以使用这个函数重新初始化
|
||
function reinitializeFixedTables() {
|
||
document.querySelectorAll('.scrollable-table-container').forEach(container => {
|
||
container.dataset.initialized = 'false';
|
||
});
|
||
initializeFixedTables();
|
||
}
|
||
|
||
// 导出函数到全局作用域，以便在需要时手动调用
|
||
window.reinitializeFixedTables = reinitializeFixedTables; |