fastadmin框架后台列表固定第一行列表固定头部

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

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

打开项目的 public/assets/js/require-table.js 文件,在如下位置添加代码:

define(['jquery', 'bootstrap', 'moment', 'moment/locale/zh-cn', 'bootstrap-table', 'bootstrap-table-lang', 'bootstrap-table-export', 'bootstrap-table-commonsearch', 'bootstrap-table-template', 'bootstrap-table-jumpto', 'bootstrap-table-fixed-columns'], function ($, undefined, Moment) {
    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&#

最近更新

  1. docker php8.1+nginx base 镜像 dockerfile 配置

    2024-07-10 16:26:03       5 阅读
  2. Could not load dynamic library ‘cudart64_100.dll‘

    2024-07-10 16:26:03       5 阅读
  3. 在Django里面运行非项目文件

    2024-07-10 16:26:03       4 阅读
  4. Python语言-面向对象

    2024-07-10 16:26:03       5 阅读

热门阅读

  1. 中医四大经典之 No.1

    2024-07-10 16:26:03       10 阅读
  2. 支持向量机(Support Vector Machine,SVM)

    2024-07-10 16:26:03       9 阅读
  3. vue2 、 vue3首屏优化,减少白屏时间

    2024-07-10 16:26:03       9 阅读
  4. 对于配置LLM,集显和独显的具体区别和影响

    2024-07-10 16:26:03       10 阅读
  5. Perl 语言入门学习

    2024-07-10 16:26:03       8 阅读
  6. 单例模式之静态内部类与枚举类

    2024-07-10 16:26:03       9 阅读
  7. 爬虫技术抓取网站数据

    2024-07-10 16:26:03       11 阅读
  8. [Go] 字符串遍历数据类型问题

    2024-07-10 16:26:03       9 阅读
  9. 51单片机第26步_单片机工作在空闲模式

    2024-07-10 16:26:03       8 阅读
  10. QT调节屏幕亮度

    2024-07-10 16:26:03       9 阅读
  11. Spring Boot手写starter

    2024-07-10 16:26:03       10 阅读