bootstrap table入门

最新推荐文章于 2025-05-29 11:56:13 发布

原创最新推荐文章于 2025-05-29 11:56:13 发布 · 680 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端框架 #bootstrap table

jsp开发同时被 3 个专栏收录

23 篇文章

订阅专栏

框架

11 篇文章

订阅专栏

网站

5 篇文章

订阅专栏

本文介绍了一个实习生首次接触并使用BootstrapTable框架的经历，详细讲解了如何导入必要的CSS和JS文件，初始化表格，配置各项参数，包括分页、排序、数据字段等，以及如何处理后台返回的JSON数据。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在做公司的项目，项目要求是需要前端bootstrap table。作为一个实习生，还是第一次接触这个前端框架。然后做了一点笔记。

首先，无论我们使用什么框架，第一步肯定是导入jar包。

css包

 <link rel="stylesheet" href="${ctx}/static/bootstrap-4.2.1-dist/css/bootstrap-table.css">

js包（记住，在导入jar包的前面如果使用了jQuery，一定要把jQuery包放在第一，否则可能出错）

<script type="text/javascript" src="${ctx}/static/bootstrap-4.2.1-dist/js/bootstrap-table.js"></script>
    <script type="text/javascript" src="${ctx}/static/bootstrap-4.2.1-dist/js/bootstrap-table-zh-CN.js"></script>

第三步就是初始化表格

<script type="text/javascript">
    $(function () {
         //1.初始化Table
           var oTable = new TableInit();
            oTable.Init();
       });
    var TableInit = function () {
        var oTableInit = new Object();
        //初始化Table
        oTableInit.Init = function() {



            $('#ArbetTable').bootstrapTable({
               /* url: 'query?date='+new Date().getTime(), */       //请求后台的URL（*）
                method: 'post',                      //请求方式（*）
                toolbar: '',                        //工具按钮用哪个容器
                onLoadSuccess: function(){  //加载成功时执行
                    console.info("加载成功");
                },
                dataField: "rows",                   //controller返回json数据对应key
                striped: true,                      //是否显示行间隔色
                cache: false,                       //是否使用缓存，默认为true，所以一般情况下需要设置一下这个属性（*）
                pagination: true,                   //是否显示分页（*）
                sortable: false,                     //是否启用排序
                sortOrder: "asc",                   //排序方式
                queryParams: oTableInit.queryParams,//传递参数（*）
                sidePagination: "server",           //分页方式：client客户端分页，server服务端分页（*）
                pageNumber: 1,                       //初始化加载第一页，默认第一页
                pageSize: 10,                       //每页的记录行数（*）
                pageList: [10, 25, 50, 100],        //可供选择的每页的行数（*）
                search: false,                       //是否显示表格搜索，此搜索是客户端搜索，不会进服务端，所以，个人感觉意义不大
                contentType: "application/x-www-form-urlencoded",
                strictSearch: true,
                showColumns: true,                  //是否显示所有的列
                showRefresh: true,                  //是否显示刷新按钮
                minimumCountColumns: 1,             //最少允许的列数
                clickToSelect: true,                //是否启用点击选中行
                height: 700,                        //行高，如果没有设置height属性，表格自动根据记录条数觉得表格高度
                uniqueId: "no",                     //每一行的唯一标识，一般为主键列
                showToggle: true,                    //是否显示详细视图和列表视图的切换按钮
                cardView: false,                    //是否显示详细视图
                detailView: false,                   //是否显示父子表
 columns: [
                    {
                        field: 'input',
                        title: '进/出口',
                        align: 'center'
                      /*  formatter: operateFormatter //自定义方法，添加操作按钮*/
                    }, {
                        field: 'date',
                        title: '进/出港日期',
                        align: 'center'

                    },{
                        field: 'shipId',
                        title: '船舶编号',
                        align: 'center'

                    },{
                        field: 'shipNameCn',
                        title: '船舶名称',
                        align: 'center'

                    },{
                        field: 'shipNameEn',
                        title: '航次编号',
                        align: 'center'

                    },{
                        field: 'customsCode',
                        title: '主管海关',
                        align: 'center'

                    },{
                        field: 'tContaNum',
                        title: '提单总数',
                        align: 'center'

                    },{
                        field: 'kg',
                        title: '总毛重(kg)',
                        align: 'center'

                    },{
                        field: 'sum',
                        title: '总件数',
                        align: 'center'

                    },{
                        field: 'dateBox',
                        title: '总集装箱',
                        align: 'center'

                    },{
                        field: 'dateLow',
                        title: '空箱总数',
                        align: 'center'

                    },{
                        field: 'datePro',
                        title: '船舶代理',
                        align: 'center'

                    },
                ],
                rowStyle: function (row, index) {
                    var classesArr = ['success', 'info'];
                    var strclass = "";
                    if (index % 2 === 0) {//偶数行
                        strclass = classesArr[0];
                    } else {//奇数行
                        strclass = classesArr[1];
                    }
                    return { classes: strclass };
                },//隔行变色
            });


        };


        //得到查询的参数
        oTableInit.queryParams = function (params) {
            var temp = {   //这里的键的名字和控制器的变量名必须一直，这边改动，控制器也需要改成一样的
                limit: params.limit,   //页面大小
                offset:params.offset
            };
            return temp;
        };
        return oTableInit;
    };


    function operateFormatter(value, row, index) {//赋予的参数
        return [
       
        ].join('');
    }

上面我屏蔽了的URL，如果你想一打开页面就显示数据，就是将URL访问后台的地址打开。

OK了。这样就算初步的入门了。

切记，后台返回的数据。如果没有特别设置，那就是json格式，如果格式不对，是前端是不会显示的。（由于公司保密协议，后端代码就没写了）