Fastadmin固定表头

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 + 2) + "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);
                    }
                });
            }

在需要固定表头的js中如下位置引用

// 固定列表头部(固定列表第一行)
Table.api.fixedheader(table);

在需要固定表头的index.html中添加css代码 防止表格内容遮盖表头

<style>
    .fixed-table-header-mg,
    .fixed-table-header-columns-left,
    .fixed-table-header-columns-right {
        z-index: 99;
    }
</style>

最后生产环境下运行一键压缩打包前台和后台的JS：

php think min -m all -r js