bootstrap-table实现表头固定以及列固定的方法示例

要实现bootstrap-table表头固定和列固定，主要需要以下几个步骤：

一、引入jQuery库和bootstrap-table插件库。

在文档的head中引入jQuery库和bootstrap-table插件库，如下：

<head>
   <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
   <script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.js"></script>
   <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.css">
</head>

二、实现表头固定

1、按照官网文档中的说明给bootstrap-table添加fixedHeader、fixedColumns属性，代码如下：

<table id="table" data-fixed-header="true"
       data-fixed-columns="true">
    <thead>
    <tr>
        <th data-halign="center" data-align="center" data-field="id">ID</th>
        <th data-halign="center" data-align="center" data-field="name">名称</th>
        <th data-halign="center" data-align="center" data-field="price">价格</th>
        <th data-halign="center" data-align="center" data-field="count">数量</th>
        <th data-halign="center" data-align="center" data-field="operate">操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>苹果</td>
        <td>5.5</td>
        <td>100</td>
        <td><a href="#">购买</a></td>
    </tr>
    ...
    </tbody>
</table>

其中“data-fixed-header”属性为开启表头固定，“data-fixed-columns”属性为开启列固定。

2、在JS中启用表头和列固定的方法，如下：

$(function () {
    $('#table').bootstrapTable({
        fixedHeader: true,//开启表头固定
        fixedColumns: true,//开启列固定
    });
});

三、实现列固定

1、按照官网文档中的说明给bootstrap-table添加fixedColumns属性，并指定需要固定的列，代码如下：

<table id="table">
    <thead>
    <tr>
        <th data-halign="center" data-align="center" data-field="id" data-fixed="left">ID</th>
        <th data-halign="center" data-align="center" data-field="name">名称</th>
        <th data-halign="center" data-align="center" data-field="price" data-fixed="right">价格</th>
        <th data-halign="center" data-align="center" data-field="count">数量</th>
        <th data-halign="center" data-align="center" data-field="operate">操作</th>
    </tr>
    </thead>
    <tbody>
    <tr>
        <td>1</td>
        <td>苹果</td>
        <td>5.5</td>
        <td>100</td>
        <td><a href="#">购买</a></td>
    </tr>
...</tbody>
</table>

其中“data-fixed”属性指定需要固定的列，值为“left”或“right”。

2、在JS中启用列固定方法，如下：

$(function () {
    $('#table').bootstrapTable({
        fixedColumns: true,//开启列固定
        columns: [{
            field: 'id',
            title: 'ID',
            align: 'center',
            valign: 'middle',
            width: '80',//如果宽度过大则会被省略号代替
            sortable: true,
            fixed: true,//列固定
            formatter: function (value, row, index) {
                return index + 1;
            }
        },
        ...
        ],
    });
});

其中“fixed”属性用于列固定。

示例1：

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Table Column Fixed Demo</title>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.css">
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12" style="height: 400px">
            <table id="table">
                <thead>
                <tr>
                    <th data-field="id" data-fixed="left">ID</th>
                    <th data-field="name">名称</th>
                    <th data-field="price" data-fixed="right">价格</th>
                    <th data-field="count">数量</th>
                    <th data-field="operate">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>1</td>
                    <td>苹果</td>
                    <td>5.5</td>
                    <td>100</td>
                    <td><a href="#">购买</a></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>香蕉</td>
                    <td>3.5</td>
                    <td>200</td>
                    <td><a href="#">购买</a></td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>西瓜</td>
                    <td>10</td>
                    <td>50</td>
                    <td><a href="#">购买</a></td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>葡萄</td>
                    <td>2.5</td>
                    <td>500</td>
                    <td><a href="#">购买</a></td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>草莓</td>
                    <td>8</td>
                    <td>1000</td>
                    <td><a href="#">购买</a></td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>橘子</td>
                    <td>4</td>
                    <td>300</td>
                    <td><a href="#">购买</a></td>
                </tr>
                <tr>
                    <td>7</td>
                    <td>樱桃</td>
                    <td>15</td>
                    <td>20</td>
                    <td><a href="#">购买</a></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $('#table').bootstrapTable({
            fixedColumns: true,//开启列固定
            columns: [{
                field: 'id',
                title: 'ID',
                align: 'center',
                valign: 'middle',
                width: '80',//如果宽度过大则会被省略号代替
                sortable: true,
                fixed: true,//列固定
                formatter: function (value, row, index) {
                    return index + 1;
                }
            },
                {
                    field: 'name',
                    title: '名称',
                    align: 'center',
                    valign: 'middle',
                    width: '80',
                },
                {
                    field: 'price',
                    title: '价格',
                    align: 'center',
                    valign: 'middle',
                    width: '80',
                },
                {
                    field: 'count',
                    title: '数量',
                    align: 'center',
                    valign: 'middle',
                    width: '80',
                },
                {
                    field: 'operate',
                    title: '操作',
                    align: 'center',
                    valign: 'middle',
                    width: '80',
                    formatter: function (value, row, index) {
                        return '<a href="#">购买</a>';
                    }
                }
            ],
        });
    });
