Bootstrap Table 插件實現固定左側列

Bootstrap Table 插件自己是不帶固定列功能的，須要額外引用

bootstrap-table-fixed-columns.css與bootstrap-table-fixed-columns.js

可是引用這2個文件後，列有時候不對齊，用js處理下效果還好

完整的代碼以下：

<link rel="stylesheet" href="../../plugins/bootstrap-table-develop/src/bootstrap-table.css">
    <link rel="stylesheet" href="../../plugins/bootstrap-table-develop/src/bootstrap-table-fixed-columns.css">
<table class="table-striped table-hasthead nowrap" id="tableTest1" data-search="true" data-fixed-columns="true" data-fixed-number="3">
    <thead>
        <tr>
            <th></th>
            <th data-sortable="true">狀態描述狀態描述</th>
            <th data-sortable="true">客戶號</th>
            <th data-sortable="true">客戶名稱</th>
            <th data-sortable="true">監測設備編號</th>
            <th data-sortable="true">提醒餘額</th>
            <th data-sortable="true">收費單價</th>
            <th data-sortable="true">結算金額</th>
            <th data-sortable="true">結算時間</th>
            <th data-sortable="true">實時結算金額</th>
            <th data-sortable="true">實時結算時間</th>
            <th class="lastcolumn">客戶編輯</th>
        </tr>
    </thead>
    <tbody>
        <tr>
            <td><i class="fa fa-square blue"></i></td>
            <td>5</td>
            <td>8</td>
            <td>常州公司常州公司常州公司常州公司</td>
            <td>常州公司</td>
            <td>5</td>
            <td>8</td>
            <td>5</td>
            <td>8</td>
            <td>5</td>
            <td>8</td>
            <td>8</td>
        </tr>
        <tr>
            <td><i class="fa fa-square blue"></i></td>
            <td>客戶號6</td>
            <td>客戶號客戶號</td>
            <td></td>
            <td></td>
            <td>6</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
        </tr>
    </tbody>
</table>
    <!-- jQuery 2.1.4 -->
    <script src="../../plugins/jQuery/jQuery-2.1.4.min.js"></script>
    <!-- Bootstrap 3.3.5 -->
    <script src="../../bootstrap/js/bootstrap.js"></script>
    <script src="../../dist/js/sidebarHeight.js"></script>
    <script src="../../plugins/bootstrap-table-develop/src/bootstrap-table.js"></script>
    <script src="../../plugins/bootstrap-table-develop/src/bootstrap-table-fixed-columns.js"></script>
    <script src="../../plugins/bootstrap-table-develop/src/locale/bootstrap-table-zh-CN.js"></script>
    <script type="text/javascript">
    $(function() {
        $('#tableTest1').bootstrapTable({
            height: $(window).height() - 360,
            onAll: function(name, args) {
                fixleftwidth()
            }
        });

        function fixleftwidth() {
            setTimeout(function() {
                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()
        });
    });
    </script>

因爲是用js 強制對齊的，因此在觸發任何事件時都要執行下fixleftwidth()，並在窗口改變時也執行fixleftwidth()函數。

 

微信公衆號：前端之攻略

（發佈設計與前端相關文章）