前端表格插件BootstrapTable入门一

官网地址: http://bootstrap-table.wenzhixin.net.cn/zh-cn/

Github地址: https://github.com/wenzhixin/bootstrap-table

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

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

优点

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

开始使用

  • 1、在网页的head标签里插入下面的代码
<!-- 引入bootstrap样式 -->
<link href="https://cdn.bootcss.com/bootstrap/3.3.6/css/bootstrap.min.css" rel="stylesheet">
<!-- 引入bootstrap-table样式 -->
<link href="https://cdn.bootcss.com/bootstrap-table/1.11.1/bootstrap-table.min.css" rel="stylesheet">

<!-- jquery -->
<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>

<!-- bootstrap-table.min.js -->
<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代码块里定义表格展示的区域
<table id="table"></table>
  • 1
  • 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>
  • 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/#表格参数

使用方式如下:

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

});      
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
名称标签类型默认描述
methoddata-methodString‘get’服务器数据的请求方式 ‘get’ or ‘post’
urldata-urlStringundefined服务器数据的加载地址
undefinedTextdata-undefined-textString‘-‘当数据为 undefined 时显示的字符
stripeddata-stripedBooleanfalse设置为 true 会有隔行变色效果
columns-Array[]列配置项,详情请查看 列参数 表格.
data-Array[]加载json格式的数据
cachedata-cacheBooleantrue设置为 false 禁用 AJAX 数据缓存
dataTypedata-data-typeString‘json’服务器返回的数据类型
queryParamsdata-query-paramsFunctionfunction(params) { 
return params; 
}
请求服务器数据时,你可以通过重写参数的方式添加一些额外的参数,
例如 toolbar 中的参数 
如果 queryParamsType = ‘limit’ ,返回参数必须包含 
limit, offset, search, sort, order 
否则, 需要包含: pageSize, pageNumber, searchText, sortName, sortOrder. 
返回false将会终止请求
paginationdata-paginationBooleanfalse设置为 true 会在表格底部显示分页条
paginationLoopdata-pagination-loopBooleantrue设置为 true 启用分页条无限循环的功能。
sidePaginationdata-side-paginationString‘client’设置在哪里进行分页,可选值为 ‘client’ 或者 ‘server’。设置 ‘server’时,必须设置 服务器数据地址(url)或者重写ajax方法
pageNumberdata-page-numberNumber1如果设置了分页,首页页码
pageSizedata-page-sizeNumber10如果设置了分页,页面数据条数
pageListdata-page-listArray[10, 25, 50, 100, All]如果设置了分页,设置可供选择的页面数据条数。设置为All 则显示所有记录。
searchdata-searchBooleanfalse是否启用搜索框
searchOnEnterKeydata-search-on-enter-keyBooleanfalse设置为 true时,按回车触发搜索方法,否则自动触发搜索方法
showRefreshdata-show-refreshBooleanfalse是否显示 刷新按钮
clickToSelectdata-click-to-selectBooleanfalse设置true 将在点击行时,自动选择rediobox 和 checkbox
singleSelectdata-single-selectBooleanfalse设置True 将禁止多选

二、列参数

针对具体每一列展示的设置参数,最常用的为 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
名称标签类型默认描述
titledata-titleStringundefined表头要显示的文本
fielddata-fieldStringundefined要显示数据的字段名称,可以理解为json对象里的key
checkboxdata-checkboxBooleanfalse设置为True的时候 则显示一列checkbox组件,该列的宽度为固定宽度
radiodata-radioBooleanfalse设置为True的时候 则显示一列radio组件,该列的宽度为固定宽度
aligndata-alignStringundefined设置单元格数据的左右对齐方式, 可选择的值有:’left’, ‘right’, ‘center’
valigndata-valignStringundefined设置单元格数据的上下对齐方式, 可选择的值有:’top’, ‘middle’, ‘bottom’
widthdata-widthNumber {Pixels or Percentage}undefined设置列的宽度。如果没有设置的话则根据表格内容自适应宽度。设置的话,可以使用’%’百分比的方式,也可以设置要显示的像素值, 如果设置像素值的话可以不填’px’, 例如: width : 100 和 width : ‘100px’ ,效果是一样的
visibledata-visibleBooleantrue显示或隐藏该列, 默认显示, False为隐藏
formatterdata-formatterFunctionundefined单元格格式化函数,有三个参数:
value: 该列的字段值;
row: 这一行的数据对象;
index: 行号,第几行,从0开始计算
例子:
formatter : function(value, row, index){ return value + row.id + index; }

