表格选项

Bootstrap Table的表选项API。

表选项在jQuery.fn.bootstrapTable.defaults中定义.

-

  • 属性:data-toggle

  • 类型:String

  • 详情:

    无需编写JavaScript即可激活引导表。

  • 默认:'table'

  • 例子:From HTML

height

  • 属性:data-height

  • 类型:Number

  • 详情:

    表的高度,启用表的固定标题。

  • 默认:undefined

  • 例子: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

theadClasses

  • 属性:data-thead-classes

  • 类型:String

  • 详情:

    表thead的类名。Bootstrap v4,使用修饰符类.thead-light.thead-dark 使用 thead 显示为浅灰色或深灰色。

  • 默认:''

  • 例子:Thead Classes

headerStyle

  • 属性:data-header-style

  • 类型:Function

  • 详情:

    标头样式格式化程序函数采用一个参数:

    • column: 列对象。

    支持 classescss。用法示例:

  functionheaderStyle(column){
    return{
      css:{'font-weight':'normal'},
      classes:'my-class'
    }
  }
  

rowStyle

  • 属性:data-row-style

  • 类型:Function

  • 详情:

    行样式格式化程序函数具有两个参数:

    • row: 行记录数据。
    • index: 行索引。

    支持类或CSS。

  • 默认:{}

  • 例子:Row Style

rowAttributes

  • 属性:data-row-attributes

  • 类型:Function

  • 详情:

    行属性格式化程序函数具有两个参数:

    • row: 行记录数据。
    • index: 行索引。

    支持所有自定义属性。

  • 默认:{}

  • 例子:Row Attributes

undefinedText

  • 属性:data-undefined-text

  • 类型:String

  • 详情:

    定义默认undefined 文本。

  • 默认:'-'

  • 例子:Undefined Text

locale

  • 属性:data-locale

  • 类型:String

  • 详情:

    设置要使用的语言环境(即'zh-CN')。区域设置文件必须预先加载。如果加载了后备语言环境,则按以下顺序进行:

    • 首先尝试指定的语言环境,
    • 然后尝试将'_'转换为'-'并将区域代码大写的语言环境,
    • 然后尝试使用简短的语言环境代码(即'zh' 代替 'zh-CN'),
    • 最后,将使用最后一个加载的语言环境文件(如果未加载语言环境,则使用默认语言环境)。

    如果为左undefined字符串或为空字符串,则使用上次加载的语言环境(或'en-US'如果未加载任何语言环境文件)。

  • 默认:undefined

  • 例子:Table Locale

virtualScroll

  • 属性:data-virtual-scroll

  • 类型:Boolean

  • 详情:

    设置 true 为启用虚拟滚动以显示虚拟的 “infinite” 列表。

  • 默认:false

  • 例子:Large Data

virtualScrollItemHeight

  • 属性:data-virtual-scroll-item-height

  • 类型:Number

  • 详情:

    如果未定义此选项,则默认情况下我们将使用第一项的高度。

    如果虚拟商品的高度将明显大于默认高度,则提供此功能非常重要。此维度用于帮助确定初始化时应创建多少个单元格,并帮助计算可滚动区域的高度。此高度值只能使用px单位。

  • 默认:undefined

  • 例子:Virtual Scroll Item Height

sortable

  • 属性:data-sortable

  • 类型:Boolean

  • 详情:

    设置 false为禁用所有列的可排序。

  • 默认:true

  • 例子:Table Sortable

sortClass

  • 属性:data-sort-class

  • 类型:String

  • 详情:

    td 排序的元素的类名称。

  • 默认:undefined

  • 例子:Sort Class

silentSort

  • 属性:data-silent-sort

  • 类型:Boolean

  • 详情:

    设置false 为使用加载消息对数据进行排序。当sidePagination选项设置为时,此选项有效 'server'.

  • 默认:true

  • 例子:Silent Sort

sortName

  • 属性:data-sort-name

  • 类型:String

  • 详情:

    定义要排序的列。

  • 默认:undefined

  • 例子:Sort Name Order

sortOrder

  • 属性:data-sort-order

  • 类型:String

  • 详情:

    定义列的排序顺序,只能是'asc''desc'.

  • 默认:'asc'

  • 例子:Sort Name Order

sortStable

  • 属性:data-sort-stable

  • 类型:Boolean

  • 详情:

    设置 true以获得稳定的排序。我们将'_position' 属性添加到该行。

  • 默认:false

  • 例子:Sort Stable

rememberOrder

  • 属性:data-remember-order

  • 类型:Boolean

  • 详情:

    设置true 为记住每列的顺序。

  • 默认:false

  • 例子:Remember Order

