前端表格插件 BootstrapTable 入门教程

官网地址： /zh-cn/

Github地址： /wenzhixin/bootstrap-table

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

主要功能

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

优点

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

开始使用

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

<!-- 引入bootstrap样式 -->
<link href="/bootstrap/3.3.6/css/" rel="stylesheet">
<!-- 引入bootstrap-table样式 -->
<link href="/bootstrap-table/1.11.1/" rel="stylesheet">

<!-- jquery -->
<script src="/jquery/2.2.3/"></script>
<script src="/bootstrap/3.3.6/js/"></script>

<!--  -->
<script src="/bootstrap-table/1.11.1/"></script>
<!-- 引入中文语言包 -->
<script src="/bootstrap-table/1.11.1/locale/"></script>

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

<table id="table"></table>

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

<table data-toggle="table" data-url="">
    <thead>
        <tr>
            <th data-field="id">序号</th>
            <th data-field="name">名称</th>
            <th data-field="price">价格</th>
        </tr>
    </thead>
</table>

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

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

$("#table").bootstrapTable({ // 对应table标签的id
      url: "<%=()%>/api/", // 获取表格数据的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: , // 每页要显示的数据条数
              offset: , // 每页显示数据的开始行号
              sort: , // 要排序的字段
              sortOrder: , // 排序规则
              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(\'' +  + '\')">删除</button>';
              }
          }
      ],
      onLoadSuccess: function(){  //加载成功时执行
            ("加载成功");
      },
      onLoadError: function(){  //加载失败时执行
            ("加载数据失败");
      }

})

组件文档

一、表格参数

设置表格如何显示，下面列举了常用的参数，更全的列表请访问官方网址：
/zh-cn/documentation/#表格参数

使用方式如下：

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

});      

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

二、列参数

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

示例代码：

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

名称	标签	类型	默认	描述
title	data-title	String	undefined	表头要显示的文本
field	data-field	String	undefined	要显示数据的字段名称，可以理解为json对象里的key
checkbox	data-checkbox	Boolean	false	设置为True的时候 则显示一列checkbox组件，该列的宽度为固定宽度
radio	data-radio	Boolean	false	设置为True的时候 则显示一列radio组件，该列的宽度为固定宽度
align	data-align	String	undefined	设置单元格数据的左右对齐方式， 可选择的值有：’left’, ‘right’, ‘center’
valign	data-valign	String	undefined	设置单元格数据的上下对齐方式， 可选择的值有：’top’, ‘middle’, ‘bottom’
width	data-width	Number {Pixels or Percentage}	undefined	设置列的宽度。如果没有设置的话则根据表格内容自适应宽度。设置的话，可以使用’%’百分比的方式，也可以设置要显示的像素值， 如果设置像素值的话可以不填’px’， 例如： width : 100 和 width : ‘100px’ ，效果是一样的
visible	data-visible	Boolean	true	显示或隐藏该列， 默认显示， False为隐藏
formatter	data-formatter	Function	undefined	单元格格式化函数，有三个参数： value： 该列的字段值； row： 这一行的数据对象； index： 行号，第几行，从0开始计算 例子： formatter : function(value, row, index){ return value + + index; }

关于列参数，更详细文档请访问
/zh-cn/documentation/#列参数

三、事件

给表格绑定事件，代码：

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

Option 事件	jQuery 事件	参数	描述
onLoadSuccess		data	请求加载远程服务器数据成功时的事件
onLoadError		status	请求加载远程服务器数据失败时的事件
onClickRow		row, element|当用户点击某一行的时候触发，参数包括：<br/>row：点击行的数据，<br/> element：tr 元素， field：点击列的 field 名称。
onDblClickRow		row, $element	当用户双击某一行的时候触发，参数包括： row：点击行的数据， field：点击列的 field 名称。
onClickCell		field, value, row, element|当用户点击某一列的时候触发，参数包括：<br/>field：点击列的field名称，<br/>value：点击列的value值，<br/>row：点击列的整行数据，<br/> element：td 元素。
onDblClickCell		field, value, row, element|当用户双击某一列的时候触发，参数包括：<br/>field：点击列的field名称，<br/>value：点击列的value值，<br/>row：点击列的整行数据，<br/> element：td 元素。

关于事件，更详细文档请访问：
/zh-cn/documentation/#事件

四、方法

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

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

名称(method)	参数	描述
getOptions	none	返回表格的 Options。
getSelections	none	返回所选的行，当没有选择任何行的时候返回一个空数组。
getAllSelections	none	返回所有选择的行，包括搜索过滤前的，当没有选择任何行的时候返回一个空数组。
load	data	加载数据到表格中，旧数据会被替换。
append	data	添加数据到表格在现有数据之后。
prepend	data	插入数据到表格在现有数据之前。
insertRow	params	插入新行，参数包括： index: 要插入的行的 index。 row: 行的数据，Object 对象。
refresh	params	更新远程服务器上的数据，可以设置{silent: true}来默认刷新，也可以设置{url: newUrl}来改变获取数据的url接口，也支持设置请求的参数{query: {foo: ‘bar’}}，这点在表单查询时很有用
showLoading	none	显示数据加载状态
hideLoading	none	隐藏数据加载状态
check	index	选择一行，参数为行号，index从0开始
uncheck	index	取消选择一行，参数为行号，index从0开始
destroy	none	销毁一个表格，直接把整个table删掉，需要重新开始渲染table
selectPage	page	跳到指定的页。
prevPage	none	跳到上一页。
nextPage	none	跳到下一页。

更全文档请访问：/zh-cn/documentation/#方法

---