关于列参数,更详细文档请访问 
http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/#列参数

三、事件

给表格绑定事件,代码:

$("#table").bootstrapTable({
      method: "post",
      url: "获取后台数据的url",
      onLoadSuccess: function(){  //加载成功时执行
            console.info("加载成功");
      },
      onLoadError: function(){  //加载失败时执行
            console.info("加载数据失败");
      }
});      
  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
Option 事件jQuery 事件参数描述
onLoadSuccessload-success.bs.tabledata请求加载远程服务器数据成功时的事件
onLoadErrorload-error.bs.tablestatus请求加载远程服务器数据失败时的事件
onClickRowclick-row.bs.tablerow, element|<br/>row<br/>element|当用户点击某一行的时候触发,参数包括:<br/>row:点击行的数据,<br/>element:tr 元素, 
field:点击列的 field 名称。
 
onDblClickRowdbl-click-row.bs.tablerow, $element当用户双击某一行的时候触发,参数包括:
row:点击行的数据,
field:点击列的 field 名称。
onClickCellclick-cell.bs.tablefield, value, row, element|<br/>fieldfield<br/>valuevalue<br/>row<br/>element|当用户点击某一列的时候触发,参数包括:<br/>field:点击列的field名称,<br/>value:点击列的value值,<br/>row:点击列的整行数据,<br/>element:td 元素。 
onDblClickCelldbl-click-cell.bs.tablefield, value, row, element|<br/>fieldfield<br/>valuevalue<br/>row<br/>element|当用户双击某一列的时候触发,参数包括:<br/>field:点击列的field名称,<br/>value:点击列的value值,<br/>row:点击列的整行数据,<br/>element:td 元素。 

关于事件,更详细文档请访问: 
http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/#事件

四、方法

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

// 获取表格所有已经勾选的行数据,为一个对象数组
var selects = $('#table').bootstrapTable('getSelections');
  • 1
  • 2
名称(method)参数描述
getOptionsnone返回表格的 Options。
getSelectionsnone返回所选的行,当没有选择任何行的时候返回一个空数组。
getAllSelectionsnone返回所有选择的行,包括搜索过滤前的,当没有选择任何行的时候返回一个空数组。
loaddata加载数据到表格中,旧数据会被替换。
appenddata添加数据到表格在现有数据之后。
prependdata插入数据到表格在现有数据之前。
insertRowparams插入新行,参数包括:
index: 要插入的行的 index。
row: 行的数据,Object 对象。
refreshparams更新远程服务器上的数据,可以设置{silent: true}来默认刷新,也可以设置{url: newUrl}来改变获取数据的url接口,也支持设置请求的参数{query: {foo: ‘bar’}},这点在表单查询时很有用
showLoadingnone显示数据加载状态
hideLoadingnone隐藏数据加载状态
checkindex选择一行,参数为行号,index从0开始
uncheckindex取消选择一行,参数为行号,index从0开始
destroynone销毁一个表格,直接把整个table删掉,需要重新开始渲染table
selectPagepage跳到指定的页。
prevPagenone跳到上一页。
nextPagenone跳到下一页。

更全文档请访问:http://bootstrap-table.wenzhixin.net.cn/zh-cn/documentation/#方法

阅读更多
想对作者说点什么?

博主推荐

换一批

没有更多推荐了,返回首页