bootstarp js设置列隐藏_解决bootstrap-table-fixed-columns.js显示列与隐藏列按钮切换表格不对齐...
含有data-show-columns="true"属性时会在右边显示可以切换列的按钮
结合bootstrap-table-fixed-columns.js插件使用时会出现列不对齐的问题
查看Dom结构发现点击一次具体列切换按钮时会增加一个class 为fixed-table-header-columns 的html片段，我们只需保留最后一个，解决方法
1、先删除多余的html
2、执行表格对齐函数
为了使排序的图标正常显示，需要在onSort的事件中执行能使图标正常显示的代码(注意如果要使固定的列有排序的功能请看我另一篇博客https://my.oschina.net/u/2612473/blog/2395979)
完整代码如下：
$(function() {
$('#tableTest1').bootstrapTable({
sortable: true,
height: $(window).height() - 360,
onSort: function(name, order) {
$(".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);
fixleftwidth()
},
onColumnSwitch: function(field, checked) {
//setTimeout(function() {
var colnumBody = $(".fixed-table-body-columns");
var colnumHead = $(".fixed-table-header-columns");
var len = $(".fixed-table-body-columns").length;
for (var i = 0; i < len - 1; i++) {
colnumBody.eq(i).remove()
colnumHead.eq(i).remove()
}
fixleftwidth()
//}, 0)
},
});
function fixleftwidth() {
setTimeout(function() {
$(".fixed-table-body-columns tr td:first-child").height(22);
var fixColumnTds = $(".fixed-table-body-columns tr:first-child td");
var fixNum = fixColumnTds.length;
var tableBody = $(".fixed-table-body tbody tr:first-child td");
for (var i = 0; i < fixNum; i++) {
fixColumnTds.eq(i).width(tableBody.eq(i).width())
}
}, 0)
}
fixleftwidth()
$(window).resize(function() {
$('#tableTest1').bootstrapTable('resetView');
fixleftwidth()
});
});
//格式化显示，内容太长时带省略号
//
状态function testFormatter(value, row, index, field) {
if (value != null && value.length > 5) {
return '' + value.substr(0, 5) + '...';
}
return value;
}