在列表中,如果列表字段很多,并且每页数量很多,往下拉的时候就不好辨别数据是哪个字段的,对用户造成不好的浏览体验。
通过以下方法,可以实现将列表的第一行,也就是头部,固定在第一行显示,这样就能轻松辨别每个数据对应是哪个字段的,增加用户的使用体验。
打开项目的 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');// 固定表头 htmlvar 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&#