当前位置：首页 > article >正文

bootstrap 表格插件bootstrap table 的使用经验谈！

article 2025/3/26 4:08:54

最近在开发一个物业管理软件，其中用到bootstrap 的模态框。同时需要获取表格数据。用传统的方法，本人不想用，考虑到bootstrap应该有获取表格数据的方法，结果发现要想实现获取表格数据功能，需要通过bootstrap的插件实现：bootstrap table，地址：https://bootstrap-table.com/

登录网站并大体浏览一下数据，抱着急不可耐的心情，抓紧测试一下，该物业软件我用的是asp.net mvc 开发的，当然也是在该环境下测试啦。代码如下：

    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <script src="https://www.itxst.com/package/bootstrap-table-1.14.1/jquery-3.3.1/jquery.js"></script>
        <link href="https://www.itxst.com/package/bootstrap-4.3.1/css/bootstrap.css" rel="stylesheet" />
        <link href="https://www.itxst.com/package/bootstrap-table-1.15.3/bootstrap-table.css" rel="stylesheet" />
        <script src="https://www.itxst.com/package/bootstrap-table-1.15.3/bootstrap-table.js"></script>
        <title>bootstrap table getData在线例子</title>
        <style>
            .table-demo {
                width: 80%;
                margin: 30px auto 0px auto;
            }

            .titles {
                float: right;
                clear: both;
            }
        </style>
    </head>
    <body>
        <div id="toolbar">
            <button onclick="getData()">获取数据</button>
        </div>
        <div class="table-demo">
            <table id="table"></table>
        </div>
        <script>
            //设置需要显示的列
            var columns = [
                {
                    field: "Id",
                    title: 'ID'
                }, {
                    field: 'Car',
                    title: '品牌'
                }, {
                    field: 'StockNum',
                    title: 'Num'
                }];

            //需要显示的数据
            var data = [{
                Id: 1000,
                Car: '本田',
                StockNum: '1'
            }, {
                Id: 1002,
                Car: '丰田',
                StockNum: '2'
            }, {
                Id: 1003,
                Car: '宝马',
                StockNum: '3'
            }, {
                Id: 1004,
                Car: '别克',
                StockNum: '4'
            }];
            //bootstrap table初始化数据
            $('#table').bootstrapTable({
                toolbar: "#toolbar",
                columns: columns,
                data: data,
                pageSize: 2,
                pagination: true
            });

            function getData() {
                var data = $('#table').bootstrapTable('getData', { useCurrentPage: true, includeHiddenRows: true });
                alert(JSON.stringify(data));
            }


        </script>
    </body>
</html>

运行，结果出现如下问题：

反复运行都不行，后来启用vscode编辑器。把代码贴上去，经过测试，发现ok，上述问题消失，所以，考虑是asp.net mvc环境问题。初步考虑是js干扰问题，因为我测试使用的asp.net mvc默认环境，而该默认环境已经引入了一些js，如jquery.js bootstrap.js等比较多的js脚本。所以果断干掉它，在原来环境基础上增加了如下代码，排除干扰：

@{
    //清除环境干扰
    Layout = null;
}

那么，排除干扰后的代码如下：

@{
    //清除环境干扰
    Layout = null;
}
    <!doctype html>
    <html>
    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
        <script src="https://www.itxst.com/package/bootstrap-table-1.14.1/jquery-3.3.1/jquery.js"></script>
        <link href="https://www.itxst.com/package/bootstrap-4.3.1/css/bootstrap.css" rel="stylesheet" />
        <link href="https://www.itxst.com/package/bootstrap-table-1.15.3/bootstrap-table.css" rel="stylesheet" />
        <script src="https://www.itxst.com/package/bootstrap-table-1.15.3/bootstrap-table.js"></script>
        <title>bootstrap table getData在线例子</title>
        <style>
            .table-demo {
                width: 80%;
                margin: 30px auto 0px auto;
            }

            .titles {
                float: right;
                clear: both;
            }
        </style>
    </head>
    <body>
        <div id="toolbar">
            <button onclick="getData()">获取数据</button>
        </div>
        <div class="table-demo">
            <table id="table"></table>
        </div>
        <script>
            //设置需要显示的列
            var columns = [
                {
                    field: "Id",
                    title: 'ID'
                }, {
                    field: 'Car',
                    title: '品牌'
                }, {
                    field: 'StockNum',
                    title: 'Num'
                }];

            //需要显示的数据
            var data = [{
                Id: 1000,
                Car: '本田',
                StockNum: '1'
            }, {
                Id: 1002,
                Car: '丰田',
                StockNum: '2'
            }, {
                Id: 1003,
                Car: '宝马',
                StockNum: '3'
            }, {
                Id: 1004,
                Car: '别克',
                StockNum: '4'
            }];
            //bootstrap table初始化数据
            $('#table').bootstrapTable({
                toolbar: "#toolbar",
                columns: columns,
                data: data,
                pageSize: 2,
                pagination: true
            });

            function getData() {
                var data = $('#table').bootstrapTable('getData', { useCurrentPage: true, includeHiddenRows: true });
                alert(JSON.stringify(data));
            }


        </script>
    </body>
</html>

重新运行，一切ok！

在此，感谢IT小书童 bootstrap table getData获取表格数据的方法 - itxst.com 部分代码来自该在线调试工具，在此感谢作者无私分享。