前端表格插件BootstrapTable⼊门教程
官⽹地址：
Github地址：
官⽹介绍：
基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强⼤的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。
主要功能
⽀持 Bootstrap 3 和 Bootstrap 2
⾃适应界⾯
固定表头
⾮常丰富的配置参数
直接通过标签使⽤
显⽰/隐藏列
显⽰/隐藏表头
通过 AJAX 获取 JSON 格式的数据
⽀持排序
格式化表格
⽀持单选或者多选
强⼤的分页功能
⽀持卡⽚视图
⽀持多语⾔
⽀持插件
优点
学习成本较低，配置简单，⽂档齐全
跟Bootstrap⽆缝衔接，整体风格⼀致，也便于⼆次开发
开发者活跃，Github定期维护
开始使⽤
1、在⽹页的head标签⾥插⼊下⾯的代码
<!-- 引⼊bootstrap样式 -->
<link href="cdn.bootcss/bootstrap/3.3.6/css/bootstrap.min.css"rel="stylesheet">
<!-- 引⼊bootstrap-table样式 -->
<link href="cdn.bootcss/bootstrap-table/1.11.1/bootstrap-table.min.css"rel="stylesheet">
<!-- jquery -->
<script src="cdn.bootcss/jquery/2.2.3/jquery.min.js"></script>
<script src="cdn.bootcss/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<!-- bootstrap-table.min.js -->
<script src="cdn.bootcss/bootstrap-table/1.11.1/bootstrap-table.min.js"></script>
<!-- 引⼊中⽂语⾔包 -->
<script src="cdn.bootcss/bootstrap-table/1.11.1/locale/bootstrap-table-zh-CN.min.js"></script>
2、在页⾯body代码块⾥定义表格展⽰的区域
<table id="table"></table>
3、使⽤data属性来渲染表格 （简单⽅式）
<table data-toggle="table"data-url="data1.json">
<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: "<%=ContextPath()%>/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: der, // 排序规则
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){ // 单元格格式化函数
组件⽂档
⼀、表格参数
使⽤⽅式如下：
名称标签
类型默认描述
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
js获取json的key和valueString
‘json’
服务器返回的数据类型
请求服务器数据时，你可以通过重写参数的⽅式添加⼀些额外的参数，
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("加载数据失败");      }})
$("#table").bootstrapTable({      method: "post",      url: "获取后台数据的url",      ... ...});
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
Number1如果设置了分页，⾸页页码
pageSize data-page-size Number10如果设置了分页，页⾯数据条数
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， 它们分别设置了表头显⽰⽂字和对应要显⽰的每项数据⽰例代码：
名称标签类型默认描述
title data-title String undefined表头要显⽰的⽂本
field data-field String undefined要显⽰数据的字段名称，可以理解为json对象⾥的key
checkbox data-
checkbox
Boolean false设置为True的时候 则显⽰⼀列checkbox组件，该列的宽度为固定宽度
$("#table").bootstrapTable({      method: "post",
url: "获取后台数据的url",      columns: [
{
checkbox: true
}, {
title: '标准编号'
field: 'stdCode'
},
......
]
});
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 + row.id + index; }
名称标签
类型默认描述三、事件
给表格绑定事件，代码：
Option 事件jQuery 事件
参数描述
onLoadSuccess load-success.bs.table data 请求加载远程服务器数据成功时的事件onLoadError
load-error.bs.table
status
请求加载远程服务器数据失败时的事件
onClickRow click-row.bs.table
row, element：tr 元素， field：点击列的 field 名称。
onDblClickRow
dbl-click-row.bs.table
row, $element
当⽤户双击某⼀⾏的时候触发，参数包括：
row：点击⾏的数据，field：点击列的 field 名称。
onClickCell click-cell.bs.table field, value, row, element：td 元素。onDblClickCell
dbl-click-cell.bs.table
field, value, row, element：td 元素。
四、⽅法
使⽤⽅法的语法：$(‘#table’).bootstrapTable(‘method’, parameter);。 ⽰例代码：
名称(method)参数描述
$("#table").bootstrapTable({      method: "post",      url: "获取后台数据的url",
onLoadSuccess: function (){  //加载成功时执⾏            console.info("加载成功");      },
onLoadError: function (){  //加载失败时执⾏            console.info("加载数据失败");      }});
// 获取表格所有已经勾选的⾏数据，为⼀个对象数组var  selects = $('#table').bootstrapTable('getSelections');

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。