Bootstrap之表格插件Bootstrap-table

桃扇骨 2022-04-23 06:42 528阅读 1赞

### 一.前言 ###

在Web开发中，可以采用很多功能强大的插件来满足要求，且能极大的提高开发效率，本文介绍bootstrap-table是一款非常有名的开源表格插件，在很多项目中广泛的应用，同时界面采用扁平化的风格，用户体验比较好，更好兼容各种客户端。

Bootstrap-table插件提供了非常丰富的属性设置，可以实现查询、分页、排序、复选框、设置显示列、主从表显示、合并列、国际化处理等处理功能，而且该插件同时也提供了一些不错的扩展功能，如移动行、移动列位置等一些特殊的功能，插件可以用基于HTML5的data-\*属性标识设置，也可以使用Javascript方式进行设置，非常方便。

官方详细文档教程: [https://bootstrap-table.com/docs/getting-started/introduction/][https_bootstrap-table.com_docs_getting-started_introduction]

### 二.实例分析 ###

##### 1.引入资源css,js #####

<link rel="stylesheet" href="https://lib.baomitu.com/twitter-bootstrap/4.2.1/css/bootstrap.min.css" >
        <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" integrity="sha384-UHRtZLI+pbxtHCWp1t77Bi1L4ZtiqrqD80Kn4Z8NTSRyMA2Fd33n5dQ8lWUE00s/" crossorigin="anonymous">
        <link rel="stylesheet" href="https://lib.baomitu.com/bootstrap-table/1.13.1/bootstrap-table.min.css">
    
        
        <script src="https://code.jquery.com/jquery-3.3.1.min.js" integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8=" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.6/umd/popper.min.js" integrity="sha384-wHAiFfRlMFy6i5SRaxvfOCifBUQy1xHdJ/yoi7FRNXMRBu5WHdZYu1hA6ZOblgut" crossorigin="anonymous"></script>
        <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.2.1/js/bootstrap.min.js" integrity="sha384-B0UglyR+jN6CkvvICOB2joaf5I4l3gm9GU6Hc1og6Ls7i6U/mkkaduKaBhlAXv9k" crossorigin="anonymous"></script>
        <script src="https://cdnjs.cloudflare.com/ajax/libs/core-js/2.6.2/core.min.js"></script>
        <script src="https://lib.baomitu.com/bootstrap-table/1.13.1/bootstrap-table.min.js"></script>
        <script src="https://lib.baomitu.com/bootstrap-table/1.13.1/locale/bootstrap-table-zh-CN.min.js"></script>
        
        <script type="text/javascript" src="https://lib.baomitu.com/layer/3.1.1/layer.js"></script>

##### 2.展示html #####

##### 3.js代码 #####

接口数据 [http://localhost:8015/pageList:][http_localhost_8015_pageList] 注意 客户端分页，需要指定数据字段为rows

> \{“errorCode”:0,“model”:null,“list”:null,“rows”:\[\{“id”:4,“name”:“名字1”,“description”:“描述1”\},\{“id”:5,“name”:“名字2”,“description”:“描述2”\},\{“id”:6,“name”:“名字3”,“description”:“描述3”\},\{“id”:7,“name”:“名字4”,“description”:“描述4”\},\{“id”:8,“name”:“名字5”,“description”:“描述5”\},\{“id”:9,“name”:“名字6”,“description”:“描述6”\},\{“id”:10,“name”:“名字7”,“description”:“描述7”\},\{“id”:11,“name”:“名字8”,“description”:“描述8”\},\{“id”:12,“name”:“名字9”,“description”:“描述9”\},\{“id”:13,“name”:“名字10”,“description”:“描述10”\},\{“id”:14,“name”:“名字11”,“description”:“描述11”\},\{“id”:15,“name”:“名字12”,“description”:“描述12”\},\{“id”:16,“name”:“名字13”,“description”:“描述13”\},\{“id”:17,“name”:“名字14”,“description”:“描述14”\},\{“id”:18,“name”:“名字15”,“description”:“描述15”\},\{“id”:19,“name”:“名字16”,“description”:“描述16”\},\{“id”:20,“name”:“名字17”,“description”:“描述17”\},\{“id”:21,“name”:“名字18”,“description”:“描述18”\},\{“id”:22,“name”:“名字19”,“description”:“描述19”\},\{“id”:23,“name”:“名字20”,“description”:“描述20”\},\{“id”:24,“name”:“名字21”,“description”:“描述21”\},\{“id”:25,“name”:“名字22”,“description”:“描述22”\},\{“id”:26,“name”:“名字23”,“description”:“描述23”\},\{“id”:27,“name”:“名字24”,“description”:“描述24”\},\{“id”:28,“name”:“名字25”,“description”:“描述25”\},\{“id”:29,“name”:“名字26”,“description”:“描述26”\},\{“id”:30,“name”:“名字27”,“description”:“描述27”\},\{“id”:31,“name”:“名字28”,“description”:“描述28”\},\{“id”:32,“name”:“名字29”,“description”:“描述29”\},\{“id”:33,“name”:“名字30”,“description”:“描述30”\},\{“id”:34,“name”:“名字31”,“description”:“描述31”\},\{“id”:35,“name”:“名字32”,“description”:“描述32”\}\]\}

##### 4.效果图 #####

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MjAxNDY_size_16_color_FFFFFF_t_70]

### 三.客户端分页和服务端分页的区别 ###

当服务器没有对数据进行分页时，前端页面设计又要求进行分页，要分开来设置。

客户端分页：后台一次性将数据推送到前台，由前台代码负责分页、排序等；

> responseHandler: function(data)\{  
> return data.response;  
> \}

服务端分页：一次只传当前页的数据，点上一页或下一页时再以ajax方式获取所对应的数据；

> sidePagination : “client”,  
> responseHandler: function(data)\{  
> return data.response.rows;  
> \}

### 四.其他api ###

##### 1.条件查询 #####

指定查询条件 id=2 name=123

var queryParams = { };
       	queryParams.id= '2';
       	queryParams.name= '123';
    	
    	var temp = { 
            url: "/pageList",
            query: queryParams
        };
        $("#table").bootstrapTable('refresh', temp);

##### 2.列表分条件显示 #####

示例:如果字段为type的值为s则显示为管理员,如果是ss值则显示为店员

{ 
                            field: 'type',
                            title: '身份级别',
                            align: 'center',
                            colspan: 1,
                            formatter: function (value, row, index) { 
                                if (row.type == '0') { 
                                    value = "组长";
                                } else if (row.type == '1') { 
                                    value = "科长";
                                }
                                return value;
                            }
                        },

[https_bootstrap-table.com_docs_getting-started_introduction]: https://bootstrap-table.com/docs/getting-started/introduction/
[http_localhost_8015_pageList]: http://localhost:8015/pageList:
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3UwMTA1MjAxNDY_size_16_color_FFFFFF_t_70]: /images/20220323/21f9aeb3988a40fbaabfad6e4dbc5e5a.png