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