bootstrap table入门

左手的ㄟ右手 2022-03-10 15:38 285阅读 0赞

今天在做公司的项目，项目要求是需要前端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格式，如果格式不对，是前端是不会显示的。（由于公司保密协议，后端代码就没写了）

发表评论取消回复

表情：

评论列表（有 0 条评论，285人围观）

还没有评论，来说两句吧...

相关阅读

相关 bootstrap-table

<head> <meta charset="utf-8"> <title></title> <link rel="stylesh...

痛定思痛。/ 2024年04月17日 05:30/ 0 赞/ 73 阅读

相关 bootstrap-table使用

Bootstrap-table的基本使用这是一款很好的前端分页和表格显示的插件官方地址：[https://bootstrap-table.com/][https_

梦里梦外;/ 2022年10月02日 04:50/ 0 赞/ 228 阅读

相关 SpringMVC+bootstrap-table

bootstrap-table下载地址：[https://github.com/wenzhixin/bootstrap-table/][https_github.com_wen

矫情吗；*/ 2022年07月11日 05:39/ 0 赞/ 169 阅读

相关 bootstrap table系列：

bootstrap table系列： [JS组件系列——表格组件神器：bootstrap table][JS_bootstrap table] [JS组件系列——

ゞ浴缸里的玫瑰/ 2022年06月17日 10:50/ 0 赞/ 222 阅读

相关 Bootstrap Table学习

Bootstrap Table是基于 Bootstrap 的 [jQuery][] 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展

比眉伴天荒/ 2022年06月14日 06:57/ 0 赞/ 207 阅读

相关 bootstrap table

1. bootstrap table 1) ：jsp 部分 <div class="panel-body"> <table id="brid">

た入场券/ 2022年05月13日 12:54/ 0 赞/ 218 阅读

相关 bootstrap table入门

今天在做公司的项目，项目要求是需要前端bootstrap table。作为一个实习生，还是第一次接触这个前端框架。然后做了一点笔记。首先，无论我们使用什么框架，第一步肯定是

左手的ㄟ右手/ 2022年03月10日 15:38/ 0 赞/ 286 阅读

相关 Bootstrap-Table入门Demo

目录例1 例2 -------------------- 例1 ![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_1

超、凢脫俗/ 2021年09月29日 05:52/ 0 赞/ 382 阅读

相关 bootstrap-table示例

废话不多说，先上一个基本示例，然后逐步介绍功能和配置。 1、远程加载列表数据： 1）引入库： <link rel="stylesheet" href="https

àì夳堔傛蜴生んèń/ 2021年08月30日 20:48/ 0 赞/ 381 阅读

相关 Bootstrap table方法，Bootstrap table事件，配置

调用 BootStrap Table 方法的语法： $('\table').bootstrapTable('method', parameter); 例如： $('\my

谁践踏了优雅/ 2021年06月22日 15:38/ 0 赞/ 791 阅读