前端表格插件 BootstrapTable API 参数查询。

最新推荐文章于 2025-07-26 21:52:33 发布
原创 最新推荐文章于 2025-07-26 21:52:33 发布 · 4.4k 阅读 · 8 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#前端

本文介绍了基于Bootstrap的jQuery表格插件BootstrapTable，包括其主要功能、优点、开始使用的步骤以及详细的组件文档，如表格参数、列参数、事件、方法等。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>

  • 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: "<%=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("加载数据失败");
      }

})

组件文档

一、表格参数

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

使用方式如下：

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

});

名称标签类型默认描述
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'
          },
          ... ...
      ]
});

名称标签类型默认描述
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("加载数据失败");
      }
});

Option 事件jQuery 事件参数描述
onLoadSuccessload-success.bs.tabledata请求加载远程服务器数据成功时的事件
onLoadErrorload-error.bs.tablestatus请求加载远程服务器数据失败时的事件
onClickRowclick-row.bs.table

row, element|当用户点击某一行的时候触发，参数包括：<br/>row：点击行的数据

，<br/>element|当用户点击某一行的时候触发，参数包括：<br/>row：点击行的数据，

<br/>element：tr 元素， 

field：点击列的 field 名称。		 
onDblClickRowdbl-click-row.bs.tablerow, $element当用户双击某一行的时候触发，参数包括：
row：点击行的数据，
field：点击列的 field 名称。
onClickCellclick-cell.bs.table

field, value, row, element|当用户点击某一列的时候触发，参数包括：<br/>field：点击列的field名称

，<br/>value：

点击列的value值，<br/>row：点击列的整行数据，<br/>element|当用户点击某一列的时候触发，

参数包括：<br/>field：点击列的field名称，<br/>value：点击列的value值，<br/>row：点击列的整行数据，<br/>element：td 元素。

 
onDblClickCelldbl-click-cell.bs.table

field, value, row, element|当用户双击某一列的时候触发

，参数包括：<br/>field：点击列的field名称，<br/>value：点击列的value值，<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跳到下一页。


名称属性类型默认值作用描述
showPaginationSwitchdata-show-pagination-switchBooleanfalse默认为false隐藏每页数据条数选择，设为true显示
minimumCountColumnsdata-minimum-count-columnsNumber1每列的下拉菜单最小数
idFielddata-id-fieldStringundefined表明哪个是字段是标识字段
uniqueIddata-unique-idStringundefined表明每行唯 一的标识符
cardViewdata-card-viewBooleanfalse默认false，设为true显示card view（卡片视图）
detailViewdata-card-viewBooleanfalse默认false，设为true显示detail view（细节视图）
detailFormatterdata-detail-formatterFunctionfunction(index, row, element){
return ”;}		前提：detailView设为true，启用了显示detail view。
      - 用于格式化细节视图
      - 返回一个字符串，通过第三个参数element直接添加到细节视图的cell（某一格）中，其中，element为目标cell的jQuery element
searchAligndata-search-alignStringright搜索框的位置，默认right（最右），可选left
buttonsAligndata-buttons-alignStringright工具栏按钮的位置，默认right（最右），可选left
toolbarAligndata-toolbar-alignStringleft自定义工具栏的位置，默认right（最右），可选left
paginationVAligndata-pagination-v-alignStringbottom分页条垂直方向的位置，默认bottom（底部），可选top、both（顶部和底部均有分页条）
paginationHAligndata-pagination-h-alignStringright分页条水平方向的位置，默认right（最右），可选left
paginationDetailHAligndata-pagination-detail-h-alignStringleft如果解译的话太长，举个例子，paginationDetail就是“显示第 1 到第 8 条记录，总共 15 条记录 每页显示 8 条记录”，默认left（最左），可选right
paginationPreTextdata-pagination-pre-textString‹还是举例子，如果你内容太多，底部最右边会显示：”‹ 1 2 3 4 5 ›”来选择页数，默认就是最左边那个符号，下同
paginationNextTextdata-pagination-next-textString›参考上面一条
clickToSelectdata-click-to-selectBooleanfalse默认false不响应，设为true则当点击此行的某处时，会自动选中此行的checkbox（复选框）或radiobox（单选按钮）
singleSelectdata-single-selectBooleanfalse默认false，设为true则允许复选框仅选择一行
toolbardata-toolbarString | NodeundefinedjQuery的选择器，例如：#toolbar，.toolbar，或者是DOM 结点
checkboxHeaderdata-checkbox-headerBooleantrue如果你有声明复选框，默认显示表头行的全选复选框，设为false隐藏（就是表格第一行的不显示，从第二行往后都显示）
maintainSelecteddata-maintain-selectedBooleanfalse设为true则保持被选的那一行的状态
sortabledata-sortableBooleantrue默认true，设为false禁用所有的行排列（也就是每列表头不会显示排序的按钮，这个需要在th声明data-sortable=”true”，写在js中只是启不启用）
slientSortdata-silent-sortBooleantrue前提：sidePagination设为server（服务端）
      - 默认true，设为false则静默排序数据
