文档章节

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

 页疑
发布于 2015/11/29 11:42
字数 3362
阅读 26866
收藏 12

大家可以随便转载使用,但是请注明出处~~~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']);
// ...





© 著作权归作者所有

粉丝 1
博文 48
码字总数 39341
作品 0
南岸
私信 提问
加载中

评论(8)

金墨痴
金墨痴
非常感谢
L
Lovnx
想看完整翻译,请移步:http://blog.csdn.net/rickiyeat/article/details/56483577
页疑 博主

引用来自“wenzhixin”的评论

欢迎提交 pull request
我只是一个搬运工,pull request就没必要了
页疑 博主

引用来自“露可滋”的评论

为什么百度云那里删除了
最近百度云老误删我的文件,朋友,直接copy这份是一样的
页疑 博主

引用来自“梦幻女侠”的评论

您好,我的bootastrap table汉化失败,怎么回事呢,<script src="bootstrap-table-zh-CN.js">这个引入进去了,路径没有问题,但是汉化失败
请确认放入的顺序(应在后面)
wenzhixin
wenzhixin
欢迎提交 pull request
露可滋
为什么百度云那里删除了
梦幻女侠
梦幻女侠
您好,我的bootastrap table汉化失败,怎么回事呢,<script src="bootstrap-table-zh-CN.js">这个引入进去了,路径没有问题,但是汉化失败
渴切Cutter-开源中文css框架 和bootstrap有什么不同?

渴切Cutter-开源中文css框架 转为国人设计。兼容ie6. bootstrap是不支持ie6的,所以如果你想兼容ie6,那么你得斟酌一下了。 其实渴切-开源中文css和bootstrap的调用方式有所不同: bootstra...

tyshymy
2013/05/01
2.8K
16
渴切Cutter-开源中文css框架 和bootstrap有什么不同?

渴切Cutter-开源中文css框架 转为国人设计。兼容ie6. bootstrap是不支持ie6的,所以如果你想兼容ie6,那么你得斟酌一下了。 其实渴切-开源中文css和bootstrap的调用方式有所不同: bootstra...

tyshymy
2013/04/30
20
0
ApacheCN 2019Q1 总结

注意这个总结是不定期的,也就是重要的时间节点上会发这么一篇,告诉大家我们组织都做了什么。 1)首先,是组织的三大活动: 学习活动完全交给 Datawhale 处理,这样职责单一分工明确,效率更...

ApacheCN_飞龙
04/25
0
0
Fanta/free-programming-books-zh_CN

免费的编程中文书籍索引 免费的编程中文书籍索引,欢迎投稿。 国外程序员在 stackoverflow 推荐的程序员必读书籍,中文版。 stackoverflow 上的程序员应该阅读的非编程类书籍有哪些? 中文版...

Fanta
2016/11/14
0
0
发布在github上的bootstrap文档的中文版本

Bootstrap是快速开发Web应用程序的前端工具包。它是一个CSS和HTML的集合,它使用了最新的浏览器技术,给你的Web开发提供了时尚的版式,表单,buttons,表格,网格系统等等。 我正在翻译boots...

孔祥赫
2012/03/23
2.1K
7

没有更多内容

加载失败,请刷新页面

加载更多

《JAVA核心知识》学习笔记 (21. JAVA 算法)

21. JAVA 算法

Shingfi
22分钟前
4
0
redis 命令

redis 秒杀用到的 原子锁 :$redis->decr('jili_reward_goods_stock_' . $gifts_id) redis 秒杀用到的原子锁在秒杀过程中库存量增加 $redis->incrBy('key1', 10); redis 键查看重复:$redis-......

小小小壮
22分钟前
4
0
像智能手机一样管理云端应用:阿里云联合微软全球首发开放应用模型(OAM)

2019 年 10 月 17 日上午 9 点 15 分,阿里巴巴合伙人、阿里云智能基础产品事业部总经理蒋江伟在 QCon 上海《基于云架构的研发模式演进》主题演讲中,正式宣布: “今天,我们同微软联合发布...

阿里巴巴云原生
31分钟前
4
0
SpringBoot配置数据源

默认数据源 Springboot默认支持4种数据源类型,定义在 org.springframework.boot.autoconfigure.jdbc.DataSourceAutoConfiguration 中,分别是: org.apache.tomcat.jdbc.pool.DataSource......

Gx_ww
35分钟前
4
0
Java应用在docker环境配置容器健康检查

在《极速体验docker容器健康》一文已体验了docker容器健康检查功能,今天就来给java应用的容器加入健康检查,使应用的状态随时都可以被监控和查看。 实战环境信息 操作系统:macOS Catalina ...

程序员欣宸
36分钟前
4
0

没有更多内容

加载失败,请刷新页面

加载更多

返回顶部
顶部