FastAdmin Bootstrap-Table 增加固定表头功能

在使用 Bootstrap-Table 进行数据展示的过程中，随着数据量的增大，表格的滚动条也随之增加，这时候表头随着滚动也会消失，使得用户难以区分数据的分类和标识。为了解决这个问题，我们可以增加一个固定表头的功能，使得表头在滚动时始终可见。

在 FastAdmin 中使用 Bootstrap-Table 进行表格展示，可以通过在require-table.js文件Table.api中的增加fixedheader方法实现固定表头的功能：

var Table = {
    ...
    api:{
        ...
        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);

                // 窗口滚动监听，设置固定表头位置
                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'
                    } else {
                        // 隐藏表头
                        header.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 方法即可：

var table = $("#table");
table.bootstrapTable({
	...
})
Table.api.bindevent(table);
Table.api.fixedheader(table);

以上就是 FastAdmin Bootstrap-Table 增加固定表头功能的实现方法。通过添加固定表头的功能，我们可以提高数据展示的可读性和用户体验。