rowStyledata-row-styleFunction{}改变某行的格式，需要两个参数： 
      - row：此行的数据 
      - index：此行的索引
支持classes和css，用法如下： function rowStyle(row, index){
    return { classes: ‘text-nowrap another-class’,
css: {“color”: “blue”, “font-size”: “50px”}
}; }
rowAttributesdata-row-attributesFunction{}改变某行的属性，需要两个参数： 
      - row：此行的数据 
      - index：此行的索引
支持所有自定义的属性。
customSearchdata-custom-searchFunction$.noop自定义搜索功能（用来代替自带的搜索功能），需要一个参数： 
      - text：想要搜索的内容
用法如下：
function customSearch(text){
     //必须使用’this.data’对数据进行过滤（filter the data，感觉这个词也不用译），不要使用’this.options.data’ }
customSortdata-custom-sortFunction$.noop自定义排序功能（用来代替自带的排序功能），需要两个参数（可以参考前面）： 
      - sortName：需要排序的那列 
      - sortOrder：排序方式
用法：和上面一样，不用担心，注释也一模一样
localedata-localeStringundefined本地化（动词）。
本地化的文件必须被预加载，允许fallback（简单来说就是如果要使用的文件不可用，就可以用别的替代它，例如球场替补，没替补，如果有人受伤了，比赛不就废了），如果加载，将按如下顺序： 
      - 首先尝试加载的是指定的”本地化”文件 
      - 然后是’_’（下划线）写成’-‘（破折号），并且区域代码被大写的 
      - 然后是短区域代码（例如：用’fr’代替’fr-CA’） 
      - 最后使用的是剩下的本地化文件（当没有文件可加载则使用默认的）
如果剩余的undefined，或者是空字符，则使用最后一次使用的那个文件（当没有本地化文件可被加载，则使用自带的’en_US’）
footerStyledata-footer-styleFunction{}改变footer格式，需要两个参数： 
      - row：此行的数据 
      - index：此行的索引
支持classes和css，用法如下：
function rowStyle(value，row, index){
    return { css: { “font-weight”: “bold” } }; }

列的各项（Column options ）

定义在 jQuery.fn.bootstrapTable.columnDefaults 文件内

名称属性类型默认值作用描述
radiodata-radioBooleanfalse默认false不显示radio（单选按钮），设为true则显示，radio宽度是固定的
checkboxdata-checkboxBooleanfalse默认false不显示checkbox（复选框），设为true则显示，checkbox的每列宽度已固定
fielddata-fieldStringundefined是每列的字段名，不是表头所显示的名字，通过这个字段名可以给其赋值，相当于key，表内唯一
titledata-titleStringundefined这个是表头所显示的名字，不唯一，如果你喜欢，可以把所有表头都设为相同的名字
titleTooltipdata-title-tooltipStringundefined当悬浮在某控件上，出现提示
       - 参考 Bootstrap 提示工具（Tooltip）插件
classclass/data-classStringundefined没什么好说的，就是class
rowspanrowspan/data-rowspanNumberundefined每格所占的行数
colspancolspan/data-colspanNumberundefined每格所占的列数
aligndata-alignStringundefined每格内数据的对齐方式，有：left（靠左）、right（靠右）、center（居中）
haligndata-halignStringundefinedtable header（表头）的对齐方式，有：left（靠左）、right（靠右）、center（居中）
faligndata-falignStringundefinedtable footer（表脚，就这样译，任性，其实随便译啦，知道就好）的对齐方式，有：left（靠左）、right（靠右）、center（居中）
valigndata-valignStringundefined每格数据的对齐方式，有：top（靠上）、middle（居中）、bottom（靠下）
widthdata-widthNumber（单位：px或%）undefined每列的宽度。
       - 如果没有自定义宽度，那么宽度会根据内容的宽度自适应。
       - 如果表是左适应（left responsive）或者设置的宽度小于内容的宽度，那么，宽度还是会自适应（可以在class或其他的属性中使用 min-width 或 max-width）。
       - 你也可以使用”%”作为单位，这样的话，bootstapTable将按百分比划分，如果你想使用”pixels（像素值）”，你可以只写数字（只要不加”%”，单位默认”px”，不嫌麻烦，或者想更清晰，你也可以加上”px”）
sortabledata-sortableBooleanfalse默认false就默认显示，设为true则会被排序
orderdata-orderStringasc默认的排序方式为”asc（升序）”，也可以设为”desc（降序）”。
       - 与上面的结合使用，不然都不让排序了，你还考虑什么升降。
visibledata-visibleBooleantrue默认为true显示该列，设为false则隐藏该列。 
       - 还是很有用的，例如隐藏自定义index列，按某属性排序后会变乱，你可以读取某行的index来进行赋值
cardVisibledata-card-visibleBooleantrue默认为true显示该列，设为false则隐藏。
switchabledata-switchableBooleantrue默认为true显示该列，设为false则禁用列项目的选项卡。
clickToSelectdata-click-to-selectBooleantrue默认true不响应，设为false则当点击此行的某处时，不会自动选中此行的checkbox（复选框）或radiobox（单选按钮）
formatterdata-formatterFunctionundefined需要此列的对象。 
       某格的数据转换函数，需要三个参数： 
         -value： field（字段名） 
         -row：行的数据 
         -index：行的（索引）index
footerFormatterdata-footer-formatterFunctionundefined需要此列的对象。 
       某格的数据转换函数，需要一个参数： 
         -data： 所有行数据的数组 
       函数需要返回（return）footer某格内所要显示的字符串的格式，还要包括内容
eventsdata-eventsObjectundefined当某格使用formatter函数时，事件监听会响应，需要四个参数： 
         -event：jQuery事件（参考Events）。 
         - value：字段名 
         - row：行数据 
         - index：此行的index 
举个例子： 
     <th .. data-events=”operateEvent”> var operateEvents = {‘click .like’: function (e, value, row, index) {}};
sorterdata-sorterFunctionundefined自定义的排序函数，实现本地排序，需要两个参数： 
         - a：第一个字段名 
         - b：第二个字段名
sortNamedata-sort-nameStringundefined除了表头默认的sort-name或列的字段名，还可以使用自定义的sort-name 
       对特殊情况说明： 
         - 一个列显示的内容或许是”html”代码，如：<b><span style=”color:red”>abc</span></b>，但是被排列的是html代码中的内容（content）：abc
cellStyledata-cell-styleFunctionundefined对某格中显示样式（style）进行改变，需要三个函数： 
         - value：字段名 
         - row：行数据 
         - index：此行的index 
         - field：行的字段名
支持classes和css，用法如下： 
     function cellStyle(value, row, index, field) { return { classes: ‘text-nowrap another-class’, css: {“color”: “blue”, “font-size”: “50px”} }; }
searchabledata-searchableBooleantrue默认true，表示此列数据可被查询
searchFormatterdata-search-formatterBooleantrue默认true，可使用格式化的数据查询
escapedata-escapeBooleanfalse跳过插入HTML中的字符串，替换掉特殊字符（后面符号没有逗号）：&，<，>，"，`，'

事件（Events）

定义事件的格式：

$(‘#table’).bootstrapTable({ 
onEventName: function (arg1, arg2, …) { 
// … 
} });

