在列表中，如果列表字段很多，并且每页数量很多，往下拉的时候就不好辨别数据是哪个字段的，对用户造成不好的浏览体验
类似excel冻结首行
通过以下方法，可以实现将列表的第一行，也就是头部，固定在第一行显示，这样就能轻松辨别每个数据对应是哪个字段的，增加用户的使用体验。
网上找了几个测试发现 不兼容固定左侧列和固定右侧列
这次的代码 同时兼容支持固定左侧列和右侧列
步骤一
打开项目的 public/assets/js/require-table.js 文件，在如下位置添加一个方法：
// 固定列表头部(固定列表第一行)
fixedheader: function ($table) {
var $sourceTableHead = $table.find('thead tr');
var $tableContainer = $table.parents('.fixed-table-container');
// 固定表头 html
var fixed_html = `
<div class="fixed-table-header-mg" style="display:none;">
<table class="fixed_table_header" border="0" cellpadding="4" cellspacing="0" class="table table-hover">
<thead></thead>
</table>
</div>
`
$tableContainer.prepend(fixed_html);
var $fixedTableHeaderMg = $tableContainer.find(".fixed-table-header-mg");
var $fixedTableHeader = $tableContainer.find('.fixed-table-header-mg .fixed_table_header')
// 设置固定表头样式
$tableContainer.find('.fixed-table-header-mg').css({
'background-color': 'white',
'white-space': 'nowrap',
'overflow-x': 'scroll',
'overflow-y': 'hidden',
});
$fixedTableHeader.css('max-width', 'inherit')
// 设置固定头部的宽度等于表格宽度
var setFixedWidth = function(){
var sourceTableWidth = $table.outerWidth();
$fixedTableHeaderMg.css('width', $tableContainer.outerWidth() + 'px');
$fixedTableHeader.css('width', sourceTableWidth+"px");
}
setFixedWidth()
setInterval(setFixedWidth, 1500);
// 复制表头
var targetHead = $sourceTableHead.clone();
targetHead.appendTo($fixedTableHeader.find('thead'));
// 同步复制的表头列宽
var setFixedColsWidth = function(){
$("#table thead tr th").each(function(index,value){
var tempWidth = $(value).width();
var tempHeight = $(value).height();
$fixedTableHeader.find('thead th').eq(index).css({'width':(tempWidth)+"px",'height':tempHeight+"px"})
});
}
setFixedColsWidth()
setInterval(setFixedColsWidth, 1500);
//处理左侧锁定
var $fixedColumnsLeft = $tableContainer.find(".fixed-columns");
if ($fixedColumnsLeft.length) {
// 元素存在
console.log('元素宽',$fixedColumnsLeft.outerWidth()+'px');
var fixed_html_ColumnsLeft = `
<div class="fixed-table-header-columns-left" style="display:none;">
</div>
`
$tableContainer.prepend(fixed_html_ColumnsLeft);
var $fixedTableColumnsLeft = $tableContainer.find(".fixed-table-header-columns-left");
// 同步复制的表头列宽
var setHeaderMg_left = function(){
// 设置样式
$tableContainer.find('.fixed-table-header-columns-left').css({
'background-color': 'white',
'width':$fixedColumnsLeft.outerWidth()+'px',
'top': 0,
'left': '30px',
'z-index': 9999,
'overflow': 'hidden',
});
$fixedTableColumnsLeft.html($fixedTableHeaderMg.html());
}
setHeaderMg_left();
setInterval(setHeaderMg_left, 500);
var header_left = $fixedTableColumnsLeft[0];
}
//以上处理左侧锁定
//处理右侧锁定
var $fixedColumnsRight = $tableContainer.find(".fixed-columns-right");
if ($fixedColumnsRight.length) {
// 元素存在
console.log('元素宽',$fixedColumnsRight.outerWidth()+'px');
var fixed_html_ColumnsRight = `
<div class="fixed-table-header-columns-right" style="display:none;">
</div>
`
$tableContainer.prepend(fixed_html_ColumnsRight);
var $fixedTableColumnsRight = $tableContainer.find(".fixed-table-header-columns-right");
// 同步复制的表头列宽
var setHeaderMg_right = function(){
// 设置样式
$tableContainer.find('.fixed-table-header-columns-right').css({
'background-color': 'white',
'width':$fixedColumnsRight.outerWidth()+'px',
'top': 0,
'right': '30px',
'z-index': 9999,
'overflow': 'hidden',
});
//复制头部到右侧容器
$fixedTableColumnsRight.html($fixedTableHeaderMg.html());
//设置容器内表格的定位
$tableContainer.find('.fixed-table-header-columns-right').find('table').css({
'margin-left':'-'+($fixedTableHeaderMg.find('table').outerWidth()-$fixedColumnsRight.outerWidth()-0)+'px',
});
}
setHeaderMg_right();
setInterval(setHeaderMg_right, 500);
var header_right = $fixedTableColumnsRight[0];
}
//以上处理左侧锁定
// 窗口滚动监听，设置固定表头位置
const header = $fixedTableHeaderMg[0];
const tableBody = document.querySelector('.fixed-table-body');
window.addEventListener('scroll', () => {
const tableBodyRect = tableBody.getBoundingClientRect();
// 检查表格是否在视窗内
if (tableBodyRect.top < 0 && tableBodyRect.bottom > 0) {
// 设置表头的固定位置
header.style.position = 'fixed';
header.style.top = 0;
header.style.left = tableBodyRect.left + 'px';
header.style.display = 'block';
if ($fixedColumnsLeft.length) {
header_left.style.position = 'fixed';
header_left.style.display = 'block';
}
if (header_right) {
header_right.style.position = 'fixed';
header_right.style.display = 'block';
}
} else {
// 隐藏表头
header.style.display = 'none';
if ($fixedColumnsLeft.length) {
header_left.style.display = 'none';
}
if ($fixedColumnsRight.length) {
header_right.style.display = 'none';
}
}
});
// 处理表格和固定表头的横向同步滚动
tableBody.addEventListener('scroll', function() {
header.scrollLeft = tableBody.scrollLeft;
});
header.addEventListener('scroll', function() {
tableBody.scrollLeft = header.scrollLeft;
});
// 固定表头全选按钮事件
$fixedTableHeader.find("input[name='btSelectAll']").click(function(){
if ($(this).is(":checked")){
$("input[name='btSelectItem']").prop("checked", "checked");
}else{
$("input[name='btSelectItem']").prop("checked", false);
}
});
}
即以下方法为新增的固定列表第一行的代码，这段代码中，我们首先获取表头和表格容器的 jQuery 对象，然后使用字符串模板创建了一个固定表头的 HTML 结构，接着设置了一些样式，如背景色、文本溢出处理和宽度等属性。
我们将创建的固定表头插入到表格容器中，并通过 setInterval 定时调用 setFixedWidth() 和 setFixedColsWidth() 方法来同步表头和表格的宽度和列宽。
在窗口滚动时，我们使用事件监听来实现表头的固定和隐藏，并使用滚动条的 scroll 事件来同步表格和固定表头的滚动位置。
此外，我们还处理了固定表头全选按钮的事件，当固定表头的全选按钮被选中时，表格中的所有复选框也被选中。
同时做了如果有左侧固定列和右侧固定的支持
调用方法（简单只需一行代码）
当我们需要固定表头时调用 fixedheader 方法即可：
示例一：
示例二：
// 固定列表头部(固定列表第一行)
Table.api.fixedheader(table);
生产环境需要
还需要一键压缩打包前台和后台的JS：
php think min -m all -r js
扫一扫
1156
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
