最近为了一个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数据
<body>
<div class="container">
<h1>Fixed Columns</h1>
<ul class="bs-docs-social-buttons">
<li>
if you like bootstrap-table-fixed-columns - help:
</li>
</ul>
<hr>
<div class="toolbar form-inline">
</div>
<table id="table" data-show-columns="true"></table>
</div>
<script>
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);
}
});
}
</script>
</body>
如上代码获取地址：见本人资源
付效果图：
2317
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