$(‘#table’).on(‘event-name.bs.table’, function (e, arg1, arg2, …) { 
// … 
});

事件名定义在jQuery中的事件名参数作用描述
onAllall.bs.tablename, args当所有触发器被触发时都执行此函数，就是所有的事件都会触发该事件，参数包括： 
         - name：事件名 
         - args：事件的数据
onClickRowclick-row.bs.tablerow, $element, field当单击此行的任意一处，就会触发该事件，所需参数如下（只是按原文译过来的，在bootstraptable的js中不需要这些参数，因为单击该行就会获得一个row，row中包括此行所有数据，只要通过此行某列的字段名即可取出）： 
         - row：哪一行（从0开始） 
         - $element：该行（tr） 
         - field：当点击该行，你想获取此行哪一格的数据，field就是此列字段名 
         - 参考：Bootstrap Table 双击或单击行获取该行内容
onDblClickRowdbl-click-row.bs.tablerow, $element, field和上面差不多，当双击（666）此行的任意一处，就会触发该事件，所需参数如下（只是按原文译过来的，在bootstraptable的js中不需要这些参数，因为双击该行就会获得一个row，row中包括此行所有数据，只要通过此行某列的字段名即可取出）： 
         - row：哪一行（从0开始） 
         - $element：该行（tr） 
         - field：当点击该行，你想获取此行哪一格的数据，field就是此列字段名 
         - 参考：Bootstrap Table 双击或单击行获取该行内容
