在列表中，如果列表字段很多，并且每页数量很多，往下拉的时候就不好辨别数据是哪个字段的，对用户造成不好的浏览体验。

通过以下方法，可以实现将列表的第一行，也就是头部，固定在第一行显示，这样就能轻松辨别每个数据对应是哪个字段的，增加用户的使用体验。

网上找了几个测试发现 不兼容固定左侧列和固定右侧列
这次的代码 同时兼容支持固定左侧列和右侧列
步骤一、
打开项目的 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

希望以上内容对你有所帮助！如果还有其他问题，请随时提问。 各类知识收集 拥有多年CMS企业建站经验，对 iCMS， Fastadmin， ClassCMS， LeCMS， PbootCMS， PHPCMS， 易优CMS， YzmCMS， 讯睿CMS， 极致CMS， Wordpress， HkCMS， YznCMS， WellCMS， ThinkCMF， 等各类cms的相互转化，程序开发，网站制作，bug修复，程序杀毒，插件定制都可以提供最佳解决方案。