您的位置:首页 > Web前端 > BootStrap

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

2016-03-01 15:46 561 查看
摘要: 鉴于官网的中文翻译等于没翻译。。。。遂自己翻译了下,勿喷~
标红的那几条要么是不会翻译,要么是实践没出效果固保留不翻译。
我翻译的版本是1.9.1,翻译的功能都亲测可用。

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

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

表格属性(jQuery.fn.bootstrapTable.defaults)
插件扩展属性名table标签属性类型默认值描述

data-toggleString'table'不用写 JavaScript 直接启用表格。
classesdata-classesStringtable table-hover'表格的类名称。默认情况下,表格是有边框的,你可以用 'table-no-bordered' 来删除表格的边框样式,注意设置后会覆盖默认样式,如需默认样式,请一起加上。
heightdata-heightNumberundefined定义表格的高度,可用js判断后设置。
undefinedTextdata-undefined-textString'-'代替undefined的字符,空字符串不算undefined
stripeddata-stripedBooleanFALSE隔行变色
sortNamedata-sort-nameStringundefined数据加载时按哪一列排序
sortOrderdata-sort-orderString'asc'数据加载时的排序规则, 'asc' or 'desc'.
iconsPrefixdata-icons-prefixString'glyphicon'定义图标组名称(“glyphicon”或“fa”FontAwesome)。在默认情况下使用“glyphicon”
iconsdata-iconsObject{
refresh: 'glyphicon-refresh icon-refresh',
toggle: 'glyphicon-list-alt icon-list-alt',
columns: 'glyphicon-th icon-th'
}
定义用于刷新图标,切换和列按钮图标
columnsArray[]列属性,请参照jQuery.fn.bootstrapTable.columnDefaults设置的列属性
dataArray[]需要渲染到table里的数据
ajaxdata-ajaxFunctionundefinedajax获取数据,和jquery的ajax完全一样
methoddata-methodString'get'请求数据的方式
urldata-urlStringundefined请求数据的URL
cachedata-cacheBooleanTRUEAJAX请求缓存.
contentTypedata-content-typeString'application/json'接收数据的文档类型
dataTypedata-data-typeString'json'接收数据的类型
ajaxOptionsdata-ajax-optionsObject{}ajax参数
queryParamsdata-query-paramsFunctionfunction(params) {
return params;
}
当请求远程数据时,您可以通过修改queryParams发送额外的参数。
例如queryParamsType ='limit',
params可以是:limit, offset, search, sort, order,
参数的值可以是:pageSize, pageNumber, searchText, sortName, sortOrder。
返回false则停止请求。
queryParamsTypedata-query-params-typeString'limit'Set 'limit' to send query params width RESTFul type.
responseHandlerdata-response-handlerFunctionfunction(res) {
return res;
}
数据加载前出来响应返回的数据格式,res: the response data.return的数据为表格渲染所需数据
paginationdata-paginationBooleanFALSE在表格底部显示详细信息和分页栏(当需要分页时)
onlyInfoPaginationdata-only-info-paginationBooleanFALSE只显示总记录数(无每页显示数和其他信息),如:Showing 13 rows
sidePaginationdata-side-paginationString'client'定义分页方式'client' or 'server',假如为'server'则需要设置'url' or 'ajax'
pageNumberdata-page-numberNumber1当设置了pagination属性时,控制显示第几页
pageSizedata-page-sizeNumber10当设置了pagination属性时,控制每页显示数
pageListdata-page-listArray[10, 25, 50, 100, All]每页显示数的选项list
selectItemNamedata-select-item-nameStringbtSelectItem'radio or checkbox的name,提交表单用的,你懂的
smartDisplaydata-smart-displayBooleanTRUE只能选择table还是card视图(所谓的响应式,移动设备会自动使用card视图)
searchdata-searchBooleanFALSE是否显示搜索框
strictSearchdata-strict-searchBooleanFALSE是否开启严格搜索
searchTextdata-search-textString''初始化搜索文本
searchTimeOutdata-search-time-outNumber500设置搜索超时
trimOnSearchdata-trim-on-searchBooleanTRUE搜索query是否自动去空格(trim)
showHeaderdata-show-headerBooleanTRUE是否显示header
showFooterdata-show-footerBooleanFALSE是否显示footer
showColumnsdata-show-columnsBooleanFALSE是否显示tool(显示/隐藏某些列)
showRefreshdata-show-refreshBooleanFALSE是否显示刷新按钮
showToggledata-show-toggleBooleanFALSE是否显示视图切换按钮
showPaginationSwitchdata-show-pagination-switchBooleanFALSE是否显示“展开全部”按钮
minimumCountColumnsdata-minimum-count-columnsNumber1The minimum count columns to hide of the columns drop down list.
idFielddata-id-fieldStringundefinedIndicate which field is an identity field.
uniqueIddata-unique-idStringundefined把哪一列的值设为当前行tr的属性(data-uniqueid)的值
cardViewdata-card-viewBooleanFALSE数据加载时是否用card视图模式
detailViewdata-detail-viewBooleanFALSE数据加载时是否用详细视图模式(第一列为加号)
detailFormatterdata-detail-formatterFunctionfunction(index, row) {
return '';
}
格式化详细页面模式的视图。
searchAligndata-search-alignString'right'搜索框位置,left or right
buttonsAligndata-buttons-alignString'right'toolbar的按钮对齐方式,left or right
toolbarAligndata-toolbar-alignString'left'自定义toolbar的按钮对齐方式,left or right
paginationVAligndata-pagination-v-alignString'bottom'pagination显示的位置,top or bottom or both
paginationHAligndata-pagination-h-alignString'right'pagination显示的位置,left or right
paginationDetailHAligndata-pagination-detail-h-alignString'left'默认左边是详细信息,右边是分页栏,left or right
paginationPreTextdata-pagination-pre-textString'<'上一页文本
paginationNextTextdata-pagination-next-textString'>'下一页文本
clickToSelectdata-click-to-selectBooleanFALSE当点击该行时,checkbox或者radio选中
singleSelectdata-single-selectBooleanFALSE是否只允许checkbox选一行(即和radio功能一样)
toolbardata-toolbarStringundefinedtoolbar容器的选择器名称,比如:#toolbar, .toolbar.
checkboxHeaderdata-checkbox-headerBooleanTRUE是否显示checkbox全选
maintainSelecteddata-maintain-selectedBooleanFALSE是否保持被选中的行,when改变页数或者搜索的时候
sortabledata-sortableBooleanTRUE是否按列排序,假如为false,则不排序显示所有数据
silentSortdata-silent-sortBooleanTRUE在客户端还是再服务器端排序,false则客户端,当sidePagination设置为server时该设置才生效
rowStyledata-row-styleFunction{}行样式,function(row, index)
row: 该行的数据
index: 该行的序号
rowAttributesdata-row-attributesFunction{}行属性,function(row, index)
row: 该行的数据
index: 该行的序号
列属性(jQuery.fn.bootstrapTable.columnDefaults)
插件扩展属性名table标签属性类型默认值描述
Name
Attribute
Type
Default
Description
radiodata-radioBooleanFALSE是否显示单选radio
checkboxdata-checkboxBooleanFALSE是否显示多选checkbox
fielddata-fieldStringundefined该列映射的data的参数名
titledata-titleStringundefined该列的表头名
titleTooltipdata-title-tooltipStringundefined该列表头的title提示文本
classclass / data-classStringundefined该列的class
rowspanrowspan / data-rowspanNumberundefined合并单元格时定义合并多少行
colspancolspan / data-colspanNumberundefined合并单元格时定义合并多少列
aligndata-alignStringundefined设置该列数据如何对齐,'left', 'right', 'center'
haligndata-halignStringundefinedtable header对齐方式, 'left', 'right', 'center'
faligndata-falignStringundefinedtable footer对齐方式, 'left', 'right', 'center'
valigndata-valignStringundefined单元格(cell)对齐方式. 'top', 'middle', 'bottom'
widthdata-widthNumber {Pixels or Percentage}undefined列的宽度,可以使用像素或者百分比,不带单位则默认为px
sortabledata-sortableBooleanFALSE该列是否排序(表头显示双箭头)
orderdata-orderString'asc'该列默认的排序方式, 'asc' or 'desc'.
visibledata-visibleBooleanTRUE该列是否可见
cardVisibledata-card-visibleBooleanTRUE在card视图里是否可见
switchabledata-switchableBooleanTRUEFalse to disable the switchable of columns item.
clickToSelectdata-click-to-selectBooleanTRUE是否选中checkbox或者radio,当该列被选择时
formatterdata-formatterFunctionundefined格式化单元格内容,function(value, row, index), value:该cell本来的值,row:该行数据,index:该行序号(从0开始)
footerFormatterdata-footer-formatterFunctionundefined格式化footer内容,function(rows),rows:所有行数据
eventsdata-eventsObjectundefinedThe cell 的事件监听,当你使用formatter function的时候,有三个参数:
event: the jQuery event.
value: 该cell的值
row: 该行的数据
index: 该行的序号
sorterdata-sorterFunctionundefined自定义字段排序函数,function(a, b)
sortNamedata-sort-nameStringundefined当列中有html等标签时,只排序实际内容(忽略标签和样式),例如字段为:"<b><span style="color:red">abc</span></b>",则sortName=abc
cellStyledata-cell-styleFunctionundefined单元格样式,支持css和classes,function(value, row, index)
value: 该cell的值
row: 该行的数据
index: 该行的序号
searchabledata-searchableBooleanTRUE搜索时是否搜索此列
searchFormatterdata-search-formatterBooleanTRUE搜索是否使用格式化后的数据(即显示在页面上的数据)
事件
Option 事件
jQuery 事件
参数
描述
onAllall.bs.tablename, args所有的事件都会触发该事件,参数包括:
name:事件名,
args:事件的参数。
onClickRowclick-row.bs.tablerow, $element当用户点击某一行的时候触发,参数包括:
row:点击行的数据,
$element:tr 元素。
onDblClickRowdbl-click-row.bs.tablerow, $element当用户双击某一行的时候触发,参数包括:
row:点击行的数据,
$element:tr 元素。
onClickCellclick-cell.bs.tablefield, value, row, $element当用户点击某一列的时候触发,参数包括:
field:点击列的 field 名称,
value:点击列的 value 值,
row:点击列的整行数据,
$element:td 元素。
onDblClickCelldbl-click-cell.bs.tablefield, value, row, $element当用户双击某一列的时候触发,参数包括:
field:点击列的 field 名称,
value:点击列的 value 值,
row:点击列的整行数据,
$element:td 元素。
onSortsort.bs.tablename, orderFires when user sort a column, the parameters contains:
name: the sort column field name
order: the sort column order.
onCheckcheck.bs.tablerowFires when user check a row, the parameters contains:
row: the record corresponding to the clicked row. $element: the DOM element checked.
onUncheckuncheck.bs.tablerowFires when user uncheck a row, the parameters contains:
row: the record corresponding to the clicked row. $element: the DOM element unchecked.
onCheckAllcheck-all.bs.tablerowsFires when user check all rows, the parameters contains:
rows: array of records corresponding to newly checked rows.
onUncheckAlluncheck-all.bs.tablerowsFires when user uncheck all rows, the parameters contains:
rows: array of records corresponding to previously checked rows.
onCheckSomecheck-some.bs.tablerowsFires when user check some rows, the parameters contains:
rows: array of records corresponding to previously checked rows.
onUncheckSomeuncheck-some.bs.tablerowsFires when user uncheck some rows, the parameters contains:
rows: array of records corresponding to previously checked rows.
onLoadSuccessload-success.bs.tabledataFires when remote data is loaded successfully.
onLoadErrorload-error.bs.tablestatusFires when some errors occur to load remote data.
onColumnSwitchcolumn-switch.bs.tablefield, checkedFires when switch the column visible.
onColumnSearchcolumn-search.bs.tablefield, textFires when search by column.
onPageChangepage-change.bs.tablenumber, sizeFires when change the page number or page size.
onSearchsearch.bs.tabletextFires when search the table.
onToggletoggle.bs.tablecardViewFires when toggle the view of table.
onPreBodypre-body.bs.tabledataFires before the table body is rendered
onPostBodypost-body.bs.tablenoneFires after the table body is rendered and available in the DOM
onPostHeaderpost-header.bs.tablenoneFires after the table header is rendered and availble in the DOM
onExpandRowexpand-row.bs.tableindex, row, $detail当点击详细图标展开详细页面的时候触发。
onCollapseRowcollapse-row.bs.tableindex, row当点击详细图片收起详细页面的时候触发。
onRefreshOptionsrefresh-options.bs.tableoptionsFires after refresh the options and before destroy and init the table
方法
使用方法的语法:$('#table').bootstrapTable('method', parameter);。
名称
参数
描述
getOptionsnone返回表格的 Options。
getSelectionsnone返回所选的行,当没有选择任何行的时候返回一个空数组。
getAllSelectionsnone返回所有选择的行,包括搜索过滤前的,当没有选择任何行的时候返回一个空数组。
getDatauseCurrentPage获得当前加载的数据。假如设置 useCurrentPage 为 true,则返回当前页的数据。
getRowByUniqueIdid根据 uniqueId 获取行数据。
loaddata加载数据到表格中,旧数据会被替换。
appenddata添加数据到表格在现有数据之后。
prependdata插入数据到表格在现有数据之前。
removeparams从表格中删除数据,包括两个参数: field: 需要删除的行的 field 名称。
values: 需要删除的行的值,类型为数组。
removeAll-删除表格所有数据。
removeByUniqueIdid根据 uniqueId 删除指定的行。
insertRowparams插入新行,参数包括:
index: 要插入的行的 index。
row: 行的数据,Object 对象。
updateRowparams更新指定的行,参数包括:
index: 要更新的行的 index。
row: 行的数据,Object 对象。
showRowparams显示指定的行,参数包括:
index: 要显示的行的 index 或者 uniqueId。
isIdField: 指定 index 是否为 uniqueid。
hideRowparams隐藏指定的行,参数包括:
index: 要隐藏的行的 index。
uniqueId: 获取要更新的行的 uniqueid
getRowsHiddenshow获得所有隐藏的行
mergeCellsoptions合并一些单元格到另一个单元格,options包含:
index:行序号
field:字段名
rowspan:合并的行数
colspan:合并的列数
updateCellparams更新单元格的值
index: 行序号
field: 字段名
value: 值
refreshparams刷新远程数据, {silent: true} 刷新客户端数据,{url: newUrl}根据newUrl刷新数据,还支持设置参数哦{query: {foo: 'bar'}}
refreshOptionsoptions刷新options
showLoadingnone显示loading
hideLoadingnone隐藏loading
checkAllnone选中当前页的所有行
uncheckAllnone取消选中当前页的所有行
checkindex选中一行,行序号从0开始
uncheckindex取消选中一行,行序号从0开始
checkByparams枚举搜索行
$("#table").bootstrapTable("checkBy", {field:"field_name", values:["value1","value2","value3"]})
搜索字段名为field_name的列中,value是value1或者value2或者value3的行
uncheckByparams与checkBy相反
resetViewparams重置表格视图的属性,比如:height等
resetWidthnone自动重置header和footer以适应当前的列宽
destroynone销毁当前表格
showColumnfield显示指定的列
hideColumnfield隐藏指定的列
getHiddenColumns-获取隐藏的列。
scrollTovalue滚动到指定位置,单位为 px,设置 'bottom' 表示跳到最后。
getScrollPositionnone获取当前滚动条的位置,单位为 px。
filterByparams(只能用于 client 端)过滤表格数据, 你可以通过过滤{age: 10}来显示 age 等于 10 的数据。
selectPagepage跳到指定的页。
prevPagenone跳到上一页。
nextPagenone跳到下一页。
togglePaginationnone切换分页选项。
toggleViewnone切换 card/table 视图
expandRowindex扩展的行索引参数如果通过细节视图选项设置为True
collapseRowindex瓦解的行索引参数如果通过细节视图选项设置为True
expandAllRowsis subtable扩展所有行如果细节视图选项设置为True
collapseAllRowsis subtable瓦解所有行如果细节视图选项设置为True
多语言
Name
Parameter
Default
说明
formatLoadingMessage-'Loading, please wait…'loading时显示的text
formatRecordsPerPagepageNumber'%s records per page'每页显示数text
formatShowingRowspageFrom, pageTo, totalRows'Showing %s to %s of %s rows'现在显示的是1to 10条记录text
formatDetailPaginationtotalRows'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']);
// ...

内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签: