Rumah hujung hadapan web Tutorial Bootstrap Bootstrap Table API 中文版(翻译文档)

Bootstrap Table API 中文版(翻译文档)

Aug 20, 2019 pm 02:57 PM

Bootstrap Table API 中文版(翻译文档)

  看网上有中文版的,但有些就是字面直接译过来了,而且有的就没有翻译,那就打算自己再翻译一遍,每一条会尽最大可能结合尽可能多资料翻译,如果发现译的内容比英文多,是添加了更详细的说明,表的名称,属性,类型,默认值不翻译,例如:"class"、"id"等不翻译。有错请提出,会及时改正,谢谢。

推荐教程:bootstrap教程

1、“名称”可以写在$('#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
        });
Salin selepas log masuk

2、“属性”放在声明表内,如:

<!--例子应该很好看懂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>
Salin selepas log masuk

3、如果名称和属性功能类似,则任意一个地方就够了,不用重复定义,有的属性写在js里比名称写在声明表中更为简单,or vice verse(有的属性必须要写,对应的名称只是表示是否启用那个属性)


表的各项(Table options )

定义在 jQuery.fn.bootstrapTable.defaults 文件内

名称属性类型默认值作用描述
-data-toggleStringtable只要引入 jquery、bootstrap 、bootstrap-table的包,不用在js里面定义就可以使用
默认有写data-toggle="table",data-toggle应该知道吧,常用的有"tooltip、popover等等",这边就不说了
classesdata-classesStringtable table-hover表的class属性,如果没有自己定义,则默认有边框,并且当鼠标悬浮在那一行,背景会变为浅灰色.
sortClassdata-sort-classStringundefined声明表格td的class名,代表此列元素的class名将被排序
heightdata-heightNumberundefined表格的高度
undefinedTextdata-undefined-textString-当不写任何内容默认显示'-'
stripeddata-stripedBooleanfalse默认false,当设为true,则每行表格的背景会显示灰白相间
sortNamedata-sort-nameStringundefined定义哪一列的值会被排序,写data-field的自定义名,没定义默认都不排列,同下面的sortOrder结合使用,没写的话列默认递增(asc)
sortOrderdata-sort-orderStringasc同上面的结合使用,默认递增(asc),也可设为递减(desc)
sortStabledata-sort-stableBooleanfalse(别看错了,是sortStable,sortable在下面)默认false,设为true,则和sort部分一样,区别是:在排序过程中,如果存在相等的元素,则原来的顺序不会改变。原文还有一句:(如果你把此属性设为了true)我们将为此行添加'_position'属性
iconsPrefixdata-icons-prefixStringglyphicon定义字体库 ('Glyphicon' or 'fa' for FontAwesome),使用"fa"时需引用 FontAwesome,并且配合 icons 属性实现效果 Glyphicon 集成于Bootstrap可免费使用
iconSizedata-icon-sizeStringundefined定义的图标大小:
- undefined =>默认表示默认的按钮尺寸(btn)
- xs =>超小按钮的尺寸(btn-xs)
- sm =>小按钮的尺寸(btn-sm)
- lg =>大按钮的尺寸(btn-lg)
buttonsClassdata-buttons-classStringdefault按钮的类,默认为default。
- 可选的有:primary、danger、warning等等
- 写了之后会自动转换为btn-primary(蓝色)、btn-danger(红色)、btn-warning(黄色)等格式,所以前面不要再加"btn-",默认为btn-default(白色)
- 参考菜鸟教程:Bootstrap 按钮
iconsdata-iconsObject{ 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",后面是服务器发来的字段名
dataFielddata-data-fieldStringrows - 名称写自己定义的每列的字段名,也就是key,通过key才能给某行的某列赋value。
- 原文:获取每行数据json内的key
- 例如:{"name":"zz","age":20},name和age就是key,如果这是从服务端请求的json,那可能和每列定义的字段不同,但都是唯一的
ajaxdata-ajaxFunctionundefined - ajax方法,和jQuery的ajax方法类似
methoddata-methodStringget向服务器请求远程数据的方式,默认为'get',可选'post'
urldata-urlStringundefined向服务器请求的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)
cachedata-cacheBooleantrue默认缓存ajax请求,设为false则禁用缓存
contentTypedata-content-typeStringapplication/json请求数据的contentType(内容类型),用于定义文件的类型,决定接收方以什么形式读取这个文件。
- 默认application/json,用来告诉接收端从服务器发来的消息是序列化后的json字符串
dataTypedata-data-typeStringjson期望从服务器获取的数据的类型,默认为json格式字符串
ajaxOptionsdata-ajax-optionsObject{}向服务器请求ajax时的附加项,默认无附加
- 参考 jQuery.ajax()
queryParamsdata-query-paramsFunction
function(params){
return params;}
Salin selepas log masuk
当请求数据时,你可以通过修改queryParams向服务器发送其余的参数。
- queryParamsType="limit",它的参数包括:limit,offset,search,sort,order Else
- params包括:pageSize,pageNumber,searchText,sortName,sortOrder
- 当return false,请求则终止
queryParamsTypedata-query-params-typeStringlimit默认"limit",设置该属性用来发送符合RESTful格式的参数
responseHandlerdata-response-handlerFunction
function(res){
return res;}
Salin selepas log masuk
在加载服务器发送来的数据之前,处理数据的格式,参数res表示the response data(获取的数据)
paginationdata-paginationBooleanfalse默认为false,表格的底部工具栏不会显示分页条(pagination toolbar),可以设为true来显示
paginationLoopdata-pagination-loopBooleantrue默认true,分页条无限循环
onlyInfoPaginationdata-only-info-paginationBooleanfalse前提:pagination设为true,启用了分页功能。
- 默认false,设为true显示总记录数
sidePaginationdata-side-paginationStringclient设置在哪进行分页,默认"client",可选"server",如果设置 "server",则必须设置url或者重写ajax方法
- 请记住,如果服务端分页选项使用了自定义的,那么请求的服务器响应格式是不同的,参考下面两个数据格式:
Without server-side pagination(没有启用服务端分页)
With server-side pagination(启用服务端分页)
pageNumberdata-page-numberNumber1前提:pagination设为true,启用了分页功能。
- 默认第1页,用于设置初始的页数
pageSizedata-page-sizeNumber10前提:pagination设为true,启用了分页功能。
- 默认每页显示10条记录,用于设置每页初始显示的条数
pageListdata-page-listArray[10, 25, 50, 100]前提:pagination设为true,启用了分页功能。
- 默认为[10, 25, 50, 100],即可以选择"每页显示10/25/50/100条记录",用于设置选择每页显示的条数
selectItemNamedata-select-item-nameStringbtSelectItemradio(单选按钮)或checkbox(复选框)的字段名
smartDisplaydata-smart-displayBooleantrue默认为true,会机智地(<_<)根据情况显示分页(pagination)或卡片视图(card view)
escapedata-escapeBooleanfalse跳过插入HTML中的字符串,替换掉特殊字符(后面符号没有逗号):&,<,>,",`,'
searchdata-searchBooleanfalse默认false不显示表格右上方搜索框 ,可设为true,在搜索框内只要输入内容即开始搜索
searchOnEnterKeydata-search-on-enter-keyBooleanfalse默认false不启用,设为true启用,比功能是与上面相比,在搜索框内输入内容并且按下回车键才开始搜索
strictSearchdata-strict-searchBooleanfalse设为true,开启精确搜索
searchTextdata-search-textString""前提:search设为true,启用了搜索功能。
- 搜索框初始显示的内容,默认空字符串
searchTimeOutdata-search-time-outNumber500前提:search设为true,启用了搜索功能。
- 设置搜索文件的超时时间(原文:Set timeout for search fire,不知道是写错了还是我知识面太窄,"search fire"是什么意思,官方API错了?给我整蒙逼了)
trimOnSearchdata-trim-on-searchBooleantrue默认true,自动忽略空格
showHeaderdata-show-headerBooleantrue默认为true显示表头,设为false隐藏
showFooterdata-show-footerBooleanfalse默认为false隐藏表尾,设为true显示
showColumnsdata-show-columnsBooleanfalse默认为false隐藏某列下拉菜单,设为true显示
showRefreshdata-show-refreshBooleanfalse默认为false隐藏刷新按钮,设为true显示
showToggledata-show-toggleBooleanfalse默认为false隐藏视图切换按钮,设为true显示
showPaginationSwitchdata-show-pagination-switchBooleanfalse默认为false隐藏每页数据条数选择,设为true显示
minimumCountColumnsdata-minimum-count-columnsNumber1每列的下拉菜单最小数
idFielddata-id-fieldStringundefined表明哪个是字段是标识字段
uniqueIddata-unique-idStringundefined表明每行唯 一的标识符
cardViewdata-card-viewBooleanfalse默认false,设为true显示card view(卡片视图)
detailViewdata-card-viewBooleanfalse默认false,设为true显示detail view(细节视图)
detailFormatterdata-detail-formatterFunctionfunction(index, row, element){
return '';}
前提:detailView设为true,启用了显示detail view。
- 用于格式化细节视图
- 返回一个字符串,通过第三个参数element直接添加到细节视图的cell(某一格)中,其中,element为目标cell的jQuery element
searchAligndata-search-alignStringright搜索框的位置,默认right(最右),可选left
buttonsAligndata-buttons-alignStringright工具栏按钮的位置,默认right(最右),可选left
toolbarAligndata-toolbar-alignStringleft自定义工具栏的位置,默认right(最右),可选left
paginationVAligndata-pagination-v-alignStringbottom分页条垂直方向的位置,默认bottom(底部),可选top、both(顶部和底部均有分页条)
paginationHAligndata-pagination-h-alignStringright分页条水平方向的位置,默认right(最右),可选left
paginationDetailHAligndata-pagination-detail-h-alignStringleft如果解译的话太长,举个例子,paginationDetail就是“显示第 1 到第 8 条记录,总共 15 条记录 每页显示 8 条记录”,默认left(最左),可选right
paginationPreTextdata-pagination-pre-textString还是举例子,如果你内容太多,底部最右边会显示:"‹ 1 2 3 4 5 ›"来选择页数,默认就是最左边那个符号,下同
paginationNextTextdata-pagination-next-textString参考上面一条
clickToSelectdata-click-to-selectBooleanfalse默认false不响应,设为true则当点击此行的某处时,会自动选中此行的checkbox(复选框)或radiobox(单选按钮)
singleSelectdata-single-selectBooleanfalse默认false,设为true则允许复选框仅选择一行
toolbardata-toolbarString | NodeundefinedjQuery的选择器,例如:#toolbar,.toolbar,或者是DOM 结点
checkboxHeaderdata-checkbox-headerBooleantrue如果你有声明复选框,默认显示表头行的全选复选框,设为false隐藏(就是表格第一行的不显示,从第二行往后都显示)
maintainSelecteddata-maintain-selectedBooleanfalse设为true则保持被选的那一行的状态
sortabledata-sortableBooleantrue默认true,设为false禁用所有的行排列(也就是每列表头不会显示排序的按钮,这个需要在th声明data-sortable="true",写在js中只是启不启用)
slientSortdata-silent-sortBooleantrue前提:sidePagination设为server(服务端)
- 默认true,设为false则静默排序数据
rowStyledata-row-styleFunction{}改变某行的格式,需要两个参数:
- row:此行的数据
- index:此行的索引
支持classes和css,用法如下: function rowStyle(row, index){
return { classes: 'text-nowrap another-class',
css: {"color": "blue", "font-size": "50px"}
}; }
rowAttributesdata-row-attributesFunction{}改变某行的属性,需要两个参数:
- row:此行的数据
- index:此行的索引
支持所有自定义的属性。
customSearchdata-custom-searchFunction$.noop自定义搜索功能(用来代替自带的搜索功能),需要一个参数:
- text:想要搜索的内容
用法如下:
function customSearch(text){
//必须使用'this.data'对数据进行过滤(filter the data,感觉这个词也不用译),不要使用'this.options.data' }
customSortdata-custom-sortFunction$.noop自定义排序功能(用来代替自带的排序功能),需要两个参数(可以参考前面):
- sortName:需要排序的那列
- sortOrder:排序方式
用法:和上面一样,不用担心,注释也一模一样
localedata-localeStringundefined本地化(动词)。
本地化的文件必须被预加载,允许fallback(简单来说就是如果要使用的文件不可用,就可以用别的替代它,例如球场替补,没替补,如果有人受伤了,比赛不就废了),如果加载,将按如下顺序:
- 首先尝试加载的是指定的"本地化"文件
- 然后是'_'(下划线)写成'-'(破折号),并且区域代码被大写的
- 然后是短区域代码(例如:用'fr'代替'fr-CA')
- 最后使用的是剩下的本地化文件(当没有文件可加载则使用默认的)
如果剩余的undefined,或者是空字符,则使用最后一次使用的那个文件(当没有本地化文件可被加载,则使用自带的'en_US')
footerStyledata-footer-styleFunction{}改变footer格式,需要两个参数:
- row:此行的数据
- index:此行的索引
支持classes和css,用法如下:
function rowStyle(value,row, index){
return { css: { "font-weight": "bold" } }; }


列的各项(Column options )

定义在 jQuery.fn.bootstrapTable.columnDefaults 文件内


名称属性类型默认值作用描述
radiodata-radioBooleanfalse默认false不显示radio(单选按钮),设为true则显示,radio宽度是固定的
checkboxdata-checkboxBooleanfalse默认false不显示checkbox(复选框),设为true则显示,checkbox的每列宽度已固定
fielddata-fieldStringundefined是每列的字段名,不是表头所显示的名字,通过这个字段名可以给其赋值,相当于key,表内唯一
titledata-titleStringundefined这个是表头所显示的名字,不唯一,如果你喜欢,可以把所有表头都设为相同的名字
titleTooltipdata-title-tooltipStringundefined当悬浮在某控件上,出现提示
- 参考 Bootstrap 提示工具(Tooltip)插件
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每格数据的对齐方式,有:top(靠上)、middle(居中)、bottom(靠下)
widthdata-widthNumber(单位:px或%)undefined每列的宽度。
- 如果没有自定义宽度,那么宽度会根据内容的宽度自适应。
- 如果表是左适应(left responsive)或者设置的宽度小于内容的宽度,那么,宽度还是会自适应(可以在class或其他的属性中使用 min-width 或 max-width)。
- 你也可以使用"%"作为单位,这样的话,bootstapTable将按百分比划分,如果你想使用"pixels(像素值)",你可以只写数字(只要不加"%",单位默认"px",不嫌麻烦,或者想更清晰,你也可以加上"px")
sortabledata-sortableBooleanfalse默认false就默认显示,设为true则会被排序
orderdata-orderStringasc默认的排序方式为"asc(升序)",也可以设为"desc(降序)"。
- 与上面的结合使用,不然都不让排序了,你还考虑什么升降。
visibledata-visibleBooleantrue默认为true显示该列,设为false则隐藏该列。
- 还是很有用的,例如隐藏自定义index列,按某属性排序后会变乱,你可以读取某行的index来进行赋值
cardVisibledata-card-visibleBooleantrue默认为true显示该列,设为false则隐藏。
switchabledata-switchableBooleantrue默认为true显示该列,设为false则禁用列项目的选项卡。
clickToSelectdata-click-to-selectBooleantrue默认true不响应,设为false则当点击此行的某处时,不会自动选中此行的checkbox(复选框)或radiobox(单选按钮)
formatterdata-formatterFunctionundefined需要此列的对象。
某格的数据转换函数,需要三个参数:
-value: field(字段名)
-row:行的数据
-index:行的(索引)index
footerFormatterdata-footer-formatterFunctionundefined需要此列的对象。
某格的数据转换函数,需要一个参数:
-data: 所有行数据的数组
函数需要返回(return)footer某格内所要显示的字符串的格式,还要包括内容
eventsdata-eventsObjectundefined当某格使用formatter函数时,事件监听会响应,需要四个参数:
-event:jQuery事件(参考Events)。
- value:字段名
- row:行数据
- index:此行的index
举个例子:
var operateEvents = {'click .like': function (e, value, row, index) {}};
sorterdata-sorterFunctionundefined自定义的排序函数,实现本地排序,需要两个参数:
- a:第一个字段名
- b:第二个字段名
sortNamedata-sort-nameStringundefined除了表头默认的sort-name或列的字段名,还可以使用自定义的sort-name
对特殊情况说明:
- 一个列显示的内容或许是"html"代码,如:abc,但是被排列的是html代码中的内容(content):abc
cellStyledata-cell-styleFunctionundefined对某格中显示样式(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-searchableBooleantrue默认true,表示此列数据可被查询
searchFormatterdata-search-formatterBooleantrue默认true,可使用格式化的数据查询
escapedata-escapeBooleanfalse跳过插入HTML中的字符串,替换掉特殊字符(后面符号没有逗号):&,<,>,",`,'

事件(Events)

定义事件的格式:

$(’#table’).bootstrapTable({
onEventName: function (arg1, arg2, …) {
// …
} });

$(’#table’).on(‘event-name.bs.table’, function (e, arg1, arg2, …) {
// …
});
Salin selepas log masuk
中的内容没显示前触发中的内容被加载完后或者在你所用的DOM中有定义则被触发中的内容被加载完后或者在你所用的DOM中有定义则被触发
事件名定义在jQuery中的事件名参数作用描述
onAllall.bs.tablename, args当所有触发器被触发时都执行此函数,就是所有的事件都会触发该事件,参数包括:
- name:事件名
- args:事件的数据
onClickRowclick-row.bs.tablerow, $element, field当单击此行的任意一处,就会触发该事件,所需参数如下(只是按原文译过来的,在bootstraptable的js中不需要这些参数,因为单击该行就会获得一个row,row中包括此行所有数据,只要通过此行某列的字段名即可取出):
- row:哪一行(从0开始)
- $element:该行(tr)
- field:当点击该行,你想获取此行哪一格的数据,field就是此列字段名
onDblClickRowdbl-click-row.bs.tablerow, $element, field和上面差不多,当双击(666)此行的任意一处,就会触发该事件,所需参数如下(只是按原文译过来的,在bootstraptable的js中不需要这些参数,因为双击该行就会获得一个row,row中包括此行所有数据,只要通过此行某列的字段名即可取出):
- row:哪一行(从0开始)
- $element:该行(tr)
- field:当点击该行,你想获取此行哪一格的数据,field就是此列字段名
onClickCellclick-cell.bs.tablefield, value, row, $element当单击某一格,就会触发该事件,所需参数如下:
- field:此格所在列的字段名
- value:此格的数据
- $element:此行的此列,就是此格(td)
onDblClickCelldbl-click-cell.bs.table field, value, row, $element当双击某一格,就会触发该事件,所需参数如下:
- field:此格所在列的字段名
- value:此格的数据
- $element:此行的此列,就是此格(td)
onSortsort.bs.tablename, order当对某列进行排序时触发该事件,所需参数如下:
- name:所排序的列的字段名
- order:所排的顺序
onCheckcheck.bs.tablerow, $element当选择(check)此行时触发,所需的参数如下:
- row:所选择的行的字段名
- $element:此行的DOM元素
onUncheckuncheck.bs.tablerow, $element当取消选择(uncheck)此行时触发,所需的参数如下:
- row:所取消选择的行的字段名
- $element:此行的DOM元素
onCheckAllcheck-all.bs.tablerows当全选行时触发,所需的参数如下:
- rows:最近(newly)所选择的行的字段名的数组
onUncheckAlluncheck-all.bs.tablerows当取消全选行时触发,所需的参数如下:
- rows:之前或上次(previously)所选择的行的字段名的数组
onCheckSome check-some.bs.tablerows当选择(check)某些行(多行,rows)时触发,所需的参数如下:
- rows:之前或上次(previously)所选择的行的字段名的数组
onUncheckSomeuncheck-some.bs.tablerows当取消选择(uncheck)某些行(多行,rows)时触发,所需的参数如下:
- rows:之前或上次(previously)所选择的行的字段名的数组
onLoadSuccess load-success.bs.tabledata当所有数据被加载时触发
onLoadErrorload-error.bs.tablestatus, res当加载某些数据出现错误时触发
onColumnSwitchcolumn-switch.bs.tablefield, checked当某列改变是否可见的状态时触发
onColumnSearchcolumn-search.bs.tablefield, text当某列被查询时触发
onPageChangepage-change.bs.tablenumber, size当改变此页所显示的数据条数或改变页码时触发
onSearchsearch.bs.tabletext当查询此表时触发
onToggletoggle.bs.tablecardView当改变表的视图时触发
onPreBodypre-body.bs.tabledata
onPostBodypost-body.bs.tabledata
onPostHeaderpost-header.bs.tablenone
onExpandRowexpand-row.bs.tableindex, row, $detail当查看详细视图(点击查看detail的图标)时触发
onCollapseRowcollapse-row.bs.tableindex, row当关闭详细视图(再次点击查看detail的图标)时触发
onRefreshOptionsrefresh-options.bs.tableoptions当刷新各项后或在初始化表(也包括销毁了再初始化)之前触发
onResetViewreset-view.bs.table
当重置(reset)表的视图时触发
onRefresh refresh.bs.tableparams当点击刷新按钮(refresh,不是浏览器的,而是表格右上角的刷新按钮)后触发