serverSort

  • 属性:data-server-sort

  • 类型:Boolean

  • 详情:

    设置false为在客户端对数据进行排序,仅在sidePagination 时为 server时有效

  • 默认:true

  • 例子:Server Sort

customSort

  • 属性:data-custom-sort

  • 类型:Function

  • 详情:

    执行自定义排序功能而不是内置的排序功能,它需要三个参数:

    • sortName: 排序名称。
    • sortOrder: 排序顺序。
    • data: 行数据。
  • 默认:undefined

  • 例子:Custom Order

columns

  • 属性:-

  • 类型:Array

  • 详情:

    表列配置对象,请参阅列属性以获取更多详细信息。

  • 默认:[]

  • 例子:Table Columns

data

  • 属性:data-data

  • 类型:Array | Object

  • 详情:

    要加载的数据。

  • 默认:[]

  • 例子:From Data

url

method

  • 属性:data-method

  • 类型:String

  • 详情:

    请求远程数据的方法类型。

  • 默认:'get'

  • 例子:Table Method

cache

  • 属性:data-cache

  • 类型:Boolean

  • 详情:

    设置false为禁用AJAX请求的缓存。

  • 默认:true

  • 例子:Table Cache

contentType

  • 属性:data-content-type

  • 类型:String

  • 详情:

    请求远程数据的contentType,例如:application/x-www-form-urlencoded.

  • 默认:'application/json'

  • 例子:Content Type

dataType

  • 属性:data-data-type

  • 类型:String

  • 详情:

    您期望从服务器返回的数据类型。

  • 默认:'json'

  • 例子:Data Type

ajax

  • 属性:data-ajax

  • 类型:Function

  • 详情:

    一种替换ajax调用的方法。应该实现与jQuery ajax方法相同的API。

  • 默认:undefined

  • 例子:Table AJAX

ajaxOptions

  • 属性:data-ajax-options

  • 类型:Object

  • 详情:

    提交ajax请求的其他选项。值列表:jQuery.ajax.

  • 默认:{}

  • 例子: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

queryParamsType

  • 属性:data-query-params-type

  • 类型:String

  • 详情:

    设置'limit'为发送具有RESTFul类型的查询参数。

  • 默认:'limit'

  • 例子:Query Params Type

responseHandler

  • 属性:data-response-handler

  • 类型:Function

  • 详情:

    在加载远程数据之前,处理响应数据格式,参数对象包含:

    • res: 响应数据。
    • jqXHR: jqXHR对象,它是XMLHTTPRequest对象的超集。有关更多信息,请参见 jqXHR 类.
  • 默认:function(res) { return res }

  • 例子:Response Handler

totalField

  • 属性:data-total-field

  • 类型:String

  • 详情:

    键入包含'total'数据的传入json 。

  • 默认:'total'

  • 例子:Total/Data Field

totalNotFilteredField

  • 属性:data-total-not-filtered-field

  • 类型:string

  • 详情:

    json响应中的字段,将用于 showExtendedPagination.

  • 默认:totalNotFiltered

  • 例子:Total Not Filtered Field

dataField

  • 属性:data-data-field

  • 类型:String

  • 详情:

    键入包含'rows'数据列表的传入json 。

  • 默认:'rows'

  • 例子:Total/Data Field

pagination

  • 属性:data-pagination

  • 类型:Boolean

  • 详情:

    设置true 为在表格底部显示分页工具栏。

  • 默认:false

  • 例子:Table Pagination

onlyInfoPagination

  • 属性:data-only-info-pagination

  • 类型:Boolean

  • 详情:

    设置true为仅显示表中显示的数据量。它需要将分页表选项设置为true。

  • 默认:false

  • 例子:Only Info Pagination

showExtendedPagination

  • 属性:data-show-extended-pagination

  • 类型:Boolean

  • 详情:

    设置true 为显示分页的扩展版本(包括不带过滤器的所有行的计数)。如果在服务器端使用分页,请使用totalNotFilteredField来定义计数。

  • 默认:false

  • 例子:Show Extended Pagination

paginationLoop

  • 属性:data-pagination-loop

  • 类型:Boolean

  • 详情:

    设置true为启用分页连续循环模式。

  • 默认:true

  • 例子:Pagination Loop

sidePagination

totalRows

  • 属性:data-total-rows

  • 类型:Number

  • 详情:

    此属性主要由分页服务器传入,该服务器易于使用。

  • 默认:0

totalNotFiltered

  • 属性:data-total-not-filtered

  • 类型:Number

  • 详情:

    此属性主要由分页服务器传入,该服务器易于使用。

  • 默认:0

