Bootstrap Table API 中文版（完整翻译文档）

最新推荐文章于 2024-03-18 15:08:47 发布
最新推荐文章于 2024-03-18 15:08:47 发布
阅读量10w+ 收藏 395
点赞数 109
分类专栏： JavaScript Tras 文章标签： bootstrap-table api bootstrap api 中文文档 bootstrap表格 api
本文为博主原创文章，未经博主允许不得转载，博主空间https://blog.csdn.net/S_clifftop @13805064305
本文链接：https://blog.csdn.net/S_clifftop/article/details/77937356
版权

Bootstrap table API 中文文档（完整翻译文档）
*$(’#table’).bootstrapTable({});
*看网上有中文版的，但有些就是字面直接译过来了，而且有的就没有翻译，那就打算自己再翻译一遍，每一条会尽
*最大可能结合尽可能多资料翻译，如果发现译的内容比英文多，是添加了更详细的说明，表的名称，属性，类型，
*默认值不翻译，例如：“class”、"id"等不翻译。
*有错请提出，会及时改正，谢谢。
如果想转请评论留个言并注明原博 @Sclifftop https://blog.csdn.net/S_clifftop/article/details/77937356

给我评论点赞，听到没有，臭弟弟

  • “名称”可以写在$('#table').bootstrapTable({});的大括号中，可以定义一些想要的值，如：
$("#realTime_Table").bootstrapTable({
  	  search: true,
      pagination: false,
      pageSize: 15,
      pageList: [5, 10, 15, 20],
      showColumns: true,
      showRefresh: false,
      showToggle: true,
      locale: "zh-CN",
      striped: true
});
  • “属性”放在声明表内，如：
<!--例子应该很好看懂Table options和Column options 所放的位置不同，随便写的，主要为了懂得如何用--!>

 <table id="realTime_Table" data-click-to-select="true" class="table table-bordered" data-page-size="20">
      <thead>
          <tr >
              <th data-sortable="true" data-field="realTimeDate">日期</th>
              <th data-sortable="true" data-field="newPlayerNum">新增用户</th>
              <th data-sortable="true" data-field="activePlayerNum">活跃用户</th>
          </tr>
      </thead>
      <tbody>
      </tbody>
</table>
  • 如果名称和属性功能类似，则任意一个地方就够了，不用重复定义，有的属性写在js里比名称写在声明表中更为简单，or vice verse（有的属性必须要写，对应的名称只是表示是否启用那个属性）

目录

表的各项(Table options )

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

名称属性类型默认值作用描述
-data-toggleStringtable只要引入 jquery、bootstrap 、bootstrap-table的包，不用在js里面定义就可以使用
默认有写data-toggle="table",data-toggle应该知道吧，常用的有"tooltip、popover等等"，这边就不说了
classesdata-classesStringtable table-hover表的class属性，如果没有自己定义，则默认有边框，并且当鼠标悬浮在那一行，背景会变为浅灰色.
sortClassdata-sort-classStringundefined声明表格td的class名，代表此列元素的class名将被排序
heightdata-heightNumberundefined表格的高度
undefinedTextdata-undefined-textString - 当不写任何内容默认显示'-'
stripeddata-stripedBooleanfalse默认false，当设为true，则每行表格的背景会显示灰白相间
sortNamedata-sort-nameStringundefined定义哪一列的值会被排序，写data-field的自定义名，没定义默认都不排列，同下面的sortOrder结合使用，没写的话列默认递增（asc）
sortOrderdata-sort-orderStringasc同上面的结合使用，默认递增（asc），也可设为递减（desc）
sortStabledata-sort-stableBooleanfalse（别看错了，是sortStable，sortable在下面）默认false，设为true，则和sort部分一样，区别是：在排序过程中，如果存在相等的元素，则原来的顺序不会改变。原文还有一句：（如果你把此属性设为了true）我们将为此行添加'_position'属性
iconsPrefixdata-icons-prefixStringglyphicon定义字体库 ('Glyphicon' or 'fa' for FontAwesome),使用"fa"时需引用 FontAwesome，并且配合 icons 属性实现效果 Glyphicon 集成于Bootstrap可免费使用
iconSizedata-icon-sizeStringundefined定义的图标大小：
      - undefined =>默认表示默认的按钮尺寸（btn）
      - xs   =>超小按钮的尺寸（btn-xs）
      - sm  =>小按钮的尺寸（btn-sm）
      - lg    =>大按钮的尺寸（btn-lg）
buttonsClassdata-buttons-classStringdefault按钮的类，默认为default。
      - 可选的有：primary、danger、warning等等
      - 写了之后会自动转换为btn-primary（蓝色）、btn-danger（红色）、btn-warning（黄色）等格式，所以前面不要再加"btn-"，默认为btn-default（白色）
      - 参考菜鸟教程：Bootstrap 按钮
iconsdata-iconsObject{ paginationSwitchDown: 'glyphicon-collapse-down icon-chevron-down',
paginationSwitchUp: 'glyphicon-collapse-up icon-chevron-up',
refresh: 'glyphicon-refresh icon-refresh',
toggle: 'glyphicon-list-alt icon-list-alt',
columns: 'glyphicon-th icon-th',
detailOpen: 'glyphicon-plus icon-plus',
detailClose: 'glyphicon-minus icon-minus'
}		定义在工具栏、分页、详细视图中使用的图标
      - 没办法解释，请参考菜鸟教程的图标：Bootstrap 字体图标
columns-Array[]默认空数组，在JS里面定义，field即data-field，title就是每列表头名等等。
      - 请参考：查Bootstrap-table的Usage
data-Array[]被加载的数据。
      - 也就是从服务器获取的数据，通过"."运算符获取，例如"data.date/data.anything"，后面是服务器发来的字段名
dataFielddata-data-fieldStringrows      - 名称写自己定义的每列的字段名，也就是key，通过key才能给某行的某列赋value。
      - 原文：获取每行数据json内的key
      - 例如：{"name":"zz","age":20}，name和age就是key，如果这是从服务端请求的json，那可能和每列定义的字段不同，但都是唯一的
ajaxdata-ajaxFunctionundefined      - ajax方法，和jQuery的ajax方法类似
      - 参考 BootstrapTable实现定时刷新数据，只是参考，因为那是jQuery的ajax方法
methoddata-methodStringget向服务器请求远程数据的方式，默认为'get'，可选'post'
urldata-urlStringundefined向服务器请求的url。
      - 例如：server + "get_app_player"和server + 'get_channel_list'，两者都是向server（server是自己定义的，例如"http://kanshakan.nichousha.com/"）请求数据，只是接口不同，一个是请求该游戏玩家信息，一个是请求渠道信息
下面看看原文：
      - 向远程站点请求数据的URL
      - 请记住，如果服务端分页选项使用了自定义的，那么请求的服务器响应格式是不同的，参考下面两个数据格式：
      Without server-side pagination（没有启用服务端分页 - data1.json）
      With server-side pagination（启用服务端分页 - data2.json）
cachedata-cacheBoolean true 默认缓存ajax请求，设为false则禁用缓存
contentTypedata-content-typeString application/json请求数据的contentType（内容类型），用于定义文件的类型，决定接收方以什么形式读取这个文件。
      - 默认application/json，用来告诉接收端从服务器发来的消息是序列化后的json字符串
dataTypedata-data-typeStringjson期望从服务器获取的数据的类型，默认为json格式字符串
ajaxOptionsdata-ajax-optionsObject{}向服务器请求ajax时的附加项，默认无附加
      - 参考 jQuery.ajax()
queryParamsdata-query-paramsFunction 
function(params){
return params;}
当请求数据时，你可以通过修改queryParams向服务器发送其余的参数。
      - queryParamsType="limit"，它的参数包括：limit，offset，search，sort，order Else
      - params包括：pageSize，pageNumber，searchText，sortName，sortOrder
      - 当return false，请求则终止
queryParamsTypedata-query-params-typeStringlimit默认"limit"，设置该属性用来发送符合RESTful格式的参数
responseHandlerdata-response-handlerFunction
function(res){
return res;}
在加载服务器发送来的数据之前，处理数据的格式，参数res表示the response data（获取的数据）
paginationdata-paginationBooleanfalse默认为false，表格的底部工具栏不会显示分页条（pagination toolbar），可以设为true来显示
paginationLoopdata-pagination-loopBooleantrue默认true，分页条无限循环
onlyInfoPaginationdata-only-info-paginationBooleanfalse前提：pagination设为true，启用了分页功能。
      - 默认false，设为true显示总记录数
sidePaginationdata-side-paginationStringclient设置在哪进行分页，默认"client"，可选"server"，如果设置 "server"，则必须设置url或者重写ajax方法
      - 请记住，如果服务端分页选项使用了自定义的，那么请求的服务器响应格式是不同的，参考下面两个数据格式：
      Without server-side pagination（没有启用服务端分页）
      With server-side pagination（启用服务端分页）
pageNumberdata-page-numberNumber1前提：pagination设为true，启用了分页功能。
      - 默认第1页，用于设置初始的页数
pageSizedata-page-sizeNumber10前提：pagination设为true，启用了分页功能。
      - 默认每页显示10条记录，用于设置每页初始显示的条数
pageListdata-page-listArray[10, 25, 50, 100]前提：pagination设为true，启用了分页功能。
      - 默认为[10, 25, 50, 100]，即可以选择"每页显示10/25/50/100条记录"，用于设置选择每页显示的条数
selectItemNamedata-select-item-nameStringbtSelectItemradio（单选按钮）或checkbox（复选框）的字段名
smartDisplaydata-smart-displayBooleantrue默认为true，会 机智地（<_<） 根据情况显示分页（pagination）或卡片视图（card view）
escapedata-escapeBooleanfalse 跳过插入HTML中的字符串，替换掉特殊字符（后面符号没有逗号）：&，<，>，"，`，'
searchdata-searchBooleanfalse默认false不显示表格右上方搜索框 ，可设为true，在搜索框内只要输入内容即开始搜索
searchOnEnterKeydata-search-on-enter-keyBooleanfalse默认false不启用，设为true启用，比功能是与上面相比，在搜索框内输入内容并且按下回车键才开始搜索
strictSearchdata-strict-searchBooleanfalse设为true，开启精确搜索
searchTextdata-search-textString""前提：search设为true，启用了搜索功能。
      - 搜索框初始显示的内容，默认空字符串
searchTimeOutdata-search-time-outNumber500前提：search设为true，启用了搜索功能。
      - 设置搜索文件的超时时间（原文：Set timeout for search fire，不知道是写错了还是我知识面太窄，"search fire"是什么意思，官方API错了？给我整蒙逼了）
trimOnSearchdata-trim-on-searchBooleantrue默认true，自动忽略空格
showHeaderdata-show-headerBooleantrue默认为true显示表头，设为false隐藏
showFooterdata-show-footerBooleanfalse默认为false隐藏表尾，设为true显示
showColumnsdata-show-columnsBooleanfalse默认为false隐藏某列下拉菜单，设为true显示
showRefreshdata-show-refreshBooleanfalse默认为false隐藏刷新按钮，设为true显示
showToggledata-show-toggleBooleanfalse默认为false隐藏视图切换按钮，设为true显示

新版的CSDN有bug，所以其余的Table options另写一个表格 [ Bootstrap Table API 中文版（完整翻译文档） ]

名称属性类型默认值作用描述
showPaginationSwitchdata-show-pagination-switchBooleanfalse默认为false隐藏每页数据条数选择，设为true显示
minimumCountColumnsdata-minimum-count-columnsNumber1每列的下拉菜单最小数
idFielddata-id-fieldStringundefined表明哪个是字段是标识字段
uniqueIddata-unique-idStringundefined表明每行唯 一的标识符
cardViewdata-card-viewBooleanfalse默认false，设为true显示card view（卡片视图）
detailViewdata-detail-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"} }; }
searchable data-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.table field, 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）所选择的行的字段名的数组
onCheckSome check-some.bs.tablerows当选择（check）某些行（多行，rows）时触发，所需的参数如下：
         - rows：之前或上次（previously）所选择的行的字段名的数组
onUncheckSomeuncheck-some.bs.tablerows当取消选择（uncheck）某些行（多行，rows）时触发，所需的参数如下：
         - rows：之前或上次（previously）所选择的行的字段名的数组
onLoadSuccess load-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）表的视图时触发
onRefresh refresh.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

新版的CSDN有bug，所以其余的Methods另写一个表格 [ Bootstrap Table 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');

新版的CSDN有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

新版的CSDN有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
expandAllRows
新版有更改（原来为"expandAllRow"），下同
感谢 @zhq449681061		is subtable可使用条件：detail view设为了true
      - 展开所有列的详细视图		$table.bootstrapTable('expandAllRows');
      - 参考上面的实例，上面是展开（折叠）某一行的视图，这个是所有行的
collapseAllRowsis subtable可使用条件：detail view设为了true
      - 关闭所有列的详细视图		$table.bootstrapTable('collapseAllRows');
      - 参考上面

本地化，切换为另一种语言(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'});

  • 以下说明除了数字外均为中文默认显示，本来不用写的，只要引入就显示中文了，下面数字我就默认15，这个实际要看你设置的是多少
名称参数默认说明
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'“列”

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

自己做的微信小程序工具 —维尼聚合工具（ 查地铁、线路规划、二维码生成、计算器、指南针、证件识别等等）

维尼聚合工具

其他相关：


S_clifftop
关注
  • 109
    点赞
  • 踩
  • 395
    收藏
    觉得还不错? 一键收藏
  • 46
    评论
专栏目录
Bootstrap3开发环境包含中文api文档
01-23
注:Bootstrap包含中文api文档,源码文件和环境query文件在src文件夹
Bootstrap Table 中文文档（最终完整翻译版）
BlankTe的博客
10-23 3626
注:这是本人整理的文档,如有出入,请留言!谢谢
bootstrap表格API文档
最新发布
weixin_40992252的博客
03-18 960
【代码】bootstrap表格API文档。
Bootstrap-学习文档
m0_73442777的博客
04-04 642
Bootstrap 是一个用于快速开发 Web 应用程序和网站的前端框架。Bootstrap是前端开发中比较受欢迎的框架，简洁且灵活。它基于HTML、CSS和JavaScript，HTML定义页面元素，CSS定义页面布局，而JavaScript负责页面元素的响应。Bootstrap将HTML、CSS和JavaScript封装成一个个功能组件，用起来简洁灵活，使得 Web 开发更加快捷。
Bootstrap Table 中文文档（完整翻译版）
chijiansong的博客
05-27 2500
表格参数： 名称 标签 类型 默认 描述 - data-toggle String ‘table’ 不用写 JavaScript 直接启用表格。 classes data-classes String ‘table table-hover’ 表格的类名称。默认情况下，表格是有边框的，你可以添加 ‘table-no-bordered’ 来删除表格的边框样式。 sortClass data-sort-class S
Bootstrap 5 中文文档 （简体中文）
m0_74293254的博客
12-03 531
Bootstrap 5 中文文档 （简体中文）：
Bootstrap Table中文文档
10-08
bootstrap table各个属性值的详细说明，中文翻译版本。
BootstrapTable 非常有用的中文文档
shinergx的博客
11-10 741
bootstrap table文档
前端表格插件 BootstrapTable API 参数查询。
Kally_Wang的专栏
07-03 4256
官网地址： http://bootstrap-table.wenzhixin.net.cn/zh-cn/Github地址： https://github.com/wenzhixin/bootstrap-table官网介绍： 基于 Bootstrap 的 jQuery 表格插件，通过简单的设置，就可以拥有强大的单选、多选、排序、分页，以及编辑、导出、过滤（扩展）等等的功能。主要功能支持 Bootst...
Bootstrap Table API 中文版（完整翻译文档）.docx
07-21
Bootstrap Table API 中文版（完整翻译文档）,表、列、事件（Events）、方法（Methods）等api的说明
bootstrap_table api
06-29
一份很好用的api文档 对于开发后台帮助恒大 若著作权侵权了您的资源，请联系我进行下架处理 资源源于网络
rightvaluestest.github.io:Rightvalues 是针对光谱右侧人群的测验，基于 LeftValues 测验，旨在确定您在右翼光谱中的位置，作为 LeftValues 的替代方案。 如果你不是右派，这个测验显然不适合你，你应该寻找LeftValues。 您将看到一个陈述，然后您将回答您对该陈述的看法，从非常同意到非常不同意，每个答案都会略微影响您的分数。 在测验结束时，您的答案将与每个值的最大可能值进行比较，从而为您提供一个百分比
07-24
正确的价值观测试 Rightvalues 是针对光谱右侧人群的测验，基于 LeftValues 测验，旨在确定您在右翼光谱中的位置，作为 LeftValues 的替代方案。 如果你不是右派，这个测验显然不适合你，你应该寻找LeftValues。 您将看到一个陈述，然后您将回答您对该陈述的看法，从非常同意到非常不同意，每个答案都会略微影响您的分数。 在测验结束时，您的答案将与每个值的最大可能值进行比较，从而为您提供一个百分比。 此测验由 Github 用户“rightvaluestest”制作。
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 选中某几行，获取其数据
热门推荐
Sclifftop - 保安大队长
12-16 4万+
Bootstrap Table 获取选中某几行的和 如下图所示，怎样选择任意行，求其和或干其他坏事，(图片有码高清，数据被我隐藏了，看方法就好) 点击上面“获取选中月份总量”按钮，弹出下面的界面，div什么的我不用说了吧 下面是实现方法： 1、想要选择任意行（只想选一行，用onClick就行了，底部有另一篇），得先有复选框，复选框是bootstrap table组件自带的，有在表中和js中显
微信小程序 — 怎么获得view中的文本、id等等
Sclifftop - 保安大队长
02-03 4万+
微信小程序-怎么获得view中的文本、id等等？ 取id很简单，取text两种情形，分开来说，先说第一个： 一、通过自定义data-text获取与定义一样的文本 view id=&amp;amp;quot;outer&amp;amp;quot; catchtap='pressView'&amp;amp;gt; view class=&amp;amp;quot;top&amp;amp;quot;&amp;amp;gt;
bootstraptable文档
04-07
Bootstrap Table是一个基于Bootstrap的可扩展表格插件，它可以轻松地将数据展示在表格中，支持排序、搜索、分页等功能，还可以通过自定义模板来实现复杂的表格布局。 Bootstrap Table的使用非常简单，只需要引入相关的CSS和JS文件，然后在HTML中添加一个表格容器，即可通过JavaScript来初始化表格，如下所示： ```html <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.css"> <script src="https://cdn.bootcdn.net/ajax/libs/jquery/3.6.0/jquery.min.js"></script> <script src="https://cdn.bootcdn.net/ajax/libs/bootstrap-table/1.18.3/bootstrap-table.min.js"></script> <div class="table-responsive"> <table id="table"></table> </div> <script> $(function() { $('#table').bootstrapTable({ data: [{ id: 1, name: 'John', age: 30 }, { id: 2, name: 'Jane', age: 25 }] }); }); </script> ``` 在初始化表格时，可以通过传递一个包含数据的数组来显示数据，也可以通过设置url属性来从服务器获取数据。此外，Bootstrap Table还支持通过columns属性来定义表格的列，以及通过options属性来配置表格的参数。 除了基本用法外，Bootstrap Table还提供了丰富的API和事件，可以通过它们来实现更加复杂的功能。例如，可以通过API来获取表格中的数据、展示、隐藏某些列、刷新数据等；也可以通过事件来监听表格的行选中、排序、搜索、分页等操作，从而实现更加灵活和交互性的表格。

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论 46
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值