bootstrap-table中文文档(页疑翻译)

大家可以随便转载使用,但是请注明出处~~~from oschina 页疑

我从excel翻译好粘贴过来的,这个格式也太丑了吧。。。好像还显示不全。。。看不到的可以来百度云下载


表格属性(jQuery.fn.bootstrapTable.defaults)



插件扩展属性名 table标签属性 类型 默认值 描述

data-toggle String 'table' 不用写 JavaScript 直接启用表格。
classes data-classes String table table-hover' 表格的类名称。默认情况下,表格是有边框的,你可以用 'table-no-bordered'  来删除表格的边框样式,注意设置后会覆盖默认样式,如需默认样式,请一起加上。
height data-height Number undefined 定义表格的高度,可用js判断后设置。
undefinedText data-undefined-text String '-' 代替undefined的字符,空字符串不算undefined
striped data-striped Boolean FALSE 隔行变色
sortName data-sort-name String undefined 数据加载时按哪一列排序
sortOrder data-sort-order String 'asc' 数据加载时的排序规则, 'asc' or 'desc'.
iconsPrefix data-icons-prefix String 'glyphicon' 定义图标组名称(“glyphicon”或“fa”FontAwesome)。在默认情况下使用“glyphicon”
icons data-icons Object {
  refresh: 'glyphicon-refresh  icon-refresh',
  toggle: 'glyphicon-list-alt  icon-list-alt',
  columns: 'glyphicon-th icon-th'
}
定义用于刷新图标,切换和列按钮图标




















columns Array [] 列属性,请参照jQuery.fn.bootstrapTable.columnDefaults设置的列属性
data Array [] 需要渲染到table里的数据
ajax data-ajax Function undefined ajax获取数据,和jquery的ajax完全一样
method data-method String 'get' 请求数据的方式
url data-url String undefined 请求数据的URL
cache data-cache Boolean TRUE AJAX请求缓存.
contentType data-content-type String 'application/json' 接收数据的文档类型
dataType data-data-type String 'json' 接收数据的类型
ajaxOptions data-ajax-options Object {} ajax参数
queryParams data-query-params Function function(params) {
return params;
}
当请求远程数据时,您可以通过修改queryParams发送额外的参数。
例如queryParamsType ='limit',
params可以是:limit, offset, search, sort, order,
参数的值可以是:pageSize, pageNumber, searchText, sortName, sortOrder。
返回false则停止请求。















queryParamsType data-query-params-type String 'limit' Set 'limit' to send query params width RESTFul type.
responseHandler data-response-handler Function function(res) {
return res;
}
数据加载前出来响应返回的数据格式,res: the response  data.return的数据为表格渲染所需数据










pagination data-pagination Boolean FALSE 在表格底部显示详细信息和分页栏(当需要分页时)
onlyInfoPagination data-only-info-pagination Boolean FALSE 只显示总记录数(无每页显示数和其他信息),如:Showing  13 rows
sidePagination data-side-pagination String 'client' 定义分页方式'client' or 'server',假如为'server'则需要设置'url' or  'ajax' 
pageNumber data-page-number Number 1 当设置了pagination属性时,控制显示第几页
pageSize data-page-size Number 10 当设置了pagination属性时,控制每页显示数
pageList data-page-list Array [10, 25, 50, 100, All] 每页显示数的选项list
selectItemName data-select-item-name String btSelectItem' radio  or checkbox的name,提交表单用的,你懂的
smartDisplay data-smart-display Boolean TRUE 只能选择table还是card视图(所谓的响应式,移动设备会自动使用card视图)
search data-search Boolean FALSE 是否显示搜索框
strictSearch data-strict-search Boolean FALSE 是否开启严格搜索
searchText data-search-text String '' 初始化搜索文本
searchTimeOut data-search-time-out Number 500 设置搜索超时
trimOnSearch data-trim-on-search Boolean TRUE 搜索query是否自动去空格(trim)
showHeader data-show-header Boolean TRUE 是否显示header
showFooter data-show-footer Boolean FALSE 是否显示footer
showColumns data-show-columns Boolean FALSE 是否显示tool(显示/隐藏某些列)
showRefresh data-show-refresh Boolean FALSE 是否显示刷新按钮
showToggle data-show-toggle Boolean FALSE 是否显示视图切换按钮
showPaginationSwitch data-show-pagination-switch Boolean FALSE 是否显示“展开全部”按钮
minimumCountColumns data-minimum-count-columns Number 1 The minimum count columns to hide of the columns drop  down list.
idField data-id-field String undefined Indicate which field is an identity field.
uniqueId data-unique-id String undefined 把哪一列的值设为当前行tr的属性(data-uniqueid)的值
cardView data-card-view Boolean FALSE 数据加载时是否用card视图模式
detailView data-detail-view Boolean FALSE 数据加载时是否用详细视图模式(第一列为加号)
detailFormatter data-detail-formatter Function function(index, row) {
return '';
}
格式化详细页面模式的视图。










