前端框架----bootstraptable api
表的各项(Table options )
定义在 jQuery.fn.bootstrapTable.defaults 文件内
名称 | 属性 | 类型 | 默认值 | 作用描述 |
---|---|---|---|---|
- | data-toggle | String | table |
只要引入 jquery、bootstrap 、bootstrap-table的包,不用在js里面定义就可以使用 默认有写data-toggle=”table”,data-toggle应该知道吧,常用的有”tooltip、popover等等”,这边就不说了 |
classes | data-classes | String | table table-hover | 表的class属性,如果没有自己定义,则默认有边框,并且当鼠标悬浮在那一行,背景会变为浅灰色. |
sortClass | data-sort-class | String | undefined | 声明表格td的class名,代表此列元素的class名将被排序 |
height | data-height | Number | undefined | 表格的高度 |
undefinedText | data-undefined-text | String | - | 当不写任何内容默认显示’-‘ |
striped | data-striped | Boolean | false | 默认false,当设为true,则每行表格的背景会显示灰白相间 |
sortName | data-sort-name | String | undefined | 定义哪一列的值会被排序,写data-field的自定义名,没定义默认都不排列,同下面的sortOrder结合使用,没写的话列默认递增(asc) |
sortOrder | data-sort-order | String | asc | 同上面的结合使用,默认递增(asc),也可设为递减(desc) |
sortStable | data-sort-stable | Boolean | false | (别看错了,是sortStable,sortable在下面)默认false,设为true,则和sort部分一样,区别是:在排序过程中,如果存在相等的元素,则原来的顺序不会改变。原文还有一句:(如果你把此属性设为了true)我们将为此行添加’_position’属性 |
iconsPrefix | data-icons-prefix | String | glyphicon | 定义字体库 (‘Glyphicon’ or ‘fa’ for FontAwesome),使用”fa”时需引用 FontAwesome,并且配合 icons 属性实现效果 Glyphicon 集成于Bootstrap可免费使用 |
iconSize | data-icon-size | String | undefined |
定义的图标大小: - undefined =>默认表示默认的按钮尺寸(btn) - xs =>超小按钮的尺寸(btn-xs) - sm =>小按钮的尺寸(btn-sm) - lg =>大按钮的尺寸(btn-lg) |
buttonsClass | data-buttons-class | String | default |
按钮的类,默认为default。 - 可选的有:primary、danger、warning等等 - 写了之后会自动转换为btn-primary(蓝色)、btn-danger(红色)、btn-warning(黄色)等格式,所以前面不要再加”btn-“,默认为btn-default(白色) - 参考菜鸟教程:Bootstrap 按钮 |
icons | data-icons | Object |
{ 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”,后面是服务器发来的字段名 |
dataField | data-data-field | String | rows |
- 名称写自己定义的每列的字段名,也就是key,通过key才能给某行的某列赋value。 - 原文:获取每行数据json内的key - 例如:{“name”:”zz”,”age”:20},name和age就是key,如果这是从服务端请求的json,那可能和每列定义的字段不同,但都是唯一的 |
ajax | data-ajax | Function | undefined |
- ajax方法,和jQuery的ajax方法类似 - 参考 BootstrapTable实现定时刷新数据,只是参考,因为那是jQuery的ajax方法 |
method | data-method | String | get | 向服务器请求远程数据的方式,默认为’get’,可选’post’ |
url | data-url | String | undefined |
向服务器请求的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) |
cache | data-cache | Boolean | true | 默认缓存ajax请求,设为false则禁用缓存 |
contentType | data-content-type | String | application/json |
请求数据的contentType(内容类型),用于定义文件的类型,决定接收方以什么形式读取这个文件。 - 默认application/json,用来告诉接收端从服务器发来的消息是序列化后的json字符串 |
dataType | data-data-type | String | json | 期望从服务器获取的数据的类型,默认为json格式字符串 |
ajaxOptions | data-ajax-options | Object | {} |
向服务器请求ajax时的附加项,默认无附加 - 参考 jQuery.ajax() |
queryParams | data-query-params | Function |
function(params){ return params;} |
当请求数据时,你可以通过修改queryParams向服务器发送其余的参数。 - queryParamsType=”limit”,它的参数包括:limit,offset,search,sort,order Else - params包括:pageSize,pageNumber,searchText,sortName,sortOrder - 当return false,请求则终止 |
queryParamsType | data-query-params-type | String | limit | 默认”limit”,设置该属性用来发送符合RESTful格式的参数 |
responseHandler | data-response-handler | Function |
function(res){ return res;} |
在加载服务器发送来的数据之前,处理数据的格式,参数res表示the response data(获取的数据) |
pagination | data-pagination | Boolean | false | 默认为false,表格的底部工具栏不会显示分页条(pagination toolbar),可以设为true来显示 |
paginationLoop | data-pagination-loop | Boolean | true | 默认true,分页条无限循环 |
onlyInfoPagination | data-only-info-pagination | Boolean | false |
前提:pagination设为true,启用了分页功能。 - 默认false,设为true显示总记录数 |
sidePagination | data-side-pagination | String | client |
设置在哪进行分页,默认”client”,可选”server”,如果设置 “server”,则必须设置url或者重写ajax方法 - 请记住,如果服务端分页选项使用了自定义的,那么请求的服务器响应格式是不同的,参考下面两个数据格式: Without server-side pagination(没有启用服务端分页) With server-side pagination(启用服务端分页) |
pageNumber | data-page-number | Number | 1 |
前提:pagination设为true,启用了分页功能。 - 默认第1页,用于设置初始的页数 |
pageSize | data-page-size | Number | 10 |
前提:pagination设为true,启用了分页功能。 - 默认每页显示10条记录,用于设置每页初始显示的条数 |
pageList | data-page-list | Array | [10, 25, 50, 100] |
前提:pagination设为true,启用了分页功能。 - 默认为[10, 25, 50, 100],即可以选择”每页显示10/25/50/100条记录”,用于设置选择每页显示的条数 |
selectItemName | data-select-item-name | String | btSelectItem | radio(单选按钮)或checkbox(复选框)的字段名 |
smartDisplay | data-smart-display | Boolean | true | 默认为true,会 机智地(<_<) 根据情况显示分页(pagination)或卡片视图(card view) |
escape | data-escape | Boolean | false | 跳过插入HTML中的字符串,替换掉特殊字符(后面符号没有逗号):&,<,>,",`,' |
search | data-search | Boolean | false | 默认false不显示表格右上方搜索框 ,可设为true,在搜索框内只要输入内容即开始搜索 |
searchOnEnterKey | data-search-on-enter-key | Boolean | false | 默认false不启用,设为true启用,比功能是与上面相比,在搜索框内输入内容并且按下回车键才开始搜索 |
strictSearch | data-strict-search | Boolean | false | 设为true,开启精确搜索 |
searchText | data-search-text | String | “” |
前提:search设为true,启用了搜索功能。 - 搜索框初始显示的内容,默认空字符串 |
searchTimeOut | data-search-time-out | Number | 500 |
前提:search设为true,启用了搜索功能。 - 设置搜索文件的超时时间(原文:Set timeout for search fire,不知道是写错了还是我知识面太窄,”search fire”是什么意思,官方API错了?给我整蒙逼了) |
trimOnSearch | data-trim-on-search | Boolean | true | 默认true,自动忽略空格 |
showHeader | data-show-header | Boolean | true | 默认为true显示表头,设为false隐藏 |
showFooter | data-show-footer | Boolean | false | 默认为false隐藏表尾,设为true显示 |
showColumns | data-show-columns | Boolean | false | 默认为false隐藏某列下拉菜单,设为true显示 |
showRefresh | data-show-refresh | Boolean | false | 默认为false隐藏刷新按钮,设为true显示 |
showToggle | data-show-toggle | Boolean | false | 默认为false隐藏视图切换按钮,设为true显示 |
新版的CSDN有bug,所以其余的Table options另写一个表格 [ BootstrapTable 文档 ]
名称 | 属性 | 类型 | 默认值 | 作用描述 |
---|---|---|---|---|
showPaginationSwitch | data-show-pagination-switch | Boolean | false | 默认为false隐藏每页数据条数选择,设为true显示 |
minimumCountColumns | data-minimum-count-columns | Number | 1 | 每列的下拉菜单最小数 |
idField | data-id-field | String | undefined | 表明哪个是字段是标识字段 |
uniqueId | data-unique-id | String | undefined | 表明每行唯 一的标识符 |
cardView | data-card-view | Boolean | false | 默认false,设为true显示card view(卡片视图) |
detailView | data-card-view | Boolean | false | 默认false,设为true显示detail view(细节视图) |
detailFormatter | data-detail-formatter | Function |
function(index, row, element){ return ”;} |
前提:detailView设为true,启用了显示detail view。 - 用于格式化细节视图 - 返回一个字符串,通过第三个参数element直接添加到细节视图的cell(某一格)中,其中,element为目标cell的jQuery element |
searchAlign | data-search-align | String | right | 搜索框的位置,默认right(最右),可选left |
buttonsAlign | data-buttons-align | String | right | 工具栏按钮的位置,默认right(最右),可选left |
toolbarAlign | data-toolbar-align | String | left | 自定义工具栏的位置,默认right(最右),可选left |
paginationVAlign | data-pagination-v-align | String | bottom | 分页条垂直方向的位置,默认bottom(底部),可选top、both(顶部和底部均有分页条) |
paginationHAlign | data-pagination-h-align | String | right | 分页条水平方向的位置,默认right(最右),可选left |
paginationDetailHAlign | data-pagination-detail-h-align | String | left | 如果解译的话太长,举个例子,paginationDetail就是“显示第 1 到第 8 条记录,总共 15 条记录 每页显示 8 条记录”,默认left(最左),可选right |
paginationPreText | data-pagination-pre-text | String | ‹ | 还是举例子,如果你内容太多,底部最右边会显示:”‹ 1 2 3 4 5 ›”来选择页数,默认就是最左边那个符号,下同 |
paginationNextText | data-pagination-next-text | String | › | 参考上面一条 |
clickToSelect | data-click-to-select | Boolean | false | 默认false不响应,设为true则当点击此行的某处时,会自动选中此行的checkbox(复选框)或radiobox(单选按钮) |
singleSelect | data-single-select | Boolean | false | 默认false,设为true则允许复选框仅选择一行 |
toolbar | data-toolbar | String | Node | undefined | jQuery的选择器,例如:#toolbar,.toolbar,或者是DOM 结点 |
checkboxHeader | data-checkbox-header | Boolean | true | 如果你有声明复选框,默认显示表头行的全选复选框,设为false隐藏(就是表格第一行的不显示,从第二行往后都显示) |
maintainSelected | data-maintain-selected | Boolean | false | 设为true则保持被选的那一行的状态 |
sortable | data-sortable | Boolean | true | 默认true,设为false禁用所有的行排列(也就是每列表头不会显示排序的按钮,这个需要在th声明data-sortable=”true”,写在js中只是启不启用) |
slientSort | data-silent-sort | Boolean | true |
前提:sidePagination设为server(服务端) - 默认true,设为false则静默排序数据 |
rowStyle | data-row-style | Function | {} |
改变某行的格式,需要两个参数: - row:此行的数据 - index:此行的索引 支持classes和css,用法如下: function rowStyle(row, index){ return { classes: ‘text-nowrap another-class’, css: {“color”: “blue”, “font-size”: “50px”} }; } |
rowAttributes | data-row-attributes | Function | {} |
改变某行的属性,需要两个参数: - row:此行的数据 - index:此行的索引 支持所有自定义的属性。 |
customSearch | data-custom-search | Function | $.noop |
自定义搜索功能(用来代替自带的搜索功能),需要一个参数: - text:想要搜索的内容 用法如下: function customSearch(text){ //必须使用’this.data’对数据进行过滤(filter the data,感觉这个词也不用译),不要使用’this.options.data’ } |
customSort | data-custom-sort | Function | $.noop |
自定义排序功能(用来代替自带的排序功能),需要两个参数(可以参考前面): - sortName:需要排序的那列 - sortOrder:排序方式 用法:和上面一样,不用担心,注释也一模一样 |
locale | data-locale | String | undefined |
本地化(动词)。 本地化的文件必须被预加载,允许fallback(简单来说就是如果要使用的文件不可用,就可以用别的替代它,例如球场替补,没替补,如果有人受伤了,比赛不就废了),如果加载,将按如下顺序: - 首先尝试加载的是指定的”本地化”文件 - 然后是’_’(下划线)写成’-‘(破折号),并且区域代码被大写的 - 然后是短区域代码(例如:用’fr’代替’fr-CA’) - 最后使用的是剩下的本地化文件(当没有文件可加载则使用默认的) 如果剩余的undefined,或者是空字符,则使用最后一次使用的那个文件(当没有本地化文件可被加载,则使用自带的’en_US’) |
footerStyle | data-footer-style | Function | {} |
改变footer格式,需要两个参数: - row:此行的数据 - index:此行的索引 支持classes和css,用法如下: function rowStyle(value,row, index){ return { css: { “font-weight”: “bold” } }; } |
列的各项(Column options )
定义在 jQuery.fn.bootstrapTable.columnDefaults 文件内
名称 | 属性 | 类型 | 默认值 | 作用描述 |
---|---|---|---|---|
radio | data-radio | Boolean | false | 默认false不显示radio(单选按钮),设为true则显示,radio宽度是固定的 |
checkbox | data-checkbox | Boolean | false | 默认false不显示checkbox(复选框),设为true则显示,checkbox的每列宽度已固定 |
field | data-field | String | undefined | 是每列的字段名,不是表头所显示的名字,通过这个字段名可以给其赋值,相当于key,表内唯一 |
title | data-title | String | undefined | 这个是表头所显示的名字,不唯一,如果你喜欢,可以把所有表头都设为相同的名字 |
titleTooltip | data-title-tooltip | String | undefined |
当悬浮在某控件上,出现提示 - 参考 Bootstrap 提示工具(Tooltip)插件 |
class | class/data-class | String | undefined | 没什么好说的,就是class |
rowspan | rowspan/data-rowspan | Number | undefined | 每格所占的行数 |
colspan | colspan/data-colspan | Number | undefined | 每格所占的列数 |
align | data-align | String | undefined | 每格内数据的对齐方式,有:left(靠左)、right(靠右)、center(居中) |
halign | data-halign | String | undefined | table header(表头)的对齐方式,有:left(靠左)、right(靠右)、center(居中) |
falign | data-falign | String | undefined | table footer(表脚,就这样译,任性,其实随便译啦,知道就好)的对齐方式,有:left(靠左)、right(靠右)、center(居中) |
valign | data-valign | String | undefined | 每格数据的对齐方式,有:top(靠上)、middle(居中)、bottom(靠下) |
width | data-width | Number(单位:px或%) | undefined |
每列的宽度。 - 如果没有自定义宽度,那么宽度会根据内容的宽度自适应。 - 如果表是左适应(left responsive)或者设置的宽度小于内容的宽度,那么,宽度还是会自适应(可以在class或其他的属性中使用 min-width 或 max-width)。 - 你也可以使用”%”作为单位,这样的话,bootstapTable将按百分比划分,如果你想使用”pixels(像素值)”,你可以只写数字(只要不加”%”,单位默认”px”,不嫌麻烦,或者想更清晰,你也可以加上”px”) |
sortable | data-sortable | Boolean | false | 默认false就默认显示,设为true则会被排序 |
order | data-order | String | asc |
默认的排序方式为”asc(升序)”,也可以设为”desc(降序)”。 - 与上面的结合使用,不然都不让排序了,你还考虑什么升降。 |
visible | data-visible | Boolean | true |
默认为true显示该列,设为false则隐藏该列。 - 还是很有用的,例如隐藏自定义index列,按某属性排序后会变乱,你可以读取某行的index来进行赋值 |
cardVisible | data-card-visible | Boolean | true | 默认为true显示该列,设为false则隐藏。 |
switchable | data-switchable | Boolean | true | 默认为true显示该列,设为false则禁用列项目的选项卡。 |
clickToSelect | data-click-to-select | Boolean | true | 默认true不响应,设为false则当点击此行的某处时,不会自动选中此行的checkbox(复选框)或radiobox(单选按钮) |
formatter | data-formatter | Function | undefined |
需要此列的对象。 某格的数据转换函数,需要三个参数: -value: field(字段名) -row:行的数据 -index:行的(索引)index |
footerFormatter | data-footer-formatter | Function | undefined |
需要此列的对象。 某格的数据转换函数,需要一个参数: -data: 所有行数据的数组 函数需要返回(return)footer某格内所要显示的字符串的格式,还要包括内容 |
events | data-events | Object | undefined |
当某格使用formatter函数时,事件监听会响应,需要四个参数: -event:jQuery事件(参考Events)。 - value:字段名 - row:行数据 - index:此行的index 举个例子: <th .. data-events=”operateEvent”> var operateEvents = {‘click .like’: function (e, value, row, index) {}}; |
sorter | data-sorter | Function | undefined |
自定义的排序函数,实现本地排序,需要两个参数: - a:第一个字段名 - b:第二个字段名 |
sortName | data-sort-name | String | undefined |
除了表头默认的sort-name或列的字段名,还可以使用自定义的sort-name 对特殊情况说明: - 一个列显示的内容或许是”html”代码,如:<b><span style=”color:red”>abc</span></b>,但是被排列的是html代码中的内容(content):abc |
cellStyle | data-cell-style | Function | undefined |
对某格中显示样式(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-searchable | Boolean | true | 默认true,表示此列数据可被查询 |
searchFormatter | data-search-formatter | Boolean | true | 默认true,可使用格式化的数据查询 |
escape | data-escape | Boolean | false | 跳过插入HTML中的字符串,替换掉特殊字符(后面符号没有逗号):&,<,>,",`,' |
事件(Events)
定义事件的格式:
$(‘#table’).bootstrapTable({
onEventName: function (arg1, arg2, …) {
// …
} });$(‘#table’).on(‘event-name.bs.table’, function (e, arg1, arg2, …) {
// …
});
事件名 | 定义在jQuery中的事件名 | 参数 | 作用描述 |
---|---|---|---|
onAll | all.bs.table | name, args |
当所有触发器被触发时都执行此函数,就是所有的事件都会触发该事件,参数包括: - name:事件名 - args:事件的数据 |
onClickRow | click-row.bs.table | row, $element, field |
当单击此行的任意一处,就会触发该事件,所需参数如下(只是按原文译过来的,在bootstraptable的js中不需要这些参数,因为单击该行就会获得一个row,row中包括此行所有数据,只要通过此行某列的字段名即可取出): - row:哪一行(从0开始) - $element:该行(tr) - field:当点击该行,你想获取此行哪一格的数据,field就是此列字段名 - 参考:Bootstrap Table 双击或单击行获取该行内容 |
onDblClickRow | dbl-click-row.bs.table | row, $element, field |
和上面差不多,当双击(666)此行的任意一处,就会触发该事件,所需参数如下(只是按原文译过来的,在bootstraptable的js中不需要这些参数,因为双击该行就会获得一个row,row中包括此行所有数据,只要通过此行某列的字段名即可取出): - row:哪一行(从0开始) - $element:该行(tr) - field:当点击该行,你想获取此行哪一格的数据,field就是此列字段名 - 参考:Bootstrap Table 双击或单击行获取该行内容 |
onClickCell | click-cell.bs.table | field, value, row, $element |
当单击某一格,就会触发该事件,所需参数如下: - field:此格所在列的字段名 - value:此格的数据 - $element:此行的此列,就是此格(td) |
onDblClickCell | dbl-click-cell.bs.table | field, value, row, $element |
当双击某一格,就会触发该事件,所需参数如下: - field:此格所在列的字段名 - value:此格的数据 - $element:此行的此列,就是此格(td) |
onSort | sort.bs.table | name, order |
当对某列进行排序时触发该事件,所需参数如下: - name:所排序的列的字段名 - order:所排的顺序 |
onCheck | check.bs.table | row, $element |
当选择(check)此行时触发,所需的参数如下: - row:所选择的行的字段名 - $element:此行的DOM元素 |
onUncheck | uncheck.bs.table | row, $element |
当取消选择(uncheck)此行时触发,所需的参数如下: - row:所取消选择的行的字段名 - $element:此行的DOM元素 |
onCheckAll | check-all.bs.table | rows |
当全选行时触发,所需的参数如下: - rows:最近(newly)所选择的行的字段名的数组 |
onUncheckAll | uncheck-all.bs.table | rows |
当取消全选行时触发,所需的参数如下: - rows:之前或上次(previously)所选择的行的字段名的数组 |
onCheckSome | check-some.bs.table | rows |
当选择(check)某些行(多行,rows)时触发,所需的参数如下: - rows:之前或上次(previously)所选择的行的字段名的数组 |
onUncheckSome | uncheck-some.bs.table | rows |
当取消选择(uncheck)某些行(多行,rows)时触发,所需的参数如下: - rows:之前或上次(previously)所选择的行的字段名的数组 |
onLoadSuccess | load-success.bs.table | data | 当所有数据被加载时触发 |
onLoadError | load-error.bs.table | status, res | 当加载某些数据出现错误时触发 |
onColumnSwitch | column-switch.bs.table | field, checked | 当某列改变是否可见的状态时触发 |
onColumnSearch | column-search.bs.table | field, text | 当某列被查询时触发 |
onPageChange | page-change.bs.table | number, size | 当改变此页所显示的数据条数或改变页码时触发 |
onSearch | search.bs.table | text | 当查询此表时触发 |
onToggle | toggle.bs.table | cardView | 当改变表的视图时触发 |
onPreBody | pre-body.bs.table | data | 当<tbody></tbody>中的内容没显示前触发 |
onPostBody | post-body.bs.table | data | 当<tbody></tbody>中的内容被加载完后或者在你所用的DOM中有定义则被触发 |
onPostHeader | post-header.bs.table | none | 当<thead></thead>中的内容被加载完后或者在你所用的DOM中有定义则被触发 |
onExpandRow | expand-row.bs.table | index, row, $detail | 当查看详细视图(点击查看detail的图标)时触发 |
onCollapseRow | collapse-row.bs.table | index, row | 当关闭详细视图(再次点击查看detail的图标)时触发 |
onRefreshOptions | refresh-options.bs.table | options | 当刷新各项后或在初始化表(也包括销毁了再初始化)之前触发 |
onResetView | reset-view.bs.table | 当重置(reset)表的视图时触发 | |
onRefresh | refresh.bs.table | params | 当点击刷新按钮(refresh,不是浏览器的,而是表格右上角的刷新按钮)后触发 |
方法(Methods)
定义方法响应的语法
$('#table').bootstrapTable('method', parameter);
方法名 | 参数 | 描述 | 举例 |
---|---|---|---|
getOptions | none | 返回各项的object |
$table.bootstrapTable(‘getOptions’); - 请查看: getOptions |
getSelections | none | 返回被选择的行,当没有行被选择,则返回空数组(但并不是undefined,也不是null,是长度为0的空数组,所以可以判断长度是否大于0来确定是否选择了行) |
$table.bootstrapTable(‘getSelections’); - 请查看: getSelections |
getAllSelections | none | 返回所有被选的行(原文中:contain search or filter,其实就是你选择的筛选之后的数据),当没有行被选择,则返回空数组 |
$table.bootstrapTable(‘getAllSelections’); - 请查看: getAllSelections |
showAllColumns | none | 显示所有的列 |
$table.bootstrapTable(‘showAllColumns’); - 就是显示所有的列,并没什么可说的 |
hideAllColumns | none | 隐藏所有的列 |
$table.bootstrapTable(‘hideAllColumns’); - 就是隐藏所有的列 |
getData | useCurrentPage | 获取被加载的表的数据,如果你设置了使用当前页的数据(useCurrentPage),则返回当前页的数据 |
$table.bootstrapTable(‘getData’); - 请查看: getData |
getRowByUniqueId | id | 获取你想要的某行的数据(设置某行的id) |
$table.bootstrapTable(‘getRowByUniqueId’, 1);后面的1就是你要的那一行的ID - 请查看: getRowByUniqueId |
load | data | 向表中加载数据,原来的数据将被移除 |
$table.bootstrapTable(‘load’, data); - 请查看: load |
新版的CSDN有bug,所以其余的Methods另写一个表格 [ Bootstraptable API 中文文档 ]
方法名 | 参数 | 描述 | 举例 |
---|---|---|---|
append | data | 将数据追加在最后一行后 |
$table.bootstrapTable(‘append’, data);data可以是数组 - 请查看: append |
prepend | data | 也是追加,只是在第一行之前 |
$table.bootstrapTable(‘prepend’, data);data可以是数组 - 请查看: prepend |
remove | params | 移除一行或多行你所选的数据 |
$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 |
insertRow | params |
新增一行,所需的参数如下: - index:你想插入到哪(只要愿意,想插哪就插哪,想插谁就插谁) - row:你想插入的数据 |
$table.bootstrapTable(‘insertRow’, {index: 1, row: row}); - 请查看: insertRow |
updateRow | params |
更新行数据,所需的参数如下: - index:所要更新的行的索引(index) - row:你想换的新的数据 |
$table.bootstrapTable(‘updateRow’, {index: 1, row: row}); - 请查看: updateRow - 请查看: Bootstrap Table实现定时刷新数据 |
updateByUniqueId | params |
更新某行数据,所需的参数如下: - id:你想更新那行的id(唯一),(只要愿意,想换哪个换哪个) - row:你想换的新的数据 |
$table.bootstrapTable(‘updateByUniqueId’, {id: 3, row: row}); - 请查看: updateByUniqueId |
showRow | params |
显示特定行,所需的参数至少包括下面所列的一个: - id:所要显示的行的索引(index) - uniqueId:那一行的id |
$table.bootstrapTable(‘showRow’, {index:1}); - 请查看: showRow/hideRow |
hideRow | params |
隐藏特定行,所需的参数至少包括下面所列的一个: - id:所要隐藏的行的索引(index) - uniqueId:那一行的id |
$table.bootstrapTable(‘hideRow’, {index:1}); - 请查看: showRow/hideRow |
getRowsHidden | boolean | 获取隐藏的行(官方原话很多,其实总结起来就前面那一句) | $table.bootstrapTable(‘getRowsHidden’); |
新版的CSDN有bug,所以其余的Methods另写一个表格 [ Bootstrap Table API 中文文档 ]
方法名 | 参数 | 描述 | 举例 |
---|---|---|---|
mergeCells | options |
融合~(把多格合并为一格),所需的参数如下: - index:所要合并的格所在行的索引(index) - field:所在列的字段名 - rowspan:合并的行总数目 - colspan:合并的列总数目 |
$table.bootstrapTable(‘mergeCells’, {index: 1, field: ‘name’, colspan: 2, rowspan: 3}); - 请查看: mergeCells |
updateCell | params |
更新某格数据,所需的参数如下: - index:所要合并的格所在行的索引(index) - field:所在列的字段名 - value:要换的新的数据 你也可以设置{reinit:false}来禁用表格的再次初始化 |
$table.bootstrapTable(‘updateCell’,{index:index,field:’id’,value:value}); |
refresh | params |
刷新服务端的数据: - 可以设置{silent:true}来 偷偷地(<_<) 刷新 - 设置{url:newUrl,pageNumber:pageNumber, pageSize:pageSize}改变请求的地址,页数,每页所显示的条数 - 可以设置{query:{foo:’bar’}}增加特定的参数 |
$table.bootstrapTable(‘refresh’); - 请查看: refresh |
refreshOptions | options | 看例子吧 | - 请查看: refreshOptions |
resetSearch | text | 重置搜索的文本(text) | - 请查看: resetSearch |
showLoading | none | 显示正在加载…… | - 请查看: showLoading/hideLoading |
hideLoading | none | 隐藏正在加载…… | - 请查看: showLoading/hideLoading |
checkAll | none | 选择当前页的所有行 |
$table.bootstrapTable(‘checkAll’); - 请查看: checkAll/uncheckAll |
uncheckAll | none | 取消选择当前页的所有行 |
$table.bootstrapTable(‘uncheckAll’); - 请查看: checkAll/uncheckAll |
checkInvert | none | 反向选择,不难理解吧 | $table.bootstrapTable(‘checkInvert’); |
check | index | 选择某一行,索引(index)从0开始 |
$table.bootstrapTable(‘check’, 1); - 请查看: check/uncheck |
uncheck | index | 取消选择某一行,索引(index)从0开始 |
$table.bootstrapTable(‘uncheck’, 1); - 请查看: check/uncheck |
checkBy | params |
通过数组选择某一行,所需的参数如下: - field:所要选的字段名 - values:所要选的那些值(数组) |
官方没,啊,有例纸: - $(“#table”).bootstrapTable(“checkBy”, { field:”field_name”, values:[“value1”,”value2”,”value3”]}); - 请查看: checkBy/uncheckBy |
uncheckBy | params |
通过数组选择某一行,所需的参数如下: - field:所要取消选择的字段名 - values:所要取消选择的那些值(数组) |
$(“#table”).bootstrapTable(“uncheckBy”, { field:”field_name”, values:[“value1”,”value2”,”value3”]}); - 请查看: checkBy/uncheckBy |
resetView | params | 改变表格的样式,例如改变表格的高度(height) |
$table.bootstrapTable(‘resetView’); - 请查看: resetView |
resetWidth | none | 自动改变表头和表脚(就译成脚,任性)的宽度来适应每列的宽度 | $table.bootstrapTable(‘resetWidth’); |
destroy | none | 销毁表格 A!T!T!A!C!K! |
$table.bootstrapTable(‘destroy’); - 请查看: destroy |
showColumn | field | 显示特定的列 |
$table.bootstrapTable(‘showColumn’, ‘name’); - 请查看: showColumn/hideCoulumn |
hideColumn | field | 隐藏特定的列 |
$table.bootstrapTable(‘hideColumn’, ‘name’); - 请查看: showColumn/hideCoulumn |
新版的CSDN有bug,所以其余的Methods另写一个表格 [ Bootstrap table API 中文文档 ]
方法名 | 参数 | 描述 | 举例 |
---|---|---|---|
getHiddenColumns | - | 获取所有隐藏的列 | $table.bootstrapTable(‘getHiddenColumns’); |
getVisibleColumns | - | 获取所有显示的列 | $table.bootstrapTable(‘getVisibleColumns’); |
scrollTo | value | 滚……到哪个位置,单位是’px’,如果设为’bottom’,嗖,恭喜你已到表尾 |
$table.bootstrapTable(‘scrollTo’, 0); - 请查看: scrollTo |
getScrollPosition | none | 获取当前所滚到的位置,单位你懂得,就是’px’ | $table.bootstrapTable(‘getScrollPosition’); |
filterBy | none |
只能在客户端(client-side,相对server-side)这边用,过滤表中的数据 例如: - 可以设置{age:10}来只显示age为10的数据 - 不仅单的,你还可以双飞,甚至多p,设置{age: 10, hairColor: [“blue”, “red”, “green”]} ,这样你就得到了一群10岁的,头发颜色为蓝,红,绿的……数据 |
$table.bootstrapTable(‘filterBy’, { id: [1, 2, 3] }); - 请查看: filterBy |
selectPage | page | 跳转到特定的页面 |
$table.bootstrapTable(‘selectPage’, 1); - 请查看: selectPage/prevPage/nextPage |
prevPage | none | 跳转到上一页 |
$table.bootstrapTable(‘prevPage’); - 请查看: selectPage/prevPage/nextPage |
nextPage | none | 跳转到下一页 |
$table.bootstrapTable(‘nextPage’); - 请查看: selectPage/prevPage/nextPage |
togglePagination | none | 词穷,请看例纸 |
$table.bootstrapTable(‘togglePagination’); - 请查看: togglePagination |
toggleView | none | 改变视图 |
$table.bootstrapTable(‘toggleView’); - 请查看: toggleView |
expandRow | index |
可使用条件:detail view设为了true,不然无法使用视图功能,这个也没用 - 通过参数index来展开此列的详细视图 |
- 请查看: expandRow-collapseRow |
collapseRow | index |
可使用条件:detail view设为了true - 通过参数index来关闭此列的详细视图 |
- 请查看: expandRow-collapseRow |
expandAllRow | is subtable |
可使用条件:detail view设为了true - 展开所有列的详细视图 |
$table.bootstrapTable(‘expandAllRow’); - 参考上面的实例,上面是展开(折叠)某一行的视图,这个是所有行的 |
collapseAllRow | is 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…’ | “加载中,请等待……” |
formatRecordsPerPage | pageNumber | ‘%s records per page’ | “每页显示 15 条记录” |
formatShowingRows | pageFrom, pageTo, totalRows | ‘Showing %s to %s of %s rows’ | “显示第 1 到第 15 条记录” |
formatDetailPagination | totalRows | ‘Showing %s rows’ | “总共 15 条记录” |
formatSearch | - | ‘Search’ | “搜索”(占位符) |
formatNoMatches | - | ‘No matching records found’ | “没有找到匹配的记录” |
formatRefresh | - | ‘Refresh’ | “刷新”(鼠标悬浮显示的文字,下同) |
formatToggle | - | ‘Toggle’ | “切换” |
formatColumns | - | ‘Columns’ | “列” |
前端框架----bootstraptable api相关推荐
- 魔方APP项目-01-移动端开发相关概念、移动端自适配、元信息(meta)、开发准备、移动端项目搭建(模拟器调试)、APICloud(APICloud 前端框架,获取服务端API接口)
一.移动端开发相关概念 1.APP类型 ①.Native APP Native APP又称原生APP,就是我们平时说的手机应用软件. 原生APP 是针对IOS.Android.Windows等不同的手 ...
- 视频教程-主流前端框架下ArcGIS API for JavaScript的开发-其他
主流前端框架下ArcGIS API for JavaScript的开发 毕业于中国矿业大学地理信息科学专业.现就任于全球领先的GIS公司,主要担任地理平台研发工作,日常工作任务是ArcGIS JS A ...
- api可以主动采集用户数据吗_现在的前端框架全是通过API获得数据,如何记录用户登录状态?...
很多答案都提到了 JWT.Session.Cookie,但是我发现常常有人混淆这三个概念.或者说不同的语境下大家对 Session 会有不同的理解. 首先这三个名词表示的是三个纬度的东西,不能简单地说 ...
- 前端表格插件 BootstrapTable API 参数查询。
官网地址: http://bootstrap-table.wenzhixin.net.cn/zh-cn/ Github地址: https://github.com/wenzhixin/bootstra ...
- 参考框架 系统 基准_带有基准的前端框架的真实比较(2018更新)
参考框架 系统 基准 by Jacek Schae 由Jacek Schae 带有基准的前端框架的真实比较(2018更新) (A Real-World Comparison of Front-End ...
- Web前端框架与类库的思考
说起前端框架,我也是醉了.现在去面试或者和同行聊天,动不动就这个框架碉堡了,那个框架好犀利. 当然不是贬低框架,只是有一种杀鸡焉用牛刀的感觉.网站技术是为业务而存在的,除此毫无意义,框架也是一样.在技 ...
- angler前端框架_2019几大主流的前端框架,几款目前最热门的前端框架
如今的前端已经不再像以前一样就是简单的写写页面和调调样式而已,现在的前端越来越复杂,知识点越来越丰富. 要做WEB前端,就需要知道前端到底是什么,需要学习那些知识:前端至少要懂的三个部分:HTML,C ...
- 2018几大主流的 UI/JS 前端框架
2016年开始应该是互联网飞速发展的几年,同时也是Web前端开发非常火爆的一年,Web 前端技术发展速度让人感觉几乎不是继承式的迭代,而是一次次的变革和创造.这一年中有很多热门的前端开发框架,下面源码 ...
- php layui 框架,快速上手前端框架layui
layui(谐音:类UI) 是一款采用自身模块规范编写的前端 UI 框架,遵循原生 HTML/CSS/JS 的书写与组织形式,门槛极低,拿来即用. 一.介绍 在使用layui之前,我们先要了解一下la ...
最新文章
- linux7 显示登陆,centos7 查看,修改登录日志
- Spark Master启动源码分析
- 与NWBC相关的服务器端配置
- 小议WebRTC拥塞控制算法:GCC介绍
- Thread.yield()方法表示交出主动权,join表示等待当前线程,可以指定秒数
- 空间谱专题13:联合解算DOA(ML/AP)
- 石青建站养站大师 v1.8.6.1
- maven安装与创建多模块项目【转】
- 7-7 印度大壶节 (25 分)
- android手机禁止休眠_浮窗----手机是否可以一心多用?这个只是开始而已。
- 把chord下dbm_noauth做成静态库,提供接口
- 离线提取目标机hash
- Xcode6在10.9.4上面crash解决
- mysql数据库旅游管理系统_JSP+MySQL基于ssm的旅游管理系统
- python爬虫-scrapy基于selenium进行网页截图
- Python 学习笔记03 - 程序结构
- visio如何找到画线工具
- 关于解决克隆Windows Xp sp2系统安装IIS5.1的方法
- 11 RabbitMQ消息的可靠性保障
- 放弃Notepad++,替代品很多
热门文章
- c语言单片机脉冲计数实验报告,外部中断测脉冲个数
- 计算机主机常鸣,电脑开机 主机内长鸣一声报警是什么問題?
- 【数据库大作业--酒店服务管理系统】
- 如何破解数据库的密码
- 极 品 登 陆 界 面
- html5官网中遇到的问题,html5的input的required使用中遇到的问题及解决方法
- 2021图像识别领域最具商业合作价值企业盘点
- Linux下Qt/PyQt5无法调用fcitx中文输入法解决办法
- String.replaceAll
- LoRa Server@CentOS#1:选择 CentOS 的 5 大理由