前端表格插件 BootstrapTable 入门教程

绝地灬酷狼 2022-05-22 10:12 250阅读 0赞

#### 官网地址： [http://bootstrap-table.wenzhixin.net.cn/zh-cn/][http_bootstrap-table.wenzhixin.net.cn_zh-cn] ####

#### Github地址： [https://github.com/wenzhixin/bootstrap-table][https_github.com_wenzhixin_bootstrap-table] ####

> 官网介绍：   
> 基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。

##### 主要功能 #####

*  支持 Bootstrap 3 和 Bootstrap 2
 *  自适应界面
 *  固定表头
 *  非常丰富的配置参数
 *  直接通过标签使用
 *  显示/隐藏列
 *  显示/隐藏表头
 *  通过 AJAX 获取 JSON 格式的数据
 *  支持排序
 *  格式化表格
 *  支持单选或者多选
 *  强大的分页功能
 *  支持卡片视图
 *  支持多语言
 *  支持插件

## 优点 ##

*  学习成本较低，配置简单，文档齐全
 *  跟Bootstrap无缝衔接，整体风格一致，也便于二次开发
 *  开发者活跃，Github定期维护

## 开始使用 ##

*  1、在网页的head标签里插入下面的代码

<link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
 
 <link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">
 
 
 <script src="https://cdn.bootcss.com/jquery/2.2.3/jquery.min.js"></script>
 <script src="https://cdn.bootcss.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
 
 
 <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
 
 <script src="https://cdn.bootcss.com/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13
 *  14

*  2、在页面body代码块里定义表格展示的区域

*  1

*  3、使用data属性来渲染表格 （简单方式）

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9

*  4、编写JavaScript代码渲染表格 （推荐使用这种方式，代码阅读和扩展更为方便）

在网页代码最下面插入js脚本，内容如下：

$("#table").bootstrapTable({ // 对应table标签的id
 url: "<%=request.getContextPath()%>/api/getDataList.do", // 获取表格数据的url
 cache: false, // 设置为 false 禁用 AJAX 数据缓存， 默认为true
 striped: true, //表格显示条纹，默认为false
 pagination: true, // 在表格底部显示分页组件，默认false
 pageList: [10, 20], // 设置页面可以显示的数据条数
 pageSize: 10, // 页面数据条数
 pageNumber: 1, // 首页页码
 sidePagination: 'server', // 设置为服务器端分页
 queryParams: function (params) { // 请求服务器数据时发送的参数，可以在这里添加额外的查询参数，返回false则终止请求
 
 return {
 pageSize: params.limit, // 每页要显示的数据条数
 offset: params.offset, // 每页显示数据的开始行号
 sort: params.sort, // 要排序的字段
 sortOrder: params.order, // 排序规则
 dataId: $("#dataId").val() // 额外添加的参数
 }
 },
 sortName: 'id', // 要排序的字段
 sortOrder: 'desc', // 排序规则
 columns: [
 {
 checkbox: true, // 显示一个勾选框
 align: 'center' // 居中显示
 }, {
 field: 'code', // 返回json数据中的name
 title: '编号', // 表格表头显示文字
 align: 'center', // 左右居中
 valign: 'middle' // 上下居中
 }, {
 field: 'name',
 title: '名称',
 align: 'center',
 valign: 'middle'
 }, {
 field: 'calcMode',
 title: '计算方式',
 align: 'center',
 valign: 'middle',
 formatter: function (value, row, index){ // 单元格格式化函数
 var text = '-';
 if (value == 1) {
 text = "方式一";
 } else if (value == 2) {
 text = "方式二";
 } else if (value == 3) {
 text = "方式三";
 } else if (value == 4) {
 text = "方式四";
 }
 return text;
 }
 }, {
 title: "操作",
 align: 'center',
 valign: 'middle',
 width: 160, // 定义列的宽度，单位为像素px
 formatter: function (value, row, index) { 
 return '<button class="btn btn-primary btn-sm" onclick="del(\'' + row.stdId + '\')">删除</button>';
 }
 }
 ],
 onLoadSuccess: function(){ //加载成功时执行
 console.info("加载成功");
 },
 onLoadError: function(){ //加载失败时执行
 console.info("加载数据失败");
 }
 
 })

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13
 *  14
 *  15
 *  16
 *  17
 *  18
 *  19
 *  20
 *  21
 *  22
 *  23
 *  24
 *  25
 *  26
 *  27
 *  28
 *  29
 *  30
 *  31
 *  32
 *  33
 *  34
 *  35
 *  36
 *  37
 *  38
 *  39
 *  40
 *  41
 *  42
 *  43
 *  44
 *  45
 *  46
 *  47
 *  48
 *  49
 *  50
 *  51
 *  52
 *  53
 *  54
 *  55
 *  56
 *  57
 *  58
 *  59
 *  60
 *  61
 *  62
 *  63
 *  64
 *  65
 *  66
 *  67
 *  68
 *  69
 *  70
 *  71
 *  72
 *  73
 *  74

