FastAdmin增加bootstrap-table-fixed-columns冻结表头，。。bootstrap项目
。
使⽤快速创建应⽤管理系统有⼀段时间了，不得不说在⼀些中⼩型应⽤领域使⽤起来⾮常快捷、有效和实⽤，对于⼀些需要前期快速验证的项⽬也会是很好的选择。闲⾔少叙，以下总结最近⼀个表格前端效果的实战经验。
FastAdmin使⽤作为前端表格的基础组件库，通常列表交互展⽰已经够⽤了，包括通⽤搜索、排序、分页、导出、合并相同⾏/列等等。最近需要对表头进⾏冻结，到了bootstrap-table-fixed-columns组件（也是bootstrap-table作者写的）能实现冻结效果，但带来了其他问题，包括：排序失效、列宽错位、合并⾏⽆效等，于是引⼊该组件的同时，顺便解决了这些问题，并且封装回原js中，使⽤时可以⽆忧⽆虑啦~
⼀、引⼊js组件
FastAdmin的前端使⽤的是RequireJS引⼊js，因此需按其规则来加载，当然直接在html⽤原⽣script⽅式也能⽤，但就不那么优雅了，是不是？
1、将js和css⽂件复制到public/assets/libs/bootstrap-table/dist⽬录下，我会上传到本⽂的资源⽂件中供
⼤家下载。
2、到public/assets/js/require-backend.js⽂件，⼤约在35⾏左右，配置⽂件路径。
我有点⼩强迫症，⼀定要放在bootstrap-table相关组件⼀起，如图：
代码放出来⽅便copy：
'bootstrap-table-fixed-columns': '../libs/bootstrap-table/dist/bootstrap-table-fixed-columns',
90⾏左右，bootstrap-table-template节点下，配置shim依赖：
'bootstrap-table-fixed-columns': {
deps: ['bootstrap-table','css!../libs/bootstrap-table/dist/bootstrap-table-fixed-columns.css'],
exports: '$.fn.bootstrapTable.defaults'
},
⼆、使⽤bootstrap-table-fixed-columns
1、在对应的js⽂件头部，引⼊申明
define(['jquery', 'bootstrap', 'backend', 'table', 'form', 'bootstrap-table-fixed-columns'], function ($, undefined, Backend, Table, Form) {
2、在table的options中增加冻结表头配置项
table.bootstrapTable({
...
fixedColumns: true,//固定列
fixedNumber:2,//固定前两列
...
});
到此为⽌效果就出来啦，是不是很简单！
三、扩展说明
1、bootstrap-table-fixed-columns原理
bootstrap-table-fixed-columns实际上是“继承”了bootstrap-table，在⼀些关键⽣命周期做了处理，如initHeader、initBody和resetView，增加了冻结列的追加操作。从F12分析看，本质上是在原表格的基础上，“覆盖”了固定的列，当拖动滚动条时，看起来那⼏列是没有动的，也就是欺骗了眼睛：）
2、完善排序、列宽⾃动适配
之所以排序失效，就是因为覆盖的表头“遮挡”了原表头，⽆法响应点击事件了，因此解决的思路⾃然就是“恢复”原有的事件响应。其他的列宽适配、合并⾏等类似。以onSort为例：
var BootstrapTable = $.fn.bootstrapTable.Constructor,
_init = BootstrapTable.prototype.init,
_initHeader = BootstrapTable.prototype.initHeader,
_initBody = BootstrapTable.prototype.initBody,
_resetView = setView,
_onSort = Sort, // 排序时需增加对图标的同步更新
_mergeCells = Cells;// 扩展合并表格⽅法
// 针对base table没有prototype的⽅法，在这⾥调⽤
BootstrapTable.prototype.init = function () {
_init.apply(this, Array.prototype.slice.apply(arguments));
var that = this;
// 数据加载完成时需要对列宽度同步适配
this.$el.on('load-success.bs.table', function () {
});
/
/  显⽰/隐藏字段时需要对列宽度同步适配
this.$el.on('column-switch.bs.table', function () {
});
};
.......
Sort = function () {
_onSort.apply(this, Array.prototype.slice.apply(arguments));
if (!this.options.fixedColumns) {
return;
}
var name = this.options.sortName;
var order = this.options.sortOrder;
// 解决冻结列排序图标同步变化效果
$(".fixed-table-header-columns").find("th[data-field]").find("div.sortable").removeClass("asc desc")
$(".fixed-table-header-columns").find("th[data-field=" + name + "]").find("div.sortable").removeClass("asc desc").addClass(order);
};
// 其他代码见资源
3、合并相同⾏
bootstrap-table提供了mergeCells⽅法实现合并，但具体要合并哪些cell，需要我们来确定，以下引⽤了⽹上的⼀段代码，在onLoadSuccess和onColumnSwitch(显⽰/隐藏字段)时调⽤，以实现⾏合并：
function mergeTable(tableId, fieldname) {
var rows = $(tableId).bootstrapTable('getData');
var rowspan = 0;
var index = 0;
var last_value = '';
$.each(rows, function (i, row) {
if (i == 0) {
last_value = row[fieldname];
rowspan = 1;
index = i;
} else {
if (last_value === row[fieldname]) {
rowspan++;
}
else {
$(tableId).bootstrapTable('mergeCells', { index: index, field: fieldname, colspan: 1, rowspan: rowspan });                last_value = row[fieldname];
rowspan = 1;
index = i;
}
if (i == (rows.length - 1)) {
$(tableId).bootstrapTable('mergeCells', { index: index, field: fieldname, colspan: 1, rowspan: rowspan });            }
}
});
}
到此，完美解决冻结表格的问题。
资源⽂件下载地址：

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。