searchAlign data-search-align String 'right' 搜索框位置,left or right
buttonsAlign data-buttons-align String 'right' toolbar的按钮对齐方式,left or right
toolbarAlign data-toolbar-align String 'left' 自定义toolbar的按钮对齐方式,left or right
paginationVAlign data-pagination-v-align String 'bottom' pagination显示的位置,top  or bottom or both
paginationHAlign data-pagination-h-align String 'right' pagination显示的位置,left or right
paginationDetailHAlign data-pagination-detail-h-align String 'left' 默认左边是详细信息,右边是分页栏,left or right
paginationPreText data-pagination-pre-text String '<' 上一页文本
paginationNextText data-pagination-next-text String '>' 下一页文本
clickToSelect data-click-to-select Boolean FALSE 当点击该行时,checkbox或者radio选中
singleSelect data-single-select Boolean FALSE 是否只允许checkbox选一行(即和radio功能一样)
toolbar data-toolbar String undefined toolbar容器的选择器名称,比如:#toolbar, .toolbar.





checkboxHeader data-checkbox-header Boolean TRUE 是否显示checkbox全选
maintainSelected data-maintain-selected Boolean FALSE 是否保持被选中的行,when改变页数或者搜索的时候
sortable data-sortable Boolean TRUE 是否按列排序,假如为false,则不排序显示所有数据
silentSort data-silent-sort Boolean TRUE 在客户端还是再服务器端排序,false则客户端,当sidePagination设置为server时该设置才生效
rowStyle data-row-style Function {} 行样式,function(row, index)
row: 该行的数据
index: 该行的序号















rowAttributes data-row-attributes Function {} 行属性,function(row, index)
row: 该行的数据
index: 该行的序号

























列属性(jQuery.fn.bootstrapTable.columnDefaults)



插件扩展属性名 table标签属性 类型 默认值 描述

Name

Attribute

Type

Default

Description

radio data-radio Boolean FALSE 是否显示单选radio
checkbox data-checkbox Boolean FALSE 是否显示多选checkbox
field data-field String undefined 该列映射的data的参数名
title data-title String undefined 该列的表头名
titleTooltip data-title-tooltip String undefined 该列表头的title提示文本
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 单元格(cell)对齐方式.  'top', 'middle', 'bottom' 
width data-width Number  {Pixels or Percentage} undefined 列的宽度,可以使用像素或者百分比,不带单位则默认为px
sortable data-sortable Boolean FALSE 该列是否排序(表头显示双箭头)
order data-order String 'asc' 该列默认的排序方式,  'asc' or 'desc'.
visible data-visible Boolean TRUE 该列是否可见
cardVisible data-card-visible Boolean TRUE 在card视图里是否可见
switchable data-switchable Boolean TRUE False to  disable the switchable of columns item.
clickToSelect data-click-to-select Boolean TRUE 是否选中checkbox或者radio,当该列被选择时
formatter data-formatter Function undefined 格式化单元格内容,function(value,  row, index), value:该cell本来的值,row:该行数据,index:该行序号(从0开始)




















footerFormatter data-footer-formatter Function undefined 格式化footer内容,function(rows),rows:所有行数据















events data-events Object undefined The cell  的事件监听,当你使用formatter function的时候,有三个参数:
event: the jQuery event.
value: 该cell的值
row: 该行的数据
index: 该行的序号




















sorter data-sorter Function undefined 自定义字段排序函数,function(a,  b)










sortName data-sort-name String undefined 当列中有html等标签时,只排序实际内容(忽略标签和样式),例如字段为:"<b><span  style="color:red">abc</span></b>",则sortName=abc
cellStyle data-cell-style Function undefined 单元格样式,支持css和classes,function(value,  row, index)
value: 该cell的值
row: 该行的数据
index: 该行的序号




















searchable data-searchable Boolean TRUE 搜索时是否搜索此列
searchFormatter data-search-formatter Boolean TRUE 搜索是否使用格式化后的数据(即显示在页面上的数据)










事件



Option 事件

jQuery 事件

参数

描述


onAll all.bs.table name, args 所有的事件都会触发该事件,参数包括: 
name:事件名,  
args:事件的参数。 











onClickRow click-row.bs.table row, $element 当用户点击某一行的时候触发,参数包括:
row:点击行的数据,
$element:tr 元素。











onDblClickRow dbl-click-row.bs.table row, $element 当用户双击某一行的时候触发,参数包括:
row:点击行的数据,
$element:tr 元素。 











onClickCell click-cell.bs.table field, value, row,  $element 当用户点击某一列的时候触发,参数包括:
field:点击列的 field 名称,   
value:点击列的 value 值,
row:点击列的整行数据,  
$element:td 元素。 





















onDblClickCell dbl-click-cell.bs.table field, value, row,  $element 当用户双击某一列的时候触发,参数包括:
field:点击列的 field 名称,   
value:点击列的 value 值,
row:点击列的整行数据,  
$element:td 元素。 





















onSort sort.bs.table name, order Fires when  user sort a column, the parameters contains:    
name: the sort column field name   
order: the sort column order.   











onCheck check.bs.table row Fires when  user check a row, the parameters contains:  
row: the record corresponding to the clicked row. $element: the DOM element  checked.    






onUncheck uncheck.bs.table row Fires when  user uncheck a row, the parameters contains:    
row: the record corresponding to the clicked row. $element: the DOM element  unchecked.  






onCheckAll check-all.bs.table rows Fires when  user check all rows, the parameters contains:   
rows: array of records corresponding to newly checked rows. 






onUncheckAll uncheck-all.bs.table rows Fires when  user uncheck all rows, the parameters contains: 
rows: array of records corresponding to previously checked rows.    






onCheckSome check-some.bs.table rows Fires when  user check some rows, the parameters contains:  
rows: array of records corresponding to previously checked rows.    






onUncheckSome uncheck-some.bs.table rows Fires when  user uncheck some rows, the parameters contains:    
rows: array of records corresponding to previously checked rows.    






onLoadSuccess load-success.bs.table data Fires when remote  data is loaded successfully.
onLoadError load-error.bs.table status Fires when some  errors occur to load remote data.
onColumnSwitch column-switch.bs.table field, checked Fires when switch the  column visible.
onColumnSearch column-search.bs.table field, text Fires when search by  column.
onPageChange page-change.bs.table number, size Fires when change the  page number or page size.
onSearch search.bs.table text Fires when search the  table.
onToggle toggle.bs.table cardView Fires when toggle the  view of table.
onPreBody pre-body.bs.table data Fires before the  table body is rendered
onPostBody post-body.bs.table none Fires after the table  body is rendered and available in the DOM
onPostHeader post-header.bs.table none Fires after the table  header is rendered and availble in the DOM
onExpandRow expand-row.bs.table index, row, $detail 当点击详细图标展开详细页面的时候触发。
onCollapseRow collapse-row.bs.table index, row 当点击详细图片收起详细页面的时候触发。
onRefreshOptions refresh-options.bs.table options Fires after refresh  the options and before destroy and init the table





方法



使用方法的语法:$('#table').bootstrapTable('method', parameter);。







名称

参数

描述



getOptions none 返回表格的 Options。

getSelections none 返回所选的行,当没有选择任何行的时候返回一个空数组。

getAllSelections none 返回所有选择的行,包括搜索过滤前的,当没有选择任何行的时候返回一个空数组。

getData useCurrentPage 获得当前加载的数据。假如设置  useCurrentPage 为 true,则返回当前页的数据。

getRowByUniqueId id 根据 uniqueId 获取行数据。

load data 加载数据到表格中,旧数据会被替换。

append data 添加数据到表格在现有数据之后。

prepend data 插入数据到表格在现有数据之前。

remove params 从表格中删除数据,包括两个参数:  field: 需要删除的行的 field 名称。
values: 需要删除的行的值,类型为数组。







removeAll - 删除表格所有数据。

removeByUniqueId id 根据 uniqueId 删除指定的行。

insertRow params 插入新行,参数包括:
index: 要插入的行的 index。
row: 行的数据,Object 对象。












updateRow params 更新指定的行,参数包括:
index: 要更新的行的 index。
row: 行的数据,Object 对象。












showRow params 显示指定的行,参数包括:
index: 要显示的行的 index 或者 uniqueId。
isIdField: 指定 index 是否为 uniqueid。












hideRow params 隐藏指定的行,参数包括:
index: 要隐藏的行的 index。
uniqueId: 获取要更新的行的 uniqueid












getRowsHidden show 获得所有隐藏的行

mergeCells options 合并一些单元格到另一个单元格,options包含:
index:行序号
field:字段名
rowspan:合并的行数
colspan:合并的列数






















updateCell params 更新单元格的值
index: 行序号
field: 字段名
value: 值

















refresh params 刷新远程数据, {silent: true} 刷新客户端数据,{url: newUrl}根据newUrl刷新数据,还支持设置参数哦{query: {foo:  'bar'}}

refreshOptions options 刷新options

showLoading none 显示loading

hideLoading none 隐藏loading

checkAll none 选中当前页的所有行

uncheckAll none 取消选中当前页的所有行

check index 选中一行,行序号从0开始

uncheck index 取消选中一行,行序号从0开始

checkBy params 枚举搜索行
$("#table").bootstrapTable("checkBy",  {field:"field_name",  values:["value1","value2","value3"]})
搜索字段名为field_name的列中,value是value1或者value2或者value3的行






















uncheckBy params 与checkBy相反





















resetView params 重置表格视图的属性,比如:height等

resetWidth none 自动重置header和footer以适应当前的列宽

destroy none 销毁当前表格

showColumn field 显示指定的列

hideColumn field 隐藏指定的列

getHiddenColumns - 获取隐藏的列。

scrollTo value 滚动到指定位置,单位为 px,设置  'bottom' 表示跳到最后。

getScrollPosition none 获取当前滚动条的位置,单位为 px。

filterBy params (只能用于 client  端)过滤表格数据, 你可以通过过滤{age: 10}来显示  age 等于 10 的数据。

selectPage page 跳到指定的页。

prevPage none 跳到上一页。

nextPage none 跳到下一页。

togglePagination none 切换分页选项。

toggleView none 切换 card/table 视图

expandRow index 扩展的行索引参数如果通过细节视图选项设置为True

collapseRow index 瓦解的行索引参数如果通过细节视图选项设置为True

expandAllRows is subtable 扩展所有行如果细节视图选项设置为True

collapseAllRows is subtable 瓦解所有行如果细节视图选项设置为True






多语言



Name

Parameter

Default

说明
formatLoadingMessage - 'Loading, please wait…' loading时显示的text
formatRecordsPerPage pageNumber '%s records per page' 每页显示数text
formatShowingRows pageFrom, pageTo, totalRows 'Showing %s to %s of %s rows' 现在显示的是1to 10条记录text
formatDetailPagination totalRows 'Showing %s rows' 总行数text
formatSearch - 'Search' 搜索框提示text
formatNoMatches - 'No matching records found' 搜索无结果text
formatRefresh - 'Refresh' 刷新按钮title
formatToggle - 'Toggle' 转换视图按钮title
formatColumns - 'Columns' 是否显示列按钮title
formatAllRows - 'All' 显示所有行按钮title










当然。。。还可以直接导入语言包



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

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





你可能感兴趣的:(bootstrap-table中文文档(页疑翻译))