onClickCellclick-cell.bs.tablefield, value, row, $element当单击某一格，就会触发该事件，所需参数如下： 
         - field：此格所在列的字段名 
         - value：此格的数据 
         - $element：此行的此列，就是此格（td）
onDblClickCelldbl-click-cell.bs.tablefield, value, row, $element当双击某一格，就会触发该事件，所需参数如下： 
         - field：此格所在列的字段名 
         - value：此格的数据 
         - $element：此行的此列，就是此格（td）
onSortsort.bs.tablename, order当对某列进行排序时触发该事件，所需参数如下： 
         - name：所排序的列的字段名 
         - order：所排的顺序
onCheckcheck.bs.tablerow, $element当选择（check）此行时触发，所需的参数如下： 
         - row：所选择的行的字段名 
         - $element：此行的DOM元素
onUncheckuncheck.bs.tablerow, $element当取消选择（uncheck）此行时触发，所需的参数如下： 
         - row：所取消选择的行的字段名 
         - $element：此行的DOM元素
onCheckAllcheck-all.bs.tablerows当全选行时触发，所需的参数如下： 
         - rows：最近（newly）所选择的行的字段名的数组
onUncheckAlluncheck-all.bs.tablerows当取消全选行时触发，所需的参数如下： 
         - rows：之前或上次（previously）所选择的行的字段名的数组
onCheckSomecheck-some.bs.tablerows当选择（check）某些行（多行，rows）时触发，所需的参数如下： 
         - rows：之前或上次（previously）所选择的行的字段名的数组
onUncheckSomeuncheck-some.bs.tablerows当取消选择（uncheck）某些行（多行，rows）时触发，所需的参数如下： 
         - rows：之前或上次（previously）所选择的行的字段名的数组
onLoadSuccessload-success.bs.tabledata当所有数据被加载时触发
onLoadErrorload-error.bs.tablestatus, res当加载某些数据出现错误时触发
onColumnSwitchcolumn-switch.bs.tablefield, checked当某列改变是否可见的状态时触发
onColumnSearchcolumn-search.bs.tablefield, text当某列被查询时触发
onPageChangepage-change.bs.tablenumber, size当改变此页所显示的数据条数或改变页码时触发
onSearchsearch.bs.tabletext当查询此表时触发
onToggletoggle.bs.tablecardView当改变表的视图时触发
onPreBodypre-body.bs.tabledata当<tbody></tbody>中的内容没显示前触发
onPostBodypost-body.bs.tabledata当<tbody></tbody>中的内容被加载完后或者在你所用的DOM中有定义则被触发
onPostHeaderpost-header.bs.tablenone当<thead></thead>中的内容被加载完后或者在你所用的DOM中有定义则被触发
onExpandRowexpand-row.bs.tableindex, row, $detail当查看详细视图（点击查看detail的图标）时触发
onCollapseRowcollapse-row.bs.tableindex, row当关闭详细视图（再次点击查看detail的图标）时触发
onRefreshOptionsrefresh-options.bs.tableoptions当刷新各项后或在初始化表（也包括销毁了再初始化）之前触发
onResetViewreset-view.bs.table 当重置（reset）表的视图时触发
onRefreshrefresh.bs.tableparams当点击刷新按钮（refresh，不是浏览器的，而是表格右上角的刷新按钮）后触发

