前端表格插件 BootstrapTable 入门教程

╰+攻爆jí腚メ 2021-09-15 15:10 699阅读 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 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>

*  2、在页面body代码块里定义表格展示的区域
 *      <table id="table"></table>

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

*  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" οnclick="del(\'' + row.stdId + '\')">删除</button>';
                  }
              }
          ],
          onLoadSuccess: function(){  //加载成功时执行
                console.info("加载成功");
          },
          onLoadError: function(){  //加载失败时执行
                console.info("加载数据失败");
          }
    
    })

## 组件文档 ##

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

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

使用方式如下：

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

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

### 二、列参数 ###

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

示例代码：

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

关于列参数，更详细文档请访问

[http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/\#列参数][http_bootstrap-table.wenzhixin.net.cn_zh-cn_documentation 1]

### 三、事件 ###

给表格绑定事件，代码：

![70][]

![70 1][]

关于事件，更详细文档请访问：   
[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');

更全文档请访问：[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
[70]: /images/20210813/c8503002cc494023b8330158a2777646.png
[70 1]: /images/20210813/8b1237f1b6b14162afec9f2ec7da8831.png
[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