最近为了一个bootstarp-table 右侧列固定,费了很大周章,各种度娘,各种搜索,基本都没解决问题或者 不满足要求,先把自己的解决方案分享如下:
一、需要引入资源文件
bootstrap.min.css
bootstrap-table.css
bootstrap-table-fixed-columns.css
jquery.min.js
bootstrap.min.js
bootstrap-table.js
bootstrap-table-fixed-columns.js
如上资源文件 有版本匹配,不是随便一个版本都能使用(经过多次测试得出经验)
二、实现ajax 绑定后台返回json数据 ,不是网络上一大堆写死的table数据
如下数据是动态生成的,你可以替换为你后台返回的json数据
var $table = $('#table');
$(function () {
buildTable($table, 20, 20);
$('#fixedNumber').change(function () {
buildTable($table, 20, 20);
});
});
function buildTable($el, cells, rows) {
var i, j, row,
columns = [],
data = [];
for (i = 0; i < cells; i++) {
columns.push({
field: 'field' + i,
title: '列' + i,
sortable: true
});
}
for (i = 0; i < rows; i++) {
row = {};
for (j = 0; j < cells; j++) {
row['field' + j] = 'Row-' + i + '-' + j;
}
data.push(row);
}
$el.bootstrapTable('destroy').bootstrapTable({
columns: columns,
data: data,
search: true,
toolbar: '.toolbar',
pagination: true,
//height: 300,
pageSize: 10,
pageList: [10, 25, 50, 100],
fixedColumns: true,
fixedRightNumber:2, //设置固定右侧列数目
onClickCell:function (field,value,row,element){
console.log(field);
console.log(value);
console.log(row);
console.log(element);
}
});
}
如上代码获取地址:见本人资源
付效果图: