企业🤖AI智能体构建引擎,智能编排和调试,一键部署,支持知识库和私有化部署方案 广告
[TOC] 表选项在`jQuery.fn.bootstrapTable.defaults`中定义. ## \- 激活表 * **属性:**`data-toggle` * **类型:**`String` * **详情:** 无需编写JavaScript即可激活引导表。 * **默认:**`'table'` * **例子:**[From HTML](https://www.bootstrap-table.com.cn/examples/welcome/from-html/) ## height 表的高度 * **属性:**`data-height` * **类型:**`Number` * **详情:** 表的高度,启用表的固定标题。 * **默认:**`undefined` * **例子:**[Table Height](https://www.bootstrap-table.com.cn/examples/options/table-height/) ## classes 表的类名 * **属性:**`data-classes` * **类型:**`String` * **详情:** 表的类名。`'table'`,`'table-bordered'`,`'table-hover'`,`'table-striped'`,`'table-dark'`,`'table-sm'`和`'table-borderless'`可被使用。默认情况下,表格是有界的。 * **默认:**`'table table-bordered table-hover'` * **例子:**[Table Classes](https://www.bootstrap-table.com.cn/examples/options/table-classes/) ## theadClasses 表thead的类名 * **属性:**`data-thead-classes` * **类型:**`String` * **详情:** 表thead的类名。Bootstrap v4,使用修饰符类`.thead-light`或`.thead-dark`使用`thead`显示为浅灰色或深灰色。 * **默认:**`''` * **例子:**[Thead Classes](https://www.bootstrap-table.com.cn/examples/options/thead-classes/) ## headerStyle 标头样式 * **属性:**`data-header-style` * **类型:**`Function` * **详情:** 标头样式格式化程序函数采用一个参数: * `column`: 列对象。 支持`classes`或`css`。用法示例: ~~~javascript functionheaderStyle(column){ return{ css:{'font-weight':'normal'}, classes:'my-class' } } ~~~ * **默认:**`{}` * **例子:**[Header Style](https://www.bootstrap-table.com.cn/examples/options/header-style/) ## rowStyle 行样式 * **属性:**`data-row-style` * **类型:**`Function` * **详情:** 行样式格式化程序函数具有两个参数: * `row`: 行记录数据。 * `index`: 行索引。 支持类或CSS。 * **默认:**`{}` * **例子:**[Row Style](https://www.bootstrap-table.com.cn/examples/options/row-style/) ## rowAttributes 行属性(行的数据与索引) * **属性:**`data-row-attributes` * **类型:**`Function` * **详情:** 行属性格式化程序函数具有两个参数: * `row`: 行记录数据。 * `index`: 行索引。 支持所有自定义属性。 * **默认:**`{}` * **例子:**[Row Attributes](https://www.bootstrap-table.com.cn/examples/options/row-attributes/) ## undefinedText 定义无数据时的文本 * **属性:**`data-undefined-text` * **类型:**`String` * **详情:** 定义默认`undefined`文本。 * **默认:**`'-'` * **例子:**[Undefined Text](https://www.bootstrap-table.com.cn/examples/options/undefined-text/) ## locale 语言 * **属性:**`data-locale` * **类型:**`String` * **详情:** 设置要使用的语言环境(即`'zh-CN'`)。区域设置文件必须预先加载。如果加载了后备语言环境,则按以下顺序进行: * 首先尝试指定的语言环境, * 然后尝试将'\_'转换为'-'并将区域代码大写的语言环境, * 然后尝试使用简短的语言环境代码(即`'zh'`代替`'zh-CN'`), * 最后,将使用最后一个加载的语言环境文件(如果未加载语言环境,则使用默认语言环境)。 如果为左`undefined`字符串或为空字符串,则使用上次加载的语言环境(或`'en-US'`如果未加载任何语言环境文件)。 * **默认:**`undefined` * **例子:**[Table Locale](https://www.bootstrap-table.com.cn/examples/options/table-locale/) ## virtualScroll 虚拟滚动(不知道什么效果) * **属性:**`data-virtual-scroll` * **类型:**`Boolean` * **详情:** 设置`true`为启用虚拟滚动以显示虚拟的 “infinite” 列表。 * **默认:**`false` * **例子:**[Large Data](https://www.bootstrap-table.com.cn/examples/options/large-data/) ## virtualScrollItemHeight (???) * **属性:**`data-virtual-scroll-item-height` * **类型:**`Number` * **详情:** 如果未定义此选项,则默认情况下我们将使用第一项的高度。 如果虚拟项目的高度将明显大于默认高度,则提供此功能非常重要。此维度用于帮助确定初始化时应创建多少个单元格,并帮助计算可滚动区域的高度。此高度值只能使用`px`单位。 * **默认:**`undefined` * **例子:**[Virtual Scroll Item Height](https://www.bootstrap-table.com.cn/examples/options/virtual-scroll-item-height/) ## sortable 设置所有的的可排序状态 * **属性:**`data-sortable` * **类型:**`Boolean` * **详情:** 设置`false`为禁用所有列的可排序。 * **默认:**`true` * **例子:**[Table Sortable](https://www.bootstrap-table.com.cn/examples/options/table-sortable/) ## sortClass `td`排序的元素的类名称(有啥效果?) * **属性:**`data-sort-class` * **类型:**`String` * **详情:** `td`排序的元素的类名称。 * **默认:**`undefined` * **例子:**[Sort Class](https://www.bootstrap-table.com.cn/examples/options/sort-class/) ## silentSort 点击排序后加载数据时的启用正在加载数据的提示 * **属性:**`data-silent-sort` * **类型:**`Boolean` * **详情:** 设置`false`为使用加载消息对数据进行排序。当sidePagination选项设置为时,此选项有效`'server'`. * **默认:**`true` * **例子:**[Silent Sort](https://www.bootstrap-table.com.cn/examples/options/silent-sort/) ## sortName 定义默认排序的列 * **属性:**`data-sort-name` * **类型:**`String` * **详情:** 定义要排序的列。 * **默认:**`undefined` * **例子:**[Sort Name Order](https://www.bootstrap-table.com.cn/examples/options/sort-name-order/) ## sortOrder 排序方式,只能是`'asc'`或`'desc'`. * **属性:**`data-sort-order` * **类型:**`String` * **详情:** 定义列的排序顺序,只能是`'asc'`或`'desc'`. * **默认:**`'asc'` * **例子:**[Sort Name Order](https://www.bootstrap-table.com.cn/examples/options/sort-name-order/) ## sortStable 启用排序 * **属性:**`data-sort-stable` * **类型:**`Boolean` * **详情:** 设置`true`以获得稳定的排序。我们将`'_position'`属性添加到该行。 * **默认:**`false` * **例子:**[Sort Stable](https://www.bootstrap-table.com.cn/examples/options/sort-stable/) ## rememberOrder 设置`true`记住每个列的顺序 * **属性:**`data-remember-order` * **类型:**`Boolean` * **详情:** 设置`true`为记住每列的顺序。 * **默认:**`false` * **例子:**[Remember Order](https://www.bootstrap-table.com.cn/examples/options/remember-order/) ## serverSort 服务器排序 * **属性:**`data-server-sort` * **类型:**`Boolean` * **详情:** 设置`false`为在客户端对数据进行排序,仅在`sidePagination`时为`server`时有效 * **默认:**`true` * **例子:**[Server Sort](https://www.bootstrap-table.com.cn/examples/options/server-sort/) ## customSort 执行自定义排序功能而不是内置的排序功能 * **属性:**`data-custom-sort` * **类型:**`Function` * **详情:** 执行自定义排序功能而不是内置的排序功能,它需要三个参数: * `sortName`: 排序名称。 * `sortOrder`: 排序顺序。 * `data`: 行数据。 * **默认:**`undefined` * **例子:**[Custom Order](https://www.bootstrap-table.com.cn/examples/options/custom-order/) ## columns 列配置(重要) * **属性:**`-` * **类型:**`Array` * **详情:** 表列配置对象,请参阅列属性以获取更多详细信息。 * **默认:**`[]` * **例子:**[Table Columns](https://www.bootstrap-table.com.cn/examples/options/table-columns/) ## data 表数据 * **属性:**`data-data` * **类型:**`Array | Object` * **详情:** 要加载的数据。 * **默认:**`[]` * **例子:**[From Data](https://www.bootstrap-table.com.cn/examples/welcome/from-data/) ## url 远程数据的url * **属性:**`data-url` * **类型:**`String` * **详情:** 一个从远程站点请求数据的URL。 请注意,所需的服务器响应格式取决于是否`'sidePagination'`指定了该选项。请参阅以下示例: * [Without server-side pagination](https://github.com/wenzhixin/bootstrap-table-examples/blob/master/json/data1.json) * [With server-side pagination](https://github.com/wenzhixin/bootstrap-table-examples/blob/master/json/data2.json) * **默认:**`undefined` * **例子:**[From URL](https://www.bootstrap-table.com.cn/examples/welcome/from-url/) * **错误处理** 要获取加载错误,请使用[onLoadError](https://www.bootstrap-table.com.cn/doc/api/events/#onloaderror) ## method 请求类型 * **属性:**`data-method` * **类型:**`String` * **详情:** 请求远程数据的方法类型。 * **默认:**`'get'` * **例子:**[Table Method](https://www.bootstrap-table.com.cn/examples/options/table-method/) ## cache AJAX请求的缓存 * **属性:**`data-cache` * **类型:**`Boolean` * **详情:** 设置`false`为禁用AJAX请求的缓存。 * **默认:**`true` * **例子:**[Table Cache](https://www.bootstrap-table.com.cn/examples/options/table-cache/) ## contentType 远程数据的contentType * **属性:**`data-content-type` * **类型:**`String` * **详情:** 请求远程数据的contentType,例如:`application/x-www-form-urlencoded`. * **默认:**`'application/json'` * **例子:**[Content Type](https://www.bootstrap-table.com.cn/examples/options/content-type/) ## dataType 服务器返回的数据类型 * **属性:**`data-data-type` * **类型:**`String` * **详情:** 您期望从服务器返回的数据类型。 * **默认:**`'json'` * **例子:**[Data Type](https://www.bootstrap-table.com.cn/examples/options/data-type/) ## ajax 自定义 AJAX 方法,须实现 jQuery AJAX API * **属性:**`data-ajax` * **类型:**`Function` * **详情:** 一种替换ajax调用的方法。应该实现与jQuery ajax方法相同的API。 * **默认:**`undefined` * **例子:**[Table AJAX](https://www.bootstrap-table.com.cn/examples/options/table-ajax/) ## ajaxOptions 提交ajax请求时的附加参数 * **属性:**`data-ajax-options` * **类型:**`Object` * **详情:** 提交ajax请求的其他选项。值列表:[jQuery.ajax](http://api.jquery.com/jQuery.ajax). * **默认:**`{}` * **例子:**[AJAX Options](https://www.bootstrap-table.com.cn/examples/options/ajax-options/) ## queryParams 发送给服务器的请求参数 * **属性:**`data-query-params` * **类型:**`Function` * **详情:** 请求远程数据时,可以通过修改queryParams发送其他参数。 如果`queryParamsType = 'limit'`,params对象包含:`limit`,`offset`,`search`,`sort`,`order`. 否则,它包含:`pageSize`,`pageNumber`,`searchText`,`sortName`,`sortOrder`. 返回`false`停止请求。 * **默认:**`function(params) { return params }` * **例子:**[Query Params](https://www.bootstrap-table.com.cn/examples/options/query-params/) ## queryParamsType 设置为 'limit' 则会发送符合 RESTFul 格式的参数。 * **属性:**`data-query-params-type` * **类型:**`String` * **详情:** 设置`'limit'`为发送具有RESTFul类型的查询参数。 * **默认:**`'limit'` * **例子:**[Query Params Type](https://www.bootstrap-table.com.cn/examples/options/query-params-type/) ## responseHandler 加载服务器数据之前的处理程序,可以用来格式化数据 * **属性:**`data-response-handler` * **类型:**`Function` * **详情:** 在加载远程数据之前,处理响应数据格式,参数对象包含: * `res`: 响应数据。 * `jqXHR`: jqXHR对象,它是XMLHTTPRequest对象的超集。有关更多信息,请参见[jqXHR 类](http://api.jquery.com/Types/#jqXHR). * **默认:**`function(res) { return res }` * **例子:**[Response Handler](https://www.bootstrap-table.com.cn/examples/options/response-handler/) ## totalField 获取总数据条数的变量名,默认total * **属性:**`data-total-field` * **类型:**`String` * **详情:** 键入包含`'total'`数据的传入json 。 * **默认:**`'total'` * **例子:**[Total/Data Field](https://www.bootstrap-table.com.cn/examples/options/total-data-field/) ## totalNotFilteredField * **属性:**`data-total-not-filtered-field` * **类型:**`string` * **详情:** json响应中的字段,将用于`showExtendedPagination`. * **默认:**`totalNotFiltered` * **例子:**[Total Not Filtered Field](https://www.bootstrap-table.com.cn/examples/options/total-not-filtered-field/) ## dataField 获取后台数据的变量名,默认row * **属性:**`data-data-field` * **类型:**`String` * **详情:** 键入包含`'rows'`数据列表的传入json 。 * **默认:**`'rows'` * **例子:**[Total/Data Field](https://www.bootstrap-table.com.cn/examples/options/total-data-field/) ## pagination 是否显示分页 * **属性:**`data-pagination` * **类型:**`Boolean` * **详情:** 设置`true`为在表格底部显示分页工具栏。 * **默认:**`false` * **例子:**[Table Pagination](https://www.bootstrap-table.com.cn/examples/options/table-pagination/) ## onlyInfoPagination 设置为`true`只显示总数据数,而不显示分页按钮。需要设置 pagination='true'。 * **属性:**`data-only-info-pagination` * **类型:**`Boolean` * **详情:** 设置`true`为仅显示表中显示的数据量。它需要将分页表选项设置为true。(这个时哪个版本的?) * **默认:**`false` * **例子:**[Only Info Pagination](https://www.bootstrap-table.com.cn/examples/options/only-info-pagination/) ## showExtendedPagination 设置`true`为显示分页的扩展版本(啥效果) * **属性:**`data-show-extended-pagination` * **类型:**`Boolean` * **详情:** 设置`true`为显示分页的扩展版本(包括不带过滤器的所有行的计数)。如果在服务器端使用分页,请使用`totalNotFilteredField`来定义计数。 * **默认:**`false` * **例子:**[Show Extended Pagination](https://www.bootstrap-table.com.cn/examples/options/show-extended-pagination/) ## paginationLoop 分页连续循环模式 * **属性:**`data-pagination-loop` * **类型:**`Boolean` * **详情:** 设置`true`为启用分页连续循环模式。 * **默认:**`true` * **例子:**[Pagination Loop](https://www.bootstrap-table.com.cn/examples/options/pagination-loop/) ## sidePagination 分页模式 只能是`'client'`或`'server'` * **属性:**`data-side-pagination` * **类型:**`String` * **详情:** 定义表格的侧面分页,只能是`'client'`或`'server'`。使用`'server'`side需要设置`'url'`或`'ajax'`选项。 请注意,根据`'sidePagination'`选项设置为`'client'`还是,所需的服务器响应格式会有所不同`'server'`。请参阅以下示例: * [没有服务器端分页](https://github.com/wenzhixin/bootstrap-table-examples/blob/master/json/data1.json) * [使用服务器端分页](https://github.com/wenzhixin/bootstrap-table-examples/blob/master/json/data2.json) * **默认:**`'client'` * **例子:**[Client Side Pagination](https://examples.bootstrap-table.com/#options/client-side-pagination.html)and[Server Side Pagination](https://examples.bootstrap-table.com/#options/server-side-pagination.html) ## totalRows 此属性主要由分页服务器传入,该服务器易于使用。(???) * **属性:**`data-total-rows` * **类型:**`Number` * **详情:** 此属性主要由分页服务器传入,该服务器易于使用。 * **默认:**`0` ## totalNotFiltered 此属性主要由分页服务器传入,该服务器易于使用。(???) * **属性:**`data-total-not-filtered` * **类型:**`Number` * **详情:** 此属性主要由分页服务器传入,该服务器易于使用。 * **默认:**`0` ## pageNumber 如果设置了分页,设置首页的页码 * **属性:**`data-page-number` * **类型:**`Number` * **详情:** 设置分页属性时,请初始化页码。 * **默认:**`1` * **例子:**[Page Number](https://www.bootstrap-table.com.cn/examples/options/page-number/) ## pageSize 如果设置了分页,设置当前页面的数据条数 * **属性:**`data-page-size` * **类型:**`Number` * **详情:** 设置分页属性时,初始化页面大小。 * **默认:**`10` * **例子:**[Page Size](https://www.bootstrap-table.com.cn/examples/options/page-size/) ## pageList 如果设置了分页,设置可供选择的页面数据条数。设置为 All 或者 Unlimited,则显示所有记录 * **属性:**`data-page-list` * **类型:**`Array` * **详情:** 设置分页属性时,初始化页面尺寸选择列表。如果包含`'all'`或`'unlimited'`选项,则所有记录将显示在表中。 * **默认:**`[10, 25, 50, 100]` * **例子:**[Page List](https://www.bootstrap-table.com.cn/examples/options/page-list/) ## paginationHAlign 分页水平对齐方向 * **属性:**`data-pagination-h-align` * **类型:**`String` * **详情:** 指示如何对齐分页。`'left'`,`'right'`可以使用。 * **默认:**`'right'` * **例子:**[Pagination H Align](https://www.bootstrap-table.com.cn/examples/options/pagination-h-align/) ## paginationVAlign 分页垂直对齐方向 * **属性:**`data-pagination-v-align` * **类型:**`String` * **详情:** 指示如何垂直对齐分页。`'top'`,`'bottom'`,`'both'`(穿上顶部和底部的分页)都可以使用。 * **默认:**`'bottom'` * **例子:**[Pagination V Align](https://www.bootstrap-table.com.cn/examples/options/pagination-v-align/) ## paginationDetailHAlign 指示如何对齐分页细节。分页细节即(显示第 1 到第 10 条记录,总共 15 条记录 每页显示 10 条记录) * **属性:**`data-pagination-detail-h-align` * **类型:**`String` * **详情:** 指示如何对齐分页细节`'left'`,`'right'`可以使用。 * **默认:**`'left'` * **例子:**[Pagination H Align](https://www.bootstrap-table.com.cn/examples/options/pagination-h-align/) ## paginationPreText 在分页中显示的图标,即上一页按钮 * **属性:**`data-pagination-pre-text` * **类型:**`String` * **详情:** 指示要在分页详细信息中显示的图标或文本,即上一页按钮。 * **默认:**`'‹'` * **例子:**[Pagination Text](https://www.bootstrap-table.com.cn/examples/options/pagination-text/) ## paginationNextText 在分页中显示的图标,即下一页按钮 * **属性:**`data-pagination-next-text` * **类型:**`String` * **详情:** 指示要在分页详细信息(下一步按钮)中显示的图标或文本。 * **默认:**`'›'` * **例子:**[Pagination Text](https://www.bootstrap-table.com.cn/examples/options/pagination-text/) ## paginationSuccessivelySize 每页显示的最大页码数 * **属性:**`data-pagination-successively-size` * **类型:**`Number` * **详情:** 连续的最大连续页数。 * **默认:**`5` * **例子:** 值为5即默认值时: ![](https://img.kancloud.cn/e5/6a/e56a2a0e15be881da6912e38cb579543_310x45.png) 值为6时: ![](https://img.kancloud.cn/88/0c/880cb41bca41b09ed6a3b7e50743bc59_344x45.png) ## paginationPagesBySide * **属性:**`data-pagination-pages-by-side` * **类型:**`Number` * **详情:** 当前页面每侧(右侧,左侧)的页数。 * **默认:**`1` * **例子:** 值为1即默认值时: ![](https://img.kancloud.cn/c7/c1/c7c10ae3b5f2154ac1d7354f9d6ac500_338x46.png) 值为2时: ![](https://img.kancloud.cn/a3/bf/a3bf2b9f4949a1f8a5925fbb2437ebef_500x49.png) 值为3时: ![](https://img.kancloud.cn/33/b6/33b6fee31abb27fabbc3dfc586ecc944_678x56.png) ## paginationUseIntermediate * **属性:**`data-pagination-use-intermediate` * **类型:**`Boolean` * **详情:** 计算并显示中间页面以便快速访问。 * **默认:**`false` * **例子:** true时多了红框处的的内容,每次跳10页 ![](https://img.kancloud.cn/7d/8d/7d8df05eb964d37c6293c4f555441be0_372x55.png) ## search 默认false不显示表格右上方搜索框 ,可设为true,在搜索框内只要输入内容即开始搜索 * **属性:**`data-search` * **类型:**`Boolean` * **详情:** 启用搜索输入。 有3种搜索方式: * 该值包含搜索查询(默认)。示例:Github包含git。 * 该值必须与搜索查询相同。示例:Github(值)和Github(搜索查询)。 * 比较(, =, =>)。示例:4大于3。 * **默认:**`false` * **例子:**[Table Search](https://www.bootstrap-table.com.cn/examples/options/table-search/) ## searchOnEnterKey 默认false不启用,设为true启用,在搜索框内输入内容并且按下回车键才开始搜索 * **属性:**`data-search-on-enter-key` * **类型:**`Boolean` * **详情:** 搜索方法将一直执行到按下Enter键。 * **默认:**`false` * **例子:**[Search On Enter Key](https://www.bootstrap-table.com.cn/examples/options/search-on-enter-key/) ## strictSearch 设为true,开启精确搜索 * **属性:**`data-strict-search` * **类型:**`Boolean` * **详情:** 启用严格搜索。禁用比较检查。 * **默认:**`false` * **例子:**[Strict Search](https://www.bootstrap-table.com.cn/examples/options/strict-search/) ## visibleSearch 仅在可见列/数据中搜索 * **属性:**`visible-search` * **类型:**`Boolean` * **详情:** 设置`true`为仅在可见列/数据中搜索,如果数据包含其他未显示的值,则在搜索时将忽略它们。如果某个列如价格被隐藏了则搜索不出来 * **默认:**`false` ## showButtonIcons 所有按钮都将在其上显示图标 * **属性:**`show-button-icons` * **类型:**`Boolean` * **详情:** 所有按钮都将在其上显示图标 * **默认:**`true` ## showButtonText 所有按钮都将在其上显示文本 * **属性:**`show-button-text` * **类型:**`Boolean` * **详情:** 所有按钮都将在其上显示文本 * **默认:**`false` ## showSearchButton 设置`true`为在搜索输入后面显示搜索按钮 * **属性:**`data-show-search-button` * **类型:**`Boolean` * **详情:** 设置`true`为在搜索输入后面显示搜索按钮。仅在按下按钮时才会执行搜索(例如,以防止交通或加载时间)。 * **默认:**`false` ## showSearchClearButton 设置`true`为在搜索输入后面显示一个清除按钮 * **属性:**`data-show-search-clear-button` * **类型:**`Boolean` * **详情:** 设置`true`为在搜索输入后面显示一个清除按钮,该按钮将清除搜索输入(还包括来自过滤器控件的所有过滤器(如果启用))。 * **默认:**`false` ## trimOnSearch 过滤搜索框中的空格 * **属性:**`data-trim-on-search` * **类型:**`Boolean` * **详情:** 设置`true`为修剪搜索字段中的空格。 * **默认:**`true` ## searchAlign 搜索框对齐 * **属性:**`data-search-align` * **类型:**`String` * **详情:** 指示如何对齐搜索输入。`'left'`,`'right'`可以使用。 * **默认:**`'right'` ## searchTimeOut 搜索框超时 * **属性:**`data-search-time-out` * **类型:**`Number` * **详情:** 设置搜索触发超时。 * **默认:**`500` ## searchText 搜索框中的初始搜索文本默认空 * **属性:**`data-search-text` * **类型:**`String` * **详情:** 设置搜索属性后,初始化搜索文本。 * **默认:**`''` ## customSearch 自定义搜索功能 * **属性:**`data-custom-search` * **类型:**`Function` * **详情:** 执行自定义搜索功能而不是内置搜索功能,它采用三个参数: * `data`: 表格数据。 * `text`: 搜索文字。 * `filter`:`filterBy`方法中的过滤器对象。 用法示例: ~~~javascript functioncustomSearch(data,text){ return data.filter(function(row){ return row.field.indexOf(text)>-1 }) } ~~~ * **默认:**`undefined` ## showHeader 显示表格的标题行 * **属性:**`data-show-header` * **类型:**`Boolean` * **详情:** 设置`false`为隐藏表格标题。 * **默认:**`true` ## showFooter 显示表格的页脚行 * **属性:**`data-show-footer` * **类型:**`Boolean` * **详情:** 设置`true`为显示摘要页脚行。 * **默认:**`false` ## footerStyle 页脚行样式 * **属性:**`data-footer-style` * **类型:**`Function` * **详情:** 页脚样式格式化程序函数,采用一个参数: * `column`: 列对象。 支持`classes`或`css`.用法示例: ~~~javascript functionfooterStyle(column){ return{ css:{'font-weight':'normal'}, classes:'my-class' } } ~~~ * **默认:**`{}` ## showColumns 默认为false隐藏某列下拉菜单,设为true显示 * **属性:**`data-show-columns` * **类型:**`Boolean` * **详情:** 设置`true`为显示列下拉列表。我们可以将[`switchable`](https://www.bootstrap-table.com.cn/doc/api/column-options/#switchable)选项设置`false`为隐藏下拉列表中项目。 * **默认:**`false` ![](https://img.kancloud.cn/a8/8d/a88d3b19ad50999f6a93ddfd7aba834f_94x99.png) ## showColumnsToggleAll 设置`true`为在列选项/下拉列表中显示“全部切换”复选框。 * **属性:**`data-show-columns-toggle-all` * **类型:**`Boolean` * **详情:** 设置`true`为在列选项/下拉列表中显示“全部切换”复选框。 * **默认:**`false` ![](https://img.kancloud.cn/5e/6f/5e6f98baa2cff58c68532f7f5f3fb1d4_164x284.png) ## showColumnsSearch 列选项/下拉列表中搜索过滤列名 * **属性:**`data-show-columns-search` * **类型:**`Boolean` * **详情:** 设置`true`为显示对列过滤器的搜索。 * **默认:**`false` ![](https://img.kancloud.cn/25/b3/25b3a1e94af0d4ad373c250f754dd33e_169x302.png) ## minimumCountColumns 从列下拉列表中隐藏的最小列数 隐藏超过设置的值将不能在隐藏 * **属性:**`data-minimum-count-columns` * **类型:**`Number` * **详情:** 从列下拉列表中隐藏的最小列数。 * **默认:**`1` ![](https://img.kancloud.cn/77/03/77036d80adfc1d2cb02c1d7fb1dd4dee_168x240.png) ## showPaginationSwitch 显示/隐藏分页的按钮 * **属性:**`data-show-pagination-switch` * **类型:**`Boolean` * **详情:** 设置`true`为显示分页开关按钮。 * **默认:**`false` ![](https://img.kancloud.cn/9d/ba/9dba0d2028d8b723e27f56d77c577616_174x97.png) ## showRefresh 刷新表格的按钮 * **属性:**`data-show-refresh` * **类型:**`Boolean` * **详情:** 设置`true`为显示刷新按钮。 * **默认:**`false` ## showToggle 表格/卡片视图的按钮 * **属性:**`data-show-toggle` * **类型:**`Boolean` * **详情:** 设置`true`显示切换按钮以切换表格/卡片视图。 * **默认:**`false` ## showFullscreen 全屏按钮 * **属性:**`data-show-fullscreen` * **类型:**`Boolean` * **详情:** 设置`true`显示全屏按钮。 * **默认:**`false` ## smartDisplay 设置为 true 是程序自动判断显示分页信息和 card 视图 * **属性:**`data-smart-display` * **类型:**`Boolean` * **详情:** 设置`true`为智能显示分页或名片视图。 * **默认:**`true` ## escape 转义HTML字符串,替换`&`,`<`,`>`,`"`,`\``, 和`'`字符。 * **属性:**`data-escape` * **类型:**`Boolean` * **详情:** 转义用于插入HTML的字符串,并替换 &, , “, `, and ‘ 字符。 * **默认:**`false` ## filterOptions 定义算法的默认过滤器选项 可用于多列搜索 * **属性:**`data-filter-options` * **类型:**`Boolean` * **详情:** 定义算法的默认过滤器选项,`filterAlgorithm: 'and'`意味着所有给定的过滤器必须匹配,`filterAlgorithm: 'or'`意味着给定的过滤器之一必须匹配。 * **默认:**`{ filterAlgorithm: 'and' }` ``` //设置为and的话,表格只显示id为3且price为$2的数据 //设置为or的话,表格只显示id为3或者price为$2的数据 `bootstrapTable('filterBy', {id: 3, price: '$1'})`. ``` ## idField 指明哪个字段将用作复选框/单选框值 * **属性:**`data-id-field` * **类型:**`String` * **详情:** 指明哪个字段将用作复选框/单选框值,与[selectItemName](https://www.bootstrap-table.com.cn/doc/api/table-options/#selectitemname)对应。 * **默认:**`undefined` ![](https://img.kancloud.cn/2a/1a/2a1a5a9868b636c411a975c794eaa53a_1061x460.png) ``` <form> <button class="btn btn-primary">Submit</button> <table id="table" data-toggle="table" data-toolbar=".btn-primary" data-id-field="name" data-select-item-name="name1" data-height="460" data-url="json/data1.json"> <thead> <tr> <th data-radio="true"></th> <th data-field="id">ID</th> <th data-field="name">Item Name</th> <th data-field="price">Item Price</th> </tr> </thead> </table> </form> <script> var $table = $('#table') $(function() { $('form').submit(function () { alert($(this).serialize()) return false }) }) </script> //json [{ "id": 0, "name": "Item 0", "price": "$0", "amount": 3 }, { "id": 1, "name": "Item 1", "price": "$1", "amount": 4 },...] ``` ## selectItemName 与idField连用 * **属性:**`data-select-item-name` * **类型:**`String` * **详情:** 单选或复选框输入的名称。 * **默认:**`'btSelectItem'` ## clickToSelect 设置`true`为在单击行时选择复选框或单选框 * **属性:**`data-click-to-select` * **类型:**`Boolean` * **详情:** 设置`true`为在单击行时选择复选框或单选框。 * **默认:**`false` ## ignoreClickToSelectOn * **属性:**`data-ignore-click-to-select-on` * **类型:**`Function` * **详情:** 设置忽略元素`clickToSelect`。接受一个参数: * `element`: 被点击元素。 如果应忽略该单击,则返回true;如果应使该行被选择,则返回false。仅当`clickToSelect`为true时,此选项才相关。 * **默认:**`{ return ['A', 'BUTTON'].includes(tagName) }` ``` $('#table').bootstrapTable({ ignoreClickToSelectOn: function ignoreClickToSelectOn(e) { //点击a button lable input 时将不会选中 前面的复选框或者单选框 return ['A', 'BUTTON', 'LABEL', 'INPUT'].indexOf(e.tagName) > -1 }, }) ``` ## singleSelect 设为true则复选框只能选择一行 * **属性:**`data-single-select` * **类型:**`Boolean` * **详情:** 设置`true`为允许复选框仅选择一行。 * **默认:**`false` ## checkboxHeader 启用/隐藏标题行的选择所有复选框的复选框 * **属性:**`data-checkbox-header` * **类型:**`Boolean` * **详情:** 设置`false`为隐藏标题行中的所有复选框。 * **默认:**`true` ## maintainMetaData 更改页面和搜索时始终保持选择的行和隐藏的行的状态 * **属性:**`data-maintain-meta-data` * **类型:**`Boolean` * **详情:** 设置`true`为在更改页面和搜索上维护以下元数据: * 选定的行 * 隐藏的行 设置为true后改改页面或者搜索后选择的行和隐藏的行会保持原样 * **默认:**`false` 1.18.0版本移除了getAllSelections,取而代之为table加上maintainMetaData:true属性 ![](https://img.kancloud.cn/39/6c/396c74b072dd2dcded3f95bacbf17bfb_819x414.png) true时: ![](https://img.kancloud.cn/41/22/4122536fdf5093afeb6ec1366b156296_798x274.png) false时: ![](https://img.kancloud.cn/be/52/be5202c283257cd3e7db4955e1788830_783x263.png) ## multipleSelectRow shift键单击以选择一系列行 * **属性:**`data-multiple-select-row` * **类型:**`Boolean` * **详情:** 设置`true`以启用多选行。可以使用ctrl键单击以选择一行,或使用shift键单击以选择一系列行。 * **默认:**`false` ## uniqueId 主键id * **属性:**`data-unique-id` * **类型:**`String` * **详情:** 为每一行指示唯一的标识符。 * **默认:**`undefined` ## cardView 卡片视图 第一列标题 第二列标题对应的数据 * **属性:**`data-card-view` * **类型:**`Boolean` * **详情:** 设置`true`为显示名片视图表,例如移动视图。 * **默认:**`false` ![](https://img.kancloud.cn/e0/c8/e0c8007bc08ccf451a1e4956c1df4e7d_629x462.png) ## detailView 详细视图表 * **属性:**`data-detail-view` * **类型:**`Boolean` * **详情:** 设置`true`为显示详细视图表。 * **默认:**`false` ![](https://img.kancloud.cn/cf/2b/cf2b559d9df82741c14a46afee1d3ea7_1299x426.png) ## detailViewIcon 启用隐藏+-图标 * **属性:**`data-detail-view-icon` * **类型:**`Boolean` * **详情:** 设置`true`为显示详细信息视图列(加/减图标)。 * **默认:**`true` ![](https://img.kancloud.cn/56/00/560006818e96cd59d0aebefb1a1e6b6e_48x248.png) ## detailViewByClick 单击以设置切换细节视图 * **属性:**`data-detail-view-by-click` * **类型:**`Boolean` * **详情:** 设置`true`单击以设置切换细节视图。 一般用法:设置`detailViewIcon: false`然后设置`detailViewByClick: true` * **默认:**`false` ## detailFormatter 定制您的详细信息视图 * **属性:**`data-detail-formatter` * **类型:**`Function` * **详情:** 当格式化您的详细信息视图`detailView`设置为`true`。返回一个String,它将被附加到详细信息视图单元格中,可以选择使用第三个参数直接渲染该元素,该参数是目标单元格的jQuery元素。 * **默认:**`function(index, row, element) { return '' }` ## detailFilter 定制可展开指定的行 * **属性:**`data-detail-filter` * **类型:**`Function` * **详情:** 当detailView设置为true时,允许展开每一行。返回true时该行将可以展开,返回false时该行的不可展开。默认函数返回true,以便对所有行进行扩展。。 * **默认:**`function(index, row) { return true }` ## toolbar 自定义 工具栏id、类或者Dom节点 * **属性:**`data-toolbar` * **类型:**`String/Node` * **详情:** jQuery选择指示工具栏,例如:`#toolbar`,`.toolbar`,或DOM节点。 * **默认:**`undefined` ## toolbarAlign 对齐自定义工具栏 * **属性:**`data-toolbar-align` * **类型:**`String` * **详情:** 指示如何对齐自定义工具栏。`'left'`,`'right'`可以使用。 * **默认:**`'left'` ## buttonsToolbar * **属性:**`data-buttons-toolbar` * **类型:**`String/Node` * **详情:** jQuery选择器,指示自定义按钮工具栏,例如:`#buttons-toolbar`,`.buttons-toolbar`,或DOM节点。 * **默认:**`undefined` ![](https://img.kancloud.cn/fd/0e/fd0ebb751e29a662f87eb2cd34a80d79_250x59.png) ## buttonsAlign 对齐工具栏按钮 * **属性:**`data-buttons-align` * **类型:**`String` * **详情:** 指示如何对齐工具栏按钮。`'left'`,`'right'`可以使用。 * **默认:**`'right'` ## buttonsOrder 自定义工具栏按钮的顺序 * **属性:**`data-buttons-order` * **类型:**`Array` * **详情:** 指示如何自定义工具栏按钮的顺序。 * **默认:**`['paginationSwitch', 'refresh', 'toggle', 'fullscreen', 'columns']` ## buttonsPrefix 表格按钮的前缀 * **属性:**`data-buttons-prefix` * **类型:**`String` * **详情:** 定义表格按钮的前缀。 * **默认:**`'btn'` ## buttonsClass 按钮的类 * **属性:**`data-buttons-class` * **类型:**`String` * **详情:** 定义`'btn-'`表格按钮的类(在后面添加)。 * **默认:**`'secondary'` ## icons 工具栏的图标 * **属性:**`data-icons` * **类型:**`Object` * **详情:** 定义在工具栏,分页和详细信息视图中使用的图标。 * **默认:** ~~~html { paginationSwitchDown: 'fa-caret-square-down', paginationSwitchUp: 'fa-caret-square-up', refresh: 'fa-sync', toggleOff: 'fa-toggle-off', toggleOn: 'fa-toggle-on', columns: 'fa-th-list', fullscreen: 'fa-arrows-alt', detailOpen: 'fa-plus', detailClose: 'fa-minus' } ~~~ * **例子:**[Table Icons](https://www.bootstrap-table.com.cn/examples/options/table-icons/) ## html 定义表格的html * **属性:**`data-html` * **类型:**`Object` * **详情:** 定义表格的html。 * **默认:** 代码太多,请签出`index.js` ## iconSize 定义的图标大小 * **属性:**`data-icon-size` * **类型:**`String` * **详情:** 定义图标的大小,`undefined`,`'lg'`,`'sm'`都可以使用。 undefined =>默认表示默认的按钮尺寸(btn) xs   =>超小按钮的尺寸(btn-xs) sm  =>小按钮的尺寸(btn-sm) lg    =>大按钮的尺寸(btn-lg) * **默认:**`undefined` ## iconsPrefix 图标前缀,默认情况下`'fa'`用于Bootstrap v4 * **属性:**`data-icons-prefix` * **类型:**`String` * **详情:** 定义图标集名称(`'glyphicon'`或`'fa'`)。默认情况下`'fa'`用于Bootstrap v4。 * **默认:**`'fa'` detailViewAlign 指示如何对齐详细视图图标 footerField 定义页脚对象的键 loadingFontSize 要定义加载文本的字体大小,默认值是根据表宽自动计算的,在12px 和32px 之间 默认:"auto" loadingTemplate 自己自定义加载类型 paginationParts 这些选项定义了分页的哪些部分应可见 regexSearch 使用regex搜索 searchAccentNeutralise 如果您想使用重音中和功能,则设置为true searchHighlight 设置为突出显示搜索的文本(使用HTML标记)。你也可以定义一个自定义的高亮显示格式化器,例如,为HTML值或使用自定义高亮显示颜色 searchSelector 如果设置了该选项(必须是一个有效的dom选择器,例如),所找到的dom元素(一个元素)将被用作表搜索,而不是内置的搜索输入 sortReset 设置为在第三次click.true时重置排序 totalNotFilteredField JSON响应中的he字段将用于.showExtendedPagination