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()函数。

 

微信公众号：前端之攻略

（发布设计与前端相关文章）