</script>
</body>
</html>

示例2：

<!DOCTYPE html>
<html>
<head>
    <title>Bootstrap Table Header and Column Fixed Demo</title>
    <meta charset="UTF-8">
    <script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
    <script src="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.js"></script>
    <link rel="stylesheet" href="https://cdn.bootcss.com/bootstrap-table/1.15.4/bootstrap-table.min.css">
</head>
<body>
<div class="container-fluid">
    <div class="row">
        <div class="col-xs-12" style="height: 400px">
            <table id="table" data-fixed-header="true"
                   data-fixed-columns="true">
                <thead>
                <tr>
                    <th data-halign="center" data-align="center" data-field="id">ID</th>
                    <th data-halign="center" data-align="center" data-field="name">名称</th>
                    <th data-halign="center" data-align="center" data-field="price">价格</th>
                    <th data-halign="center" data-align="center" data-field="count">数量</th>
                    <th data-halign="center" data-align="center" data-field="operate">操作</th>
                </tr>
                </thead>
                <tbody>
                <tr>
                    <td>1</td>
                    <td>苹果</td>
                    <td>5.5</td>
                    <td>100</td>
                    <td><a href="#">购买</a></td>
                </tr>
                <tr>
                    <td>2</td>
                    <td>香蕉</td>
                    <td>3.5</td>
                    <td>200</td>
                    <td><a href="#">购买</a></td>
                </tr>
                <tr>
                    <td>3</td>
                    <td>西瓜</td>
                    <td>10</td>
                    <td>50</td>
                    <td><a href="#">购买</a></td>
                </tr>
                <tr>
                    <td>4</td>
                    <td>葡萄</td>
                    <td>2.5</td>
                    <td>500</td>
                    <td><a href="#">购买</a></td>
                </tr>
                <tr>
                    <td>5</td>
                    <td>草莓</td>
                    <td>8</td>
                    <td>1000</td>
                    <td><a href="#">购买</a></td>
                </tr>
                <tr>
                    <td>6</td>
                    <td>橘子</td>
                    <td>4</td>
                    <td>300</td>
                    <td><a href="#">购买</a></td>
                </tr>
                <tr>
                    <td>7</td>
                    <td>樱桃</td>
                    <td>15</td>
                    <td>20</td>
                    <td><a href="#">购买</a></td>
                </tr>
                </tbody>
            </table>
        </div>
    </div>
</div>
<script type="text/javascript">
    $(function () {
        $('#table').bootstrapTable({
            fixedHeader: true,//开启表头固定
            fixedColumns: true,//开启列固定
        });
    });
</script>
</body>
</html>

以上是关于bootstrap-table实现表头固定以及列固定的方法和示例，希望能对你有所帮助。

本站文章如无特殊说明，均为本站原创，如若转载，请注明出处：bootstrap-table实现表头固定以及列固定的方法示例 - Python技术站

bootstrap-table实现表头固定以及列固定的方法示例

相关文章