解決bootstrap-table-fixed-columns.js顯示列與隱藏列按鈕切換表格不對齊

<table class="table-striped table-hasthead nowrap" id="tableTest1" data-search="true" data-show-columns="true" data-fixed-columns="true" data-fixed-number="3">
</table>

含有data-show-columns="true"屬性時會在右邊顯示能夠切換列的按鈕

結合bootstrap-table-fixed-columns.js插件使用時會出現列不對齊的問題

查看Dom結構發現點擊一次具體列切換按鈕時會增長一個class 爲fixed-table-header-columns 的html片斷，咱們只需保留最後一個，解決方法

一、先刪除多餘的html

二、執行表格對齊函數

爲了使排序的圖標正常顯示，須要在onSort的事件中執行能使圖標正常顯示的代碼（注意若是要使固定的列有排序的功能請看我另外一篇博客https://my.oschina.net/u/2612473/blog/2395979）

完整代碼以下：

<script type="text/javascript">
    $(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()
        });

    });
    //格式化顯示，內容太長時帶省略號 
    //<th data-sortable="true" class="name11" data-formatter="testFormatter">狀態</th>
    function testFormatter(value, row, index, field) {
        if (value != null && value.length > 5) {
            return '<a title="' + value + '" href="javascript:void(0)" >' + value.substr(0, 5) + '...</a>';
        }
        return value;
    }
    </script>

查看錶格效果