方法（Methods）

定义方法响应的语法 $('#table').bootstrapTable('method', parameter);

方法名参数描述举例
getOptionsnone返回各项的object$table.bootstrapTable(‘getOptions’);
      - 请查看： getOptions
getSelectionsnone返回被选择的行，当没有行被选择，则返回空数组（但并不是undefined，也不是null，是长度为0的空数组，所以可以判断长度是否大于0来确定是否选择了行）$table.bootstrapTable(‘getSelections’);
      - 请查看： getSelections
getAllSelectionsnone返回所有被选的行（原文中：contain search or filter，其实就是你选择的筛选之后的数据），当没有行被选择，则返回空数组$table.bootstrapTable(‘getAllSelections’);
      - 请查看： getAllSelections
showAllColumnsnone显示所有的列$table.bootstrapTable(‘showAllColumns’);
      - 就是显示所有的列，并没什么可说的
hideAllColumnsnone隐藏所有的列$table.bootstrapTable(‘hideAllColumns’);
      - 就是隐藏所有的列
getDatauseCurrentPage获取被加载的表的数据，如果你设置了使用当前页的数据（useCurrentPage），则返回当前页的数据$table.bootstrapTable(‘getData’);
      - 请查看： getData
getRowByUniqueIdid获取你想要的某行的数据（设置某行的id）$table.bootstrapTable(‘getRowByUniqueId’, 1);后面的1就是你要的那一行的ID
      - 请查看： getRowByUniqueId
loaddata向表中加载数据，原来的数据将被移除$table.bootstrapTable(‘load’, data);
      - 请查看： load

新版的优快云有bug，所以其余的Methods另写一个表格 [ Bootstraptable API 中文文档 ]

方法名参数描述举例
appenddata将数据追加在最后一行后$table.bootstrapTable(‘append’, data);data可以是数组
      - 请查看： append
prependdata也是追加，只是在第一行之前$table.bootstrapTable(‘prepend’, data);data可以是数组
      - 请查看： prepend
removeparams移除一行或多行你所选的数据$table.bootstrapTable(‘remove’, {field: ‘id’, values: ids}); 
      - id：所需移除的那一行（rows，一或多行）的字段 
      - values：被移除的行的数组 
      - 请查看： remove
removeAll-移除表中所有的数据$table.bootstrapTable(‘removeAll’); 
      - 请查看： removeAll
removeByUniqueId-移除某行数据（设置某行的id）$table.bootstrapTable(‘removeByUniqueId’, 1);后面的1就是你想移除的那一行的ID 
      - 请查看： removeByUniqueId
insertRowparams新增一行，所需的参数如下： 
      - index：你想插入到哪（只要愿意，想插哪就插哪，想插谁就插谁） 
      - row：你想插入的数据		$table.bootstrapTable(‘insertRow’, {index: 1, row: row}); 
      - 请查看： insertRow
updateRowparams更新行数据，所需的参数如下： 
      - index：所要更新的行的索引（index） 
      - row：你想换的新的数据		$table.bootstrapTable(‘updateRow’, {index: 1, row: row}); 
      - 请查看： updateRow 
      - 请查看： Bootstrap Table实现定时刷新数据
updateByUniqueIdparams更新某行数据，所需的参数如下： 
      - id：你想更新那行的id（唯一），（只要愿意，想换哪个换哪个） 
      - row：你想换的新的数据		$table.bootstrapTable(‘updateByUniqueId’, {id: 3, row: row}); 
      - 请查看： updateByUniqueId
showRowparams显示特定行，所需的参数至少包括下面所列的一个： 
      - id：所要显示的行的索引（index） 
      - uniqueId：那一行的id		$table.bootstrapTable(‘showRow’, {index:1}); 
      - 请查看： showRow/hideRow
hideRowparams隐藏特定行，所需的参数至少包括下面所列的一个： 
      - id：所要隐藏的行的索引（index） 
      - uniqueId：那一行的id		$table.bootstrapTable(‘hideRow’, {index:1}); 
      - 请查看： showRow/hideRow
getRowsHiddenboolean获取隐藏的行（官方原话很多，其实总结起来就前面那一句）$table.bootstrapTable(‘getRowsHidden’);