pageNumber

  • 属性:data-page-number

  • 类型:Number

  • 详情:

    设置分页属性时,请初始化页码。

  • 默认:1

  • 例子:Page Number

pageSize

  • 属性:data-page-size

  • 类型:Number

  • 详情:

    设置分页属性时,初始化页面大小。

  • 默认:10

  • 例子:Page Size

pageList

  • 属性:data-page-list

  • 类型:Array

  • 详情:

    设置分页属性时,初始化页面尺寸选择列表。如果包含'all''unlimited' 选项,则所有记录将显示在表中。

  • 默认:[10, 25, 50, 100]

  • 例子:Page List

paginationHAlign

  • 属性:data-pagination-h-align

  • 类型:String

  • 详情:

    指示如何对齐分页。'left', 'right' 可以使用。

  • 默认:'right'

  • 例子:Pagination H Align

paginationVAlign

  • 属性:data-pagination-v-align

  • 类型:String

  • 详情:

    指示如何垂直对齐分页。'top', 'bottom', 'both'(穿上顶部和底部的分页)都可以使用。

  • 默认:'bottom'

  • 例子:Pagination V Align

paginationDetailHAlign

  • 属性:data-pagination-detail-h-align

  • 类型:String

  • 详情:

    指示如何对齐分页细节 'left', 'right' 可以使用。

  • 默认:'left'

  • 例子:Pagination H Align

paginationPreText

  • 属性:data-pagination-pre-text

  • 类型:String

  • 详情:

    指示要在分页详细信息中显示的图标或文本,即上一个按钮。

  • 默认:'‹'

  • 例子:Pagination Text

paginationNextText

  • 属性:data-pagination-next-text

  • 类型:String

  • 详情:

    指示要在分页详细信息(下一步按钮)中显示的图标或文本。

  • 默认:'›'

  • 例子:Pagination Text

paginationSuccessivelySize

  • 属性:data-pagination-successively-size

  • 类型:Number

  • 详情:

    连续的最大连续页数。

  • 默认:5

  • 例子:Pagination Index Number

paginationPagesBySide

  • 属性:data-pagination-pages-by-side

  • 类型:Number

  • 详情:

    当前页面每侧(右侧,左侧)的页数。

  • 默认:1

  • 例子:Pagination Index Number

paginationUseIntermediate

  • 属性:data-pagination-use-intermediate

  • 类型:Boolean

  • 详情:

    计算并显示中间页面以便快速访问。

  • 默认:false

  • 例子:Pagination Index Number

  • 属性:data-search

  • 类型:Boolean

  • 详情:

    启用搜索输入。

    有3种搜索方式:

    • 该值包含搜索查询(默认)。示例:Github包含git。
    • 该值必须与搜索查询相同。示例:Github(值)和Github(搜索查询)。
    • 比较(<, >, <=, =<, >=, =>)。示例:4大于3。
  • 默认:false

  • 例子:Table Search

searchOnEnterKey

  • 属性:data-search-on-enter-key

  • 类型:Boolean

  • 详情:

    搜索方法将一直执行到按下Enter键。

  • 默认:false

  • 例子:Search On Enter Key

strictSearch

  • 属性:data-strict-search

  • 类型:Boolean

  • 详情:

    启用严格搜索。禁用比较检查。

  • 默认:false

  • 例子:Strict Search

visibleSearch

  • 属性:visible-search

  • 类型:Boolean

  • 详情:

    设置true 为仅在可见列/数据中搜索,如果数据包含其他未显示的值,则在搜索时将忽略它们。

  • 默认:false

  • 例子:visible search

showButtonIcons

  • 属性:show-button-icons

  • 类型:Boolean

  • 详情:

    所有按钮都将在其上显示图标

  • 默认:true

showButtonText

  • 属性:show-button-text

  • 类型:Boolean

  • 详情:

    所有按钮都将在其上显示文本

  • 默认:false

showSearchButton

  • 属性:data-show-search-button

  • 类型:Boolean

  • 详情:

    设置true 为在搜索输入后面显示搜索按钮。仅在按下按钮时才会执行搜索(例如,以防止交通或加载时间)。

  • 默认:false

