/**
* $('#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 文件内
名称 | 属性 | 类型 | 默认值 | 作用描述 |
---|---|---|---|---|
- | 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的自定义名,没定义默认都不排列,如果你定义了,则定义的列默认递增(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显示 |