新版的优快云有bug，所以其余的Methods另写一个表格 [ Bootstrap Table API 中文文档 ]

方法名参数描述举例
mergeCellsoptions融合~（把多格合并为一格），所需的参数如下： 
      - index：所要合并的格所在行的索引（index） 
      - field：所在列的字段名 
      - rowspan：合并的行总数目 
      - colspan：合并的列总数目		$table.bootstrapTable(‘mergeCells’, {index: 1, field: ‘name’, colspan: 2, rowspan: 3});
      - 请查看： mergeCells
updateCellparams更新某格数据，所需的参数如下： 
      - index：所要合并的格所在行的索引（index） 
      - field：所在列的字段名 
      - value：要换的新的数据 
你也可以设置{reinit:false}来禁用表格的再次初始化		$table.bootstrapTable(‘updateCell’,{index:index,field:’id’,value:value});
refreshparams刷新服务端的数据： 
      - 可以设置{silent:true}来 偷偷地（<_<） 刷新 
      - 设置{url:newUrl,pageNumber:pageNumber,
pageSize:pageSize}改变请求的地址，页数，每页所显示的条数 
      - 可以设置{query:{foo:’bar’}}增加特定的参数		$table.bootstrapTable(‘refresh’);
      - 请查看： refresh
refreshOptionsoptions看例子吧      - 请查看： refreshOptions
resetSearchtext重置搜索的文本（text）      - 请查看： resetSearch
showLoadingnone显示正在加载……      - 请查看： showLoading/hideLoading
hideLoadingnone隐藏正在加载……      - 请查看： showLoading/hideLoading
checkAllnone选择当前页的所有行$table.bootstrapTable(‘checkAll’);
      - 请查看： checkAll/uncheckAll
uncheckAllnone取消选择当前页的所有行$table.bootstrapTable(‘uncheckAll’);
      - 请查看： checkAll/uncheckAll
checkInvertnone反向选择，不难理解吧$table.bootstrapTable(‘checkInvert’);
checkindex选择某一行，索引（index）从0开始$table.bootstrapTable(‘check’, 1);
      - 请查看： check/uncheck
uncheckindex取消选择某一行，索引（index）从0开始$table.bootstrapTable(‘uncheck’, 1);
      - 请查看： check/uncheck
checkByparams通过数组选择某一行，所需的参数如下： 
      - field：所要选的字段名 
      - values：所要选的那些值（数组）		官方没，啊，有例纸：