方法(Methods)

定义方法响应的语法 $(&#39;#table&#39;).bootstrapTable(&#39;method&#39;, parameter);

方法名参数描述举例
getOptionsnone返回各项的object$table.bootstrapTable('getOptions');
- 请查看: getOptions
getSelectionsnone返回被选择的行,当没有行被选择,则返回空数组(但并不是undefined,也不是null,是长度为0的空数组,所以可以判断长度是否大于0来确定是否选择了行)$table.bootstrapTable('getSelections');
- 请查看: getSelections
getAllSelectionsnone返回所有被选的行(原文中:contain search or filter,其实就是你选择的筛选之后的数据),当没有行被选择,则返回空数组$table.bootstrapTable('getAllSelections');
- 请查看: getAllSelections
showAllColumnsnone显示所有的列$table.bootstrapTable('showAllColumns');
- 就是显示所有的列,并没什么可说的
hideAllColumnsnone隐藏所有的列$table.bootstrapTable('hideAllColumns');
- 就是隐藏所有的列
getDatauseCurrentPage获取被加载的表的数据,如果你设置了使用当前页的数据(useCurrentPage),则返回当前页的数据$table.bootstrapTable('getData');
- 请查看: getData
getRowByUniqueIdid获取你想要的某行的数据(设置某行的id)$table.bootstrapTable('getRowByUniqueId', 1);后面的1就是你要的那一行的ID
- 请查看: getRowByUniqueId
loaddata向表中加载数据,原来的数据将被移除$table.bootstrapTable('load', data);
- 请查看: load
appenddata将数据追加在最后一行后$table.bootstrapTable('append', data);data可以是数组
- 请查看: append
prependdata也是追加,只是在第一行之前$table.bootstrapTable('prepend', data);data可以是数组
- 请查看: prepend
removeparams移除一行或多行你所选的数据$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
insertRowparams新增一行,所需的参数如下:
- index:你想插入到哪(只要愿意,想插哪就插哪,想插谁就插谁)
- row:你想插入的数据
$table.bootstrapTable('insertRow', {index: 1, row: row});
- 请查看: insertRow
updateRowparams更新行数据,所需的参数如下:
- index:所要更新的行的索引(index)
- row:你想换的新的数据
$table.bootstrapTable('updateRow', {index: 1, row: row});
- 请查看: updateRow
updateByUniqueIdparams更新某行数据,所需的参数如下:
- id:你想更新那行的id(唯一),(只要愿意,想换哪个换哪个)
- row:你想换的新的数据
$table.bootstrapTable('updateByUniqueId', {id: 3, row: row});
- 请查看: updateByUniqueId
showRowparams显示特定行,所需的参数至少包括下面所列的一个:
- id:所要显示的行的索引(index)
- uniqueId:那一行的id
$table.bootstrapTable('showRow', {index:1});
- 请查看: showRow/hideRow
hideRowparams隐藏特定行,所需的参数至少包括下面所列的一个:
- id:所要隐藏的行的索引(index)
- uniqueId:那一行的id
$table.bootstrapTable('hideRow', {index:1});
- 请查看: showRow/hideRow
getRowsHiddenboolean获取隐藏的行(官方原话很多,其实总结起来就前面那一句)$table.bootstrapTable('getRowsHidden');
mergeCellsoptions融合~(把多格合并为一格),所需的参数如下:
- index:所要合并的格所在行的索引(index)
- field:所在列的字段名
- rowspan:合并的行总数目
- colspan:合并的列总数目
$table.bootstrapTable('mergeCells', {index: 1, field: 'name', colspan: 2, rowspan: 3});
- 请查看: mergeCells
updateCellparams更新某格数据,所需的参数如下:
- index:所要合并的格所在行的索引(index)
- field:所在列的字段名
- value:要换的新的数据
你也可以设置{reinit:false}来禁用表格的再次初始化
$table.bootstrapTable('updateCell',{index:index,field:'id',value:value});
refreshparams刷新服务端的数据:
- 可以设置{silent:true}来偷偷地(<_<)刷新
- 设置{url:newUrl,pageNumber:pageNumber,
pageSize:pageSize}改变请求的地址,页数,每页所显示的条数
- 可以设置{query:{foo:'bar'}}增加特定的参数
$table.bootstrapTable('refresh');
- 请查看: refresh
refreshOptionsoptions看例子吧 - 请查看: refreshOptions
resetSearchtext重置搜索的文本(text) - 请查看: resetSearch
showLoadingnone显示正在加载…… - 请查看: showLoading/hideLoading
hideLoadingnone隐藏正在加载…… - 请查看: showLoading/hideLoading
checkAllnone选择当前页的所有行$table.bootstrapTable('checkAll');
- 请查看: checkAll/uncheckAll
uncheckAllnone取消选择当前页的所有行$table.bootstrapTable('uncheckAll');
- 请查看: checkAll/uncheckAll
checkInvertnone反向选择,不难理解吧$table.bootstrapTable('checkInvert');
checkindex选择某一行,索引(index)从0开始$table.bootstrapTable('check', 1);
- 请查看: check/uncheck
uncheckindex取消选择某一行,索引(index)从0开始$table.bootstrapTable('uncheck', 1);
- 请查看: check/uncheck
checkByparams通过数组选择某一行,所需的参数如下:
- field:所要选的字段名
- values:所要选的那些值(数组)
官方没,啊,有例纸:
- $("#table").bootstrapTable("checkBy", { field:"field_name", values:["value1","value2","value3"]});
- 请查看: checkBy/uncheckBy
uncheckByparams通过数组选择某一行,所需的参数如下:
- field:所要取消选择的字段名
- values:所要取消选择的那些值(数组)
$("#table").bootstrapTable("uncheckBy", { field:"field_name", values:["value1","value2","value3"]});
- 请查看: checkBy/uncheckBy
resetViewparams改变表格的样式,例如改变表格的高度(height)$table.bootstrapTable('resetView');
- 请查看: resetView
resetWidthnone自动改变表头和表脚(就译成脚,任性)的宽度来适应每列的宽度$table.bootstrapTable('resetWidth');
destroynone销毁表格 A!T!T!A!C!K!$table.bootstrapTable('destroy');
- 请查看: destroy
showColumnfield显示特定的列$table.bootstrapTable('showColumn', 'name');
- 请查看: showColumn/hideCoulumn
hideColumnfield隐藏特定的列$table.bootstrapTable('hideColumn', 'name');
- 请查看: showColumn/hideCoulumn
getHiddenColumns-获取所有隐藏的列$table.bootstrapTable('getHiddenColumns');
getVisibleColumns-获取所有显示的列$table.bootstrapTable('getVisibleColumns');
scrollTovalue滚……到哪个位置,单位是'px',如果设为'bottom',嗖,恭喜你已到表尾$table.bootstrapTable('scrollTo', 0);
- 请查看: scrollTo
getScrollPositionnone获取当前所滚到的位置,单位你懂得,就是'px'$table.bootstrapTable('getScrollPosition');
filterBynone只能在客户端(client-side,相对server-side)这边用,过滤表中的数据
例如:
- 可以设置{age:10}来只显示age为10的数据
- 不仅单的,你还可以双飞,甚至多p,设置{age: 10, hairColor: ["blue", "red", "green"]} ,这样你就得到了一群10岁的,头发颜色为蓝,红,绿的……数据
$table.bootstrapTable('filterBy', { id: [1, 2, 3] });
- 请查看: filterBy
selectPagepage跳转到特定的页面$table.bootstrapTable('selectPage', 1);
- 请查看: selectPage/prevPage/nextPage
prevPagenone跳转到上一页$table.bootstrapTable('prevPage');
- 请查看: selectPage/prevPage/nextPage
nextPagenone跳转到下一页$table.bootstrapTable('nextPage');
- 请查看: selectPage/prevPage/nextPage
togglePaginationnone词穷,请看例纸$table.bootstrapTable('togglePagination');
- 请查看: togglePagination
toggleViewnone改变视图$table.bootstrapTable('toggleView');
- 请查看: toggleView
expandRowindex可使用条件:detail view设为了true,不然无法使用视图功能,这个也没用
- 通过参数index来展开此列的详细视图
- 请查看: expandRow-collapseRow
collapseRowindex可使用条件:detail view设为了true
- 通过参数index来关闭此列的详细视图
- 请查看: expandRow-collapseRow
expandAllRows
新版有更改(原来为"expandAllRow"),下同
感谢 @zhq449681061
is subtable可使用条件:detail view设为了true
- 展开所有列的详细视图
$table.bootstrapTable('expandAllRows');
- 参考上面的实例,上面是展开(折叠)某一行的视图,这个是所有行的
collapseAllRowsis subtable可使用条件:detail view设为了true
- 关闭所有列的详细视图
$table.bootstrapTable('collapseAllRows');
- 参考上面


本地化,切换为另一种语言(Localizations)

默认显示英文,如果想使用中文,首先引入:

<script src="bootstrap-table-zh-CN.js"></script>
Salin selepas log masuk

然后是三种声明使用的方法(个人只使用第二、三种),如下:


第一种:

$.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales[&#39;zh-CN&#39;]);
Salin selepas log masuk

第二种:

<table data-toggle="table" data-locale="zh-CN"></table>
Salin selepas log masuk

第三种:

$(&#39;table&#39;).bootstrapTable({locale:&#39;zh-CN&#39;});
Salin selepas log masuk

以下说明除了数字外均为中文默认显示,本来不用写的,只要引入就显示中文了

名称 参数 默认 说明
formatLoadingMessage - 'Loading, please wait…' “加载中,请等待……”
formatRecordsPerPage pageNumber '%s records per page' “每页显示 15  条记录”
formatShowingRows pageFrom, pageTo, totalRows 'Showing %s to %s of %s rows' “显示第 1 到第 15 条记录”
formatDetailPagination totalRows 'Showing %s rows' “总共 15 条记录”
formatSearch - 'Search' “搜索”(占位符)
formatNoMatches - 'No matching records found' “没有找到匹配的记录”
formatRefresh - 'Refresh' “刷新”(鼠标悬浮显示的文字,下同)
formatToggle - 'Toggle' “切换”
formatColumns - 'Columns' “列”

  有错请留言,看到后会及时更改,如果像那种翻译的行写成列或漏字等低级错误,看英文名称就知道有没有错了,主要就是为了让你们知道怎么用,会持续检查哪有误、漏译,如果认为有译得不妥的地方,也可以留言一起讨论,谢谢

Atas ialah kandungan terperinci Bootstrap Table API 中文版(翻译文档). Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!

Kenyataan Laman Web ini
Kandungan artikel ini disumbangkan secara sukarela oleh netizen, dan hak cipta adalah milik pengarang asal. Laman web ini tidak memikul tanggungjawab undang-undang yang sepadan. Jika anda menemui sebarang kandungan yang disyaki plagiarisme atau pelanggaran, sila hubungi admin@php.cn

Alat AI Hot

Undresser.AI Undress

Undresser.AI Undress

Apl berkuasa AI untuk mencipta foto bogel yang realistik

AI Clothes Remover

AI Clothes Remover

Alat AI dalam talian untuk mengeluarkan pakaian daripada foto.

Undress AI Tool

Undress AI Tool

Gambar buka pakaian secara percuma

Clothoff.io

Clothoff.io

Penyingkiran pakaian AI

AI Hentai Generator

AI Hentai Generator

Menjana ai hentai secara percuma.

Artikel Panas

R.E.P.O. Kristal tenaga dijelaskan dan apa yang mereka lakukan (kristal kuning)
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Tetapan grafik terbaik
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
R.E.P.O. Cara Memperbaiki Audio Jika anda tidak dapat mendengar sesiapa
4 minggu yang lalu By 尊渡假赌尊渡假赌尊渡假赌
WWE 2K25: Cara Membuka Segala -galanya Di Myrise
1 bulan yang lalu By 尊渡假赌尊渡假赌尊渡假赌

Alat panas

Notepad++7.3.1

Notepad++7.3.1

Editor kod yang mudah digunakan dan percuma

SublimeText3 versi Cina

SublimeText3 versi Cina

Versi Cina, sangat mudah digunakan

Hantar Studio 13.0.1

Hantar Studio 13.0.1

Persekitaran pembangunan bersepadu PHP yang berkuasa

Dreamweaver CS6

Dreamweaver CS6

Alat pembangunan web visual

SublimeText3 versi Mac

SublimeText3 versi Mac

Perisian penyuntingan kod peringkat Tuhan (SublimeText3)

Adakah saya perlu menggunakan Flexbox di tengah gambar bootstrap? Adakah saya perlu menggunakan Flexbox di tengah gambar bootstrap? Apr 07, 2025 am 09:06 AM

Terdapat banyak cara untuk memusatkan gambar bootstrap, dan anda tidak perlu menggunakan Flexbox. Jika anda hanya perlu berpusat secara mendatar, kelas pusat teks sudah cukup; Jika anda perlu memusatkan elemen secara menegak atau berganda, Flexbox atau Grid lebih sesuai. Flexbox kurang serasi dan boleh meningkatkan kerumitan, manakala grid lebih berkuasa dan mempunyai kos pengajian yang lebih tinggi. Apabila memilih kaedah, anda harus menimbang kebaikan dan keburukan dan memilih kaedah yang paling sesuai mengikut keperluan dan keutamaan anda.

Cara mendapatkan bar carian bootstrap Cara mendapatkan bar carian bootstrap Apr 07, 2025 pm 03:33 PM

Cara menggunakan Bootstrap untuk mendapatkan nilai bar carian: Menentukan ID atau nama bar carian. Gunakan JavaScript untuk mendapatkan elemen DOM. Mendapat nilai elemen. Lakukan tindakan yang diperlukan.

Bagaimanakah saya menyesuaikan penampilan dan tingkah laku komponen Bootstrap? Bagaimanakah saya menyesuaikan penampilan dan tingkah laku komponen Bootstrap? Mar 18, 2025 pm 01:06 PM

Artikel membincangkan penyesuaian penampilan dan tingkah laku Bootstrap menggunakan pembolehubah CSS, SASS, CSS adat, JavaScript, dan pengubahsuaian komponen. Ia juga meliputi amalan terbaik untuk mengubahsuai gaya dan memastikan responsif merentasi peranti.

Cara melakukan pusat menegak bootstrap Cara melakukan pusat menegak bootstrap Apr 07, 2025 pm 03:21 PM

Gunakan Bootstrap untuk melaksanakan pusat menegak: Kaedah Flexbox: Gunakan kelas D-Flex, Justify-Content, dan Align-Item-Center untuk meletakkan unsur-unsur dalam bekas Flexbox. Kaedah Kelas Align-Items-Center: Bagi pelayar yang tidak menyokong Flexbox, gunakan kelas Align-Items-Center, dengan syarat unsur induk mempunyai ketinggian yang ditetapkan.

Cara Menulis Garis Pecah Di Bootstrap Cara Menulis Garis Pecah Di Bootstrap Apr 07, 2025 pm 03:12 PM

Terdapat dua cara untuk membuat garis perpecahan bootstrap: menggunakan tag, yang mewujudkan garis perpecahan mendatar. Gunakan harta sempadan CSS untuk membuat garis perpecahan gaya tersuai.

Cara memasukkan gambar di bootstrap Cara memasukkan gambar di bootstrap Apr 07, 2025 pm 03:30 PM

Terdapat beberapa cara untuk memasukkan imej dalam bootstrap: masukkan imej secara langsung, menggunakan tag HTML IMG. Dengan komponen imej bootstrap, anda boleh memberikan imej yang responsif dan lebih banyak gaya. Tetapkan saiz imej, gunakan kelas IMG-cecair untuk membuat imej boleh disesuaikan. Tetapkan sempadan, menggunakan kelas IMG-Sempadan. Tetapkan sudut bulat dan gunakan kelas IMG-bulat. Tetapkan bayangan, gunakan kelas bayangan. Saiz semula dan letakkan imej, menggunakan gaya CSS. Menggunakan imej latar belakang, gunakan harta CSS imej latar belakang.

Cara mengubah saiz bootstrap Cara mengubah saiz bootstrap Apr 07, 2025 pm 03:18 PM

Untuk menyesuaikan saiz unsur-unsur dalam bootstrap, anda boleh menggunakan kelas dimensi, yang termasuk: menyesuaikan lebar: .col-, .w-, .mw-adjust ketinggian: .h-, .min-h-, .max-h-

Cara Menyiapkan Kerangka untuk Bootstrap Cara Menyiapkan Kerangka untuk Bootstrap Apr 07, 2025 pm 03:27 PM

Untuk menubuhkan rangka kerja bootstrap, anda perlu mengikuti langkah -langkah ini: 1. Rujuk fail bootstrap melalui CDN; 2. Muat turun dan tuan rumah fail pada pelayan anda sendiri; 3. Sertakan fail bootstrap di HTML; 4. Menyusun sass/kurang seperti yang diperlukan; 5. Import fail tersuai (pilihan). Setelah persediaan selesai, anda boleh menggunakan sistem grid Bootstrap, komponen, dan gaya untuk membuat laman web dan aplikasi yang responsif.

See all articles