Bootstrap Table API 中文版(完整翻译文档)
来源:互联网 发布:游戏开发数据库 编辑:程序博客网 时间:2024/06/02 00:22
/***$('#table').bootstrapTable({});*看网上有中文版的,但有些就是字面直接译过来了,而且有的就没有翻译,那就打算自己再翻译一遍,每一条会尽*最大可能结合尽可能多资料翻译,如果发现译的内容比英文多,是添加了更详细的说明,表的名称,属性,类型,*默认值不翻译,例如:"class"、"id"等不翻译。*有错请提出,会及时改正,谢谢。*Bootstrap table 中文文档(完整翻译文档)如果想转请注明@Sclifftop**/
- “名称”可以写在
$('#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 文件内
- 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){当请求数据时,你可以通过修改queryParams向服务器发送其余的参数。
return params;}
- 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){在加载服务器发送来的数据之前,处理数据的格式,参数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,启用了分页功能。
return res;}
- 默认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,会
- 搜索框初始显示的内容,默认空字符串 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 文档 ]
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 文件内
- 参考 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, …) {
// …
});
- 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 getSelections none 返回被选择的行,当没有行被选择,则返回空数组 $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 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 中文文档 ]
- 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’); destory 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 中文文档 ]
- 请查看: 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'});
- 以下说明除了数字外均为中文默认显示,本来不用写的,只要引入就显示中文了
有错请留言,会及时更改,如果翻译的行写成列等低级错误,看英文名称就知道有没有错了,知道就好,会持续检查哪有误、漏译,谢谢
其他相关:
- Bootstrap Table实现定时刷新数据 http://blog.csdn.net/s_clifftop/article/details/77744791
- Bootstrap Table 双击或单击行获取该行内容 http://blog.csdn.net/s_clifftop/article/details/77915934
- Bootstrap Table API 中文版(完整翻译文档)
- Bootstrap Table API 中文版(完整翻译文档)
- Bootstrap Table 中文文档(完整翻译版)
- Bootstrap Table 中文文档(完整翻译版)
- Bootstrap Table 中文文档(完整翻译版)
- Bootstrap Table 中文文档(完整翻译版)
- Bootstrap Table 中文文档(完整翻译版)
- Bootstrap Table 中文文档(完整翻译版)
- Bootstrap Table 中文文档(完整翻译版)
- Bootstrap Table 中文文档(最终完整翻译版)
- Bootstrap Table 中文文档(完整翻译版)
- 完整的Java API(Java SE 5.0)文档中文版
- Sun完整发布Java API文档中文版
- Sun完整发布Java API文档中文版
- Sun完整发布Java API文档中文版
- 终成正果 Sun完整发布Java API文档中文版
- 终成正果 Sun完整发布Java API文档中文版
- 终成正果 Sun完整发布Java API文档中文版
- 批量复制文件并改成有顺序的文件名
- 地平线宣讲会+笔试
- 电信封网的目的
- Spring知识点提炼
- java方法调用之动态调用多态(重写override)的实现原理——方法表
- Bootstrap Table API 中文版(完整翻译文档)
- java不是内部或外部命令
- nyoj 组合数
- 请说说HTTP和HTTPS
- 图解TCP/IP读书笔记(一):网络基础知识
- Python基础学习<七>
- JAVA过滤器大全代码
- Java异步NIO框架Netty实现高性能高并发
- 在 Linux 中配置 SFTP 环境