- $(“#table”).bootstrapTable(“checkBy”, { field:”field_name”, values:[“value1”,”value2”,”value3”]});
      - 请查看： checkBy/uncheckBy
uncheckByparams通过数组选择某一行，所需的参数如下： 
      - field：所要取消选择的字段名 
      - values：所要取消选择的那些值（数组）		$(“#table”).bootstrapTable(“uncheckBy”, { field:”field_name”, values:[“value1”,”value2”,”value3”]});
      - 请查看： checkBy/uncheckBy
resetViewparams改变表格的样式，例如改变表格的高度（height）$table.bootstrapTable(‘resetView’);
      - 请查看： resetView
resetWidthnone自动改变表头和表脚（就译成脚，任性）的宽度来适应每列的宽度$table.bootstrapTable(‘resetWidth’);
destroynone销毁表格 A！T！T！A！C！K！$table.bootstrapTable(‘destroy’);
      - 请查看： destroy
showColumnfield显示特定的列$table.bootstrapTable(‘showColumn’, ‘name’);
      - 请查看： showColumn/hideCoulumn
hideColumnfield隐藏特定的列$table.bootstrapTable(‘hideColumn’, ‘name’);
      - 请查看： showColumn/hideCoulumn

新版的优快云有bug，所以其余的Methods另写一个表格 [ Bootstrap table API 中文文档 ]

方法名参数描述举例
getHiddenColumns-获取所有隐藏的列$table.bootstrapTable(‘getHiddenColumns’);
getVisibleColumns-获取所有显示的列$table.bootstrapTable(‘getVisibleColumns’);
scrollTovalue滚……到哪个位置，单位是’px’，如果设为’bottom’，嗖，恭喜你已到表尾$table.bootstrapTable(‘scrollTo’, 0);
      - 请查看： scrollTo
getScrollPositionnone获取当前所滚到的位置，单位你懂得，就是’px’$table.bootstrapTable(‘getScrollPosition’);
filterBynone只能在客户端（client-side，相对server-side）这边用，过滤表中的数据 
例如： 
      - 可以设置{age:10}来只显示age为10的数据 
      - 不仅单的，你还可以双飞，甚至多p，设置{age: 10, hairColor: [“blue”, “red”, “green”]} ，这样你就得到了一群10岁的，头发颜色为蓝，红，绿的……数据		$table.bootstrapTable(‘filterBy’, { id: [1, 2, 3] });
      - 请查看： filterBy
selectPagepage跳转到特定的页面$table.bootstrapTable(‘selectPage’, 1);
      - 请查看： selectPage/prevPage/nextPage
prevPagenone跳转到上一页$table.bootstrapTable(‘prevPage’);
      - 请查看： selectPage/prevPage/nextPage
nextPagenone跳转到下一页$table.bootstrapTable(‘nextPage’);
      - 请查看： selectPage/prevPage/nextPage
togglePaginationnone词穷，请看例纸$table.bootstrapTable(‘togglePagination’);
      - 请查看： togglePagination
toggleViewnone改变视图$table.bootstrapTable(‘toggleView’);
      - 请查看： toggleView
expandRowindex可使用条件：detail view设为了true，不然无法使用视图功能，这个也没用 
      - 通过参数index来展开此列的详细视图		      - 请查看： expandRow-collapseRow
collapseRowindex可使用条件：detail view设为了true 
      - 通过参数index来关闭此列的详细视图		      - 请查看： expandRow-collapseRow
expandAllRowis subtable可使用条件：detail view设为了true 
      - 展开所有列的详细视图		$table.bootstrapTable(‘expandAllRow’); 
      - 参考上面的实例，上面是展开（折叠）某一行的视图，这个是所有行的
collapseAllRowis subtable可使用条件：detail view设为了true 
      - 关闭所有列的详细视图		$table.bootstrapTable(‘collapseAllRow’); 
      - 参考上面

本地化，切换为另一种语言（Localizations）

默认显示英文，如果想使用中文，首先引入：

<script src="bootstrap-table-zh-CN.js"></script>

然后是三种声明使用的方法（个人只使用第二、三种），如下：

  • 第一种：

    $.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN']);

  • 第二种：

    <table data-toggle="table" data-locale="zh-CN"></table>

  • 第三种：

    $('table').bootstrapTable({locale:'zh-CN'});

  • 以下说明除了数字外均为中文默认显示，本来不用写的，只要引入就显示中文了
名称参数默认说明
formatLoadingMessage-‘Loading, please wait…’“加载中，请等待……”
formatRecordsPerPagepageNumber‘%s records per page’“每页显示 15 条记录”
formatShowingRowspageFrom, pageTo, totalRows‘Showing %s to %s of %s rows’“显示第 1 到第 15 条记录”
formatDetailPaginationtotalRows‘Showing %s rows’“总共 15 条记录”
formatSearch-‘Search’“搜索”（占位符）
formatNoMatches-‘No matching records found’“没有找到匹配的记录”
formatRefresh-‘Refresh’“刷新”（鼠标悬浮显示的文字，下同）
formatToggle-‘Toggle’“切换”
formatColumns-‘Columns’“列”

有错请留言，看到后会及时更改，如果像那种翻译的行写成列或漏字等低级错误，看英文名称就知道有没有错了，主要就是为了让你们知道怎么用，会持续检查哪有误、漏译，如果认为有译得不妥的地方，也可以留言一起讨论，谢谢 




bootstrap-table中文API
08-05
bootstrap-table1.11.0官方的API，翻译成了中文，
Bootstrap Table API 中文版（完整翻译文档）
07-20
Bootstrap Table API 中文版（完整翻译文档） 基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。
前端开发者的利器：6款最强类EXCEL表格插件对比，轻松实现Excel级交互
最新发布
帆张芳显的博客
07-26 577
本文对比分析了6款主流前端电子表格解决方案：SpreadJS（高度兼容Excel）、Luckysheet（开源轻量）、ag-Grid（大数据处理）、智表zcell（性价比高）、Handsontable（深度定制）和SheetJS（专注文件解析）。各产品在功能完整性、兼容性、性能及适用场景上各具特色，建议开发者根据项目需求、技术栈和预算综合评估选择。多数产品提供试用版本，实际体验后决策更为可靠。
bootstrap-table API文档
04-19
bootstrap-table API文档
bootstrapTable实现表格内数据的添加、删除、修改、查询
09-11
BootstrapTable是一个基于Bootstrap的jQuery表格插件，它提供了一种便捷的方式来展示和操作数据。通过使用BootstrapTable，开发者能够轻松实现表格数据的增、删、改、查（CRUD）功能，而无需从零开始编写大量的前端...
bootstrap插件_table可编辑表格_demo
05-25
在Bootstrap中，表格（Table）是常见的数据展示组件，而“bootstrap插件_table可编辑表格_demo”则是Bootstrap表格功能的一个扩展，它允许用户直接在表格内进行编辑，提供了更加交互式的用户体验。 Bootstrap表格的...
bootstrap_table api
06-29
Bootstrap Table 是一个基于Bootstrap框架的前端插件，用于创建功能丰富的、美观的表格。这个API文档为开发者提供了详细的指引，帮助他们充分利用这个工具来提升网页的交互性和数据展示能力。以下是一些关于...
bootstrap-table+treegrid实现树形表格
10-16
Bootstrap-table是基于Bootstrap框架的表格插件，它提供了丰富的API接口，使开发者可以方便地控制表格的各种行为和展示方式。Treegrid是一个用于实现树形结构数据展示的插件，它能够将普通的表格数据转换为树形结构...
ABP入门系列应用BootstrapTable表格插件
10-20
BootstrapTable表格插件是基于Bootstrap框架开发的一个jQuery表格插件，它允许用户通过简单的配置实现包括单选、多选、排序、分页、编辑、导出、过滤等丰富的表格功能。BootstrapTable具有轻量级、功能丰富的特点，...
bootstrap table组件API
08-10
NULL 博文链接：https://xiayanghui.iteye.com/blog/2220945
bootstrap table中文API
04-04
bootstrapTable时是一款非常好用的Bootstrap插件，方便我们对数据表格的操作；但好的东西必须有好的 API呀，这个一定能满足你！！
Bootstrap Table API 中文版（完整翻译文档）.docx
07-21
Bootstrap Table API 中文版（完整翻译文档）,表、列、事件（Events）、方法（Methods）等api的说明
Bootstrap v3.3.7及Bootstrap Table API 中文版
10-24
Bootstrap 是由 Twitter 的 Mark Otto 和 Jacob Thornton 开发的一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap 是基于 HTML、CSS、JAVASCRIPT 的。 Bootstrap Table API 中文版是一款讲解非常详细的Bootstrap CHM中文文档，Bootstrap V3.3.7是一款简洁、直观、强悍的前端开发框架，让web开发更迅速、简单。
Bootstrap Table从服务器加载数据进行显示的实现方法
10-21
Bootstrap-Table是一个Boostrap的表格插件，能够将JSON数据直接显示在表格中。接下来通过本文给大家分享Bootstrap Table从服务器加载数据进行显示的实现方法，感兴趣的朋友一起看看吧
bootstrapTable api
杜海的博客
11-17 4371
表格参数 Edit on GitHub 表格的参数定义在 jQuery.fn.bootstrapTable.defaults。 名称 标签 类型 默认 描述 - data-toggle String 'table' 不用写 JavaScript 直接启用表格。 c
BootstrapTable
joker6295的博客
10-16 262
表格参数： 名称 标签 类型 默认 描述 - data-toggle String ‘table’ 不用写 JavaScript 直接启用表格。 classes data-classes String ‘table table-hover’ 表格的类名称。默认情况下，表格是有边框的，你可以添加 ‘table-no-bordered’ 来删除表格的边框样式。 sortClass data-sort-class S
jQuery表格插件bootstrap-table使用教程
Bootstrap-table-master是一个基于jQuery的表格插件，它为开发者提供了丰富的表格操作功能和用户界面定制选项。该插件允许用户以非常简便的方式创建美观且响应式的表格，同时增强了表格的数据展示、排序、过滤、分页...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值