## 组件文档 ##

### 一、表格参数 ###

设置表格如何显示，下面列举了常用的参数，更全的列表请访问官方网址：   
[http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/\#表格参数][http_bootstrap-table.wenzhixin.net.cn_zh-cn_documentation]

使用方式如下：

$("#table").bootstrapTable({
          method: "post",
          url: "获取后台数据的url",
          ... ...
    
    });

*  1
 *  2
 *  3
 *  4
 *  5
 *  6

<table style="border-spacing:0px;width:851.111px;text-align:center;color:rgb(51,51,51);font-family:'-apple-system', 'SF UI Text', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif, SimHei, SimSun;font-size:14px;background-color:rgb(255,255,255);"> 
 <thead> 
 <tr> 
 <th align="left" style="margin:0px;vertical-align:middle;">名称</th> 
 <th align="left" style="margin:0px;vertical-align:middle;">标签</th> 
 <th align="left" style="margin:0px;vertical-align:middle;">类型</th> 
 <th align="left" style="margin:0px;vertical-align:middle;">默认</th> 
 <th align="left" style="margin:0px;vertical-align:middle;">描述</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td align="left" style="margin:0px;vertical-align:middle;">method</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">data-method</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">String</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">‘get’</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">服务器数据的请求方式 ‘get’ or ‘post’</td> 
 </tr> 
 <tr> 
 <td align="left" style="margin:0px;vertical-align:middle;">url</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">data-url</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">String</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">undefined</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">服务器数据的加载地址</td> 
 </tr> 
 <tr> 
 <td align="left" style="margin:0px;vertical-align:middle;">undefinedText</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">data-undefined-text</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">String</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">‘-‘</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">当数据为 undefined 时显示的字符</td> 
 </tr> 
 <tr> 
 <td align="left" style="margin:0px;vertical-align:middle;">striped</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">data-striped</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">Boolean</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">false</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">设置为 true 会有隔行变色效果</td> 
 </tr> 
 <tr> 
 <td align="left" style="margin:0px;vertical-align:middle;">columns</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">-</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">Array</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">[]</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">列配置项,详情请查看 列参数 表格.</td> 
 </tr> 
 <tr> 
 <td align="left" style="margin:0px;vertical-align:middle;">data</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">-</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">Array</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">[]</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">加载json格式的数据</td> 
 </tr> 
 <tr> 
 <td align="left" style="margin:0px;vertical-align:middle;">cache</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">data-cache</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">Boolean</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">true</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">设置为 false 禁用 AJAX 数据缓存</td> 
 </tr> 
 <tr> 
 <td align="left" style="margin:0px;vertical-align:middle;">dataType</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">data-data-type</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">String</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">‘json’</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">服务器返回的数据类型</td> 
 </tr> 
 <tr> 
 <td align="left" style="margin:0px;vertical-align:middle;">queryParams</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">data-query-params</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">Function</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">function(params) {&nbsp; return params;&nbsp; }</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">请求服务器数据时，你可以通过重写参数的方式添加一些额外的参数， 例如 toolbar 中的参数&nbsp; 如果 queryParamsType = ‘limit’ ,返回参数必须包含&nbsp; limit, offset, search, sort, order&nbsp; 否则, 需要包含: pageSize, pageNumber, searchText, sortName, sortOrder.&nbsp; &nbsp;返回false将会终止请求</td> 
 </tr> 
 <tr> 
 <td align="left" style="margin:0px;vertical-align:middle;">pagination</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">data-pagination</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">Boolean</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">false</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">设置为 true 会在表格底部显示分页条</td> 
 </tr> 
 <tr> 
 <td align="left" style="margin:0px;vertical-align:middle;">paginationLoop</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">data-pagination-loop</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">Boolean</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">true</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">设置为 true 启用分页条无限循环的功能。</td> 
 </tr> 
 <tr> 
 <td align="left" style="margin:0px;vertical-align:middle;">sidePagination</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">data-side-pagination</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">String</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">‘client’</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">设置在哪里进行分页，可选值为 ‘client’ 或者 ‘server’。设置 ‘server’时，必须设置 服务器数据地址（url）或者重写ajax方法</td> 
 </tr> 
 <tr> 
 <td align="left" style="margin:0px;vertical-align:middle;">pageNumber</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">data-page-number</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">Number</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">1</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">如果设置了分页，首页页码</td> 
 </tr> 
 <tr> 
 <td align="left" style="margin:0px;vertical-align:middle;">pageSize</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">data-page-size</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">Number</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">10</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">如果设置了分页，页面数据条数</td> 
 </tr> 
 <tr> 
 <td align="left" style="margin:0px;vertical-align:middle;">pageList</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">data-page-list</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">Array</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">[10, 25, 50, 100, All]</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">如果设置了分页，设置可供选择的页面数据条数。设置为All 则显示所有记录。</td> 
 </tr> 
 <tr> 
 <td align="left" style="margin:0px;vertical-align:middle;">search</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">data-search</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">Boolean</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">false</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">是否启用搜索框</td> 
 </tr> 
 <tr> 
 <td align="left" style="margin:0px;vertical-align:middle;">searchOnEnterKey</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">data-search-on-enter-key</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">Boolean</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">false</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">设置为 true时，按回车触发搜索方法，否则自动触发搜索方法</td> 
 </tr> 
 <tr> 
 <td align="left" style="margin:0px;vertical-align:middle;">showRefresh</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">data-show-refresh</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">Boolean</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">false</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">是否显示 刷新按钮</td> 
 </tr> 
 <tr> 
 <td align="left" style="margin:0px;vertical-align:middle;">clickToSelect</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">data-click-to-select</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">Boolean</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">false</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">设置true 将在点击行时，自动选择rediobox 和 checkbox</td> 
 </tr> 
 <tr> 
 <td align="left" style="margin:0px;vertical-align:middle;">singleSelect</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">data-single-select</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">Boolean</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">false</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">设置True 将禁止多选</td> 
 </tr> 
 </tbody> 
</table>

### 二、列参数 ###

针对具体每一列展示的设置参数，最常用的为 title 和 field， 它们分别设置了表头显示文字和对应要显示的每项数据

示例代码：

$("#table").bootstrapTable({
          method: "post",
          url: "获取后台数据的url",
          columns: [
              {
                  checkbox: true
              }, {
                  title: '标准编号'
                  field: 'stdCode'
              },
              ... ...
          ]
    });

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10
 *  11
 *  12
 *  13

关于列参数，更详细文档请访问   
[http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/\#列参数][http_bootstrap-table.wenzhixin.net.cn_zh-cn_documentation 1]

### 三、事件 ###

给表格绑定事件，代码：

$("#table").bootstrapTable({
          method: "post",
          url: "获取后台数据的url",
          onLoadSuccess: function(){   //加载成功时执行
                console.info("加载成功");
          },
          onLoadError: function(){   //加载失败时执行
                console.info("加载数据失败");
          }
    });

*  1
 *  2
 *  3
 *  4
 *  5
 *  6
 *  7
 *  8
 *  9
 *  10

<table style="border-spacing:0px;width:1006.67px;text-align:center;color:rgb(51,51,51);font-family:'-apple-system', 'SF UI Text', Arial, 'PingFang SC', 'Hiragino Sans GB', 'Microsoft YaHei', 'WenQuanYi Micro Hei', sans-serif, SimHei, SimSun;font-size:14px;background-color:rgb(255,255,255);"> 
 <thead> 
 <tr> 
 <th align="left" style="margin:0px;vertical-align:middle;">Option 事件</th> 
 <th align="left" style="margin:0px;vertical-align:middle;">jQuery 事件</th> 
 <th align="left" style="margin:0px;vertical-align:middle;">参数</th> 
 <th align="left" style="margin:0px;vertical-align:middle;">描述</th> 
 </tr> 
 </thead> 
 <tbody> 
 <tr> 
 <td align="left" style="margin:0px;vertical-align:middle;">onLoadSuccess</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">load-success.bs.table</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">data</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">请求加载远程服务器数据成功时的事件</td> 
 </tr> 
 <tr> 
 <td align="left" style="margin:0px;vertical-align:middle;">onLoadError</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">load-error.bs.table</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">status</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">请求加载远程服务器数据失败时的事件</td> 
 </tr> 
 <tr> 
 <td align="left" style="margin:0px;vertical-align:middle;">onClickRow</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">click-row.bs.table</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">row,&nbsp;element|当用户点击某一行的时候触发，参数包括：&lt;br/&gt;row：点击行的数据，&lt;br/&gt;element|当用户点击某一行的时候触发，参数包括：&lt;br/&gt;row：点击行的数据，&lt;br/&gt;element：tr 元素，&nbsp; field：点击列的 field 名称。</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">&nbsp;</td> 
 </tr> 
 <tr> 
 <td align="left" style="margin:0px;vertical-align:middle;">onDblClickRow</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">dbl-click-row.bs.table</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">row, $element</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">当用户双击某一行的时候触发，参数包括： row：点击行的数据， field：点击列的 field 名称。</td> 
 </tr> 
 <tr> 
 <td align="left" style="margin:0px;vertical-align:middle;">onClickCell</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">click-cell.bs.table</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">field, value, row,&nbsp;element|当用户点击某一列的时候触发，参数包括：&lt;br/&gt;field：点击列的field名称，&lt;br/&gt;value：点击列的value值，&lt;br/&gt;row：点击列的整行数据，&lt;br/&gt;element|当用户点击某一列的时候触发，参数包括：&lt;br/&gt;field：点击列的field名称，&lt;br/&gt;value：点击列的value值，&lt;br/&gt;row：点击列的整行数据，&lt;br/&gt;element：td 元素。</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">&nbsp;</td> 
 </tr> 
 <tr> 
 <td align="left" style="margin:0px;vertical-align:middle;">onDblClickCell</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">dbl-click-cell.bs.table</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">field, value, row,&nbsp;element|当用户双击某一列的时候触发，参数包括：&lt;br/&gt;field：点击列的field名称，&lt;br/&gt;value：点击列的value值，&lt;br/&gt;row：点击列的整行数据，&lt;br/&gt;element|当用户双击某一列的时候触发，参数包括：&lt;br/&gt;field：点击列的field名称，&lt;br/&gt;value：点击列的value值，&lt;br/&gt;row：点击列的整行数据，&lt;br/&gt;element：td 元素。</td> 
 <td align="left" style="margin:0px;vertical-align:middle;">&nbsp;</td> 
 </tr> 
 </tbody> 
</table>

关于事件，更详细文档请访问：   
[http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/\#事件][http_bootstrap-table.wenzhixin.net.cn_zh-cn_documentation 2]

### 四、方法 ###

使用方法的语法：$(‘\#table’).bootstrapTable(‘method’, parameter);。   
示例代码：

// 获取表格所有已经勾选的行数据，为一个对象数组
    var selects = $('#table').bootstrapTable('getSelections');

*  1
 *  2

更全文档请访问：[http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/\#方法][http_bootstrap-table.wenzhixin.net.cn_zh-cn_documentation 3]

[http_bootstrap-table.wenzhixin.net.cn_zh-cn]: http://bootstrap-table.wenzhixin.net.cn/zh-cn/
[https_github.com_wenzhixin_bootstrap-table]: https://github.com/wenzhixin/bootstrap-table
[http_bootstrap-table.wenzhixin.net.cn_zh-cn_documentation]: http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/#%E8%A1%A8%E6%A0%BC%E5%8F%82%E6%95%B0
[http_bootstrap-table.wenzhixin.net.cn_zh-cn_documentation 1]: http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/#%E5%88%97%E5%8F%82%E6%95%B0
[http_bootstrap-table.wenzhixin.net.cn_zh-cn_documentation 2]: http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/#%E4%BA%8B%E4%BB%B6
[http_bootstrap-table.wenzhixin.net.cn_zh-cn_documentation 3]: http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/#%E6%96%B9%E6%B3%95