showSearchClearButton

  • 属性: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 方法中的过滤器对象。

    用法示例:

  functioncustomSearch(data,text){
    returndata.filter(function(row){
      returnrow.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: 列对象。

    支持 classescss.用法示例:

  functionfooterStyle(column){
    return{
      css:{'font-weight':'normal'},
      classes:'my-class'
    }
  }
  
  • 默认:{}

showColumns

  • 属性:data-show-columns

  • 类型:Boolean

  • 详情:

    设置true 为显示列下拉列表。我们可以将 switchable选项设置false为隐藏下拉列表中项目。

  • 默认:false

showColumnsToggleAll

  • 属性:data-show-columns-toggle-all

  • 类型:Boolean

  • 详情:

    设置true 为在列选项/下拉列表中显示“全部切换”复选框。

  • 默认:false

showColumnsSearch

  • 属性:data-show-columns-search

  • 类型:Boolean

  • 详情:

    设置true 为显示对列过滤器的搜索。

  • 默认:false

minimumCountColumns

  • 属性:data-minimum-count-columns

  • 类型:Number

  • 详情:

    从列下拉列表中隐藏的最小列数。

  • 默认:1

showPaginationSwitch

  • 属性:data-show-pagination-switch

  • 类型:Boolean

  • 详情:

    设置true 为显示分页开关按钮。

  • 默认:false

showRefresh

  • 属性:data-show-refresh

  • 类型:Boolean

  • 详情:

    设置true为显示刷新按钮。

  • 默认:false

showToggle

  • 属性:data-show-toggle

  • 类型:Boolean

  • 详情:

    设置true显示切换按钮以切换表格/卡片视图。

  • 默认:false

showFullscreen

  • 属性:data-show-fullscreen

  • 类型:Boolean

  • 详情:

    设置true显示全屏按钮。

  • 默认:false

smartDisplay

  • 属性:data-smart-display

  • 类型:Boolean

  • 详情:

    设置true为智能显示分页或名片视图。

  • 默认:true

escape

  • 属性:data-escape

  • 类型:Boolean

  • 详情:

    转义用于插入HTML的字符串,并替换 &, <, >, “, `, and ‘ 字符。

  • 默认:false

filterOptions

  • 属性:data-filter-options

  • 类型:Boolean

  • 详情:

    定义算法的默认过滤器选项, filterAlgorithm: 'and' 意味着所有给定的过滤器必须匹配, filterAlgorithm: 'or' 意味着给定的过滤器之一必须匹配。

  • 默认:{ filterAlgorithm: 'and' }

idField

  • 属性:data-id-field

  • 类型:String

  • 详情:

    指明哪个字段将用作复选框/单选框值,与selectItemName对应。

  • 默认:undefined

selectItemName

  • 属性:data-select-item-name

  • 类型:String

  • 详情:

    单选或复选框输入的名称。

  • 默认:'btSelectItem'

clickToSelect

  • 属性: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) }

singleSelect

  • 属性:data-single-select

  • 类型:Boolean

  • 详情:

    设置true 为允许复选框仅选择一行。

  • 默认:false

checkboxHeader

  • 属性:data-checkbox-header

  • 类型:Boolean

  • 详情:

    设置false为隐藏标题行中的所有复选框。

  • 默认:true

maintainMetaData

  • 属性:data-maintain-meta-data

  • 类型:Boolean

  • 详情:

    设置true为在更改页面和搜索上维护以下元数据:

    • 选定的行
    • 隐藏的行
  • 默认:false

multipleSelectRow

  • 属性:data-multiple-select-row

  • 类型:Boolean

  • 详情:

    设置true以启用多选行。可以使用ctrl键单击以选择一行,或使用shift键单击以选择一系列行。

  • 默认:false

uniqueId

  • 属性:data-unique-id

  • 类型:String

  • 详情:

    为每一行指示唯一的标识符。

  • 默认:undefined

cardView

  • 属性:data-card-view

  • 类型:Boolean

  • 详情:

    设置true 为显示名片视图表,例如移动视图。

  • 默认:false

detailView

  • 属性:data-detail-view

  • 类型:Boolean

  • 详情:

    设置true为显示详细视图表。

  • 默认:false

detailViewIcon

  • 属性:data-detail-view-icon

  • 类型:Boolean

  • 详情:

    设置true为显示详细信息视图列(加/减图标)。

  • 默认:true

detailViewByClick

  • 属性:data-detail-view-by-click

  • 类型:Boolean

  • 详情:

    设置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

  • 属性: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

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

  • 详情:

    定义在工具栏,分页和详细信息视图中使用的图标。

  • 默认:

  {
    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'
  }
  

html

  • 属性:data-html

  • 类型:Object

  • 详情:

    定义表格的html。

  • 默认:

    代码太多,请签出index.js

iconSize

  • 属性:data-icon-size

  • 类型:String

  • 详情:

    定义图标的大小, undefined, 'lg', 'sm' 都可以使用。

  • 默认:undefined

iconsPrefix

  • 属性:data-icons-prefix

  • 类型:String

  • 详情:

    定义图标集名称('glyphicon''fa')。默认情况下'fa'用于Bootstrap v4。

  • 默认:'fa'