bootsrat-table表格选项

周意智
2023-12-01

翻译至https://bootstrap-table.com/docs/api/table-options/#url

--

  • 属性: data-toggle

  • 类型: String

  • 详情:

    在不编写JavaScript的情况下激活引导表。

  • 默认: 'table'

  • 示例: From HTML

height

  • 属性: data-height

  • 类型: Number

  • 详情:

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

    请注意,如果页面上有多个表并且同时设置了height选项,则需要id向每个表添加属性,否则,窗口调整大小将无法正常进行。

  • 默认: 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使theads呈现浅灰色或深灰色。

  • 默认: ''

  • 示例:Thead Classes

rowStyle

  • 属性: data-row-style

  • 类型: Function

  • 详情:

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

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

    支持类或CSS。

  • 默认: {}

  • 示例: Row Style

rowAttributes

  • 属性: data-row-attributes

  • 类型: Function

  • 详情:

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

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

    支持所有自定义属性。

  • 默认: {}

  • 示例: 行属性

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为启用虚拟滚动以显示虚拟的“无限”列表。

  • 默认: 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

customSort

  • 属性: data-custom-sort

  • 类型: Function

  • 详情:

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

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

  • 示例: Custom Order

columns

  • 属性: -

  • 类型: Array

  • 详情:

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

  • 默认: []

  • 示例: Table Columns

data

  • 属性: data-data

  • 类型: Array | Object

  • 详情:

    要加载的数据。

  • 默认: []

  • 示例: From Data

url

  • 属性: data-url

  • 类型: String

  • 详情:

    一个从远程站点请求数据的URL。

    请注意,所需的服务器响应格式取决于是否'sidePagination'指定了该选项。请参阅以下示例:

  • 默认: undefined

  • 示例: From URL

  • 错误处理

    要获取加载错误,请使用onLoadError

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'

  • 示例: 数据类型

ajax

  • 属性: data-ajax

  • 类型: Function

  • 详情:

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

  • 默认: undefined

  • 示例: AJAX

ajaxOptions

  • 属性: data-ajax-options

  • 类型: Object

  • 详情:

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

  • 默认: {}

  • 示例: AJAX选项

queryParams

  • 属性: data-query-params

  • 类型: Function

  • 详情:

    请求远程数据时,可以通过修改queryParams发送其他参数。

    如果queryParamsType = 'limit',params对象包含:limitoffsetsearchsortorder

    否则,它包含:pageSizepageNumbersearchTextsortNamesortOrder

    返回false停止请求。

  • 默认: function(params) { return params }

  • 示例: 查询参数

queryParamsType

  • 属性: data-query-params-type

  • 类型: String

  • 详情:

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

  • 默认: 'limit'

  • 示例: 查询参数类型

responseHandler

  • 属性: data-response-handler

  • 类型: Function

  • 详情:

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

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

  • 示例: 响应处理程序

totalField

  • 属性: data-total-field

  • 类型: String

  • 详情:

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

  • 默认: 'total'

  • 示例: 总计/数据字段

totalNotFilteredField

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

  • 类型: string

  • 详情:

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

  • 默认: totalNotFiltered

  • 示例: 未过滤字段总数

dataField

  • 属性: data-data-field

  • 类型: String

  • 详情:

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

  • 默认: 'rows'

  • 示例: 总计/数据字段

分页

  • 属性: data-pagination

  • 类型: Boolean

  • 详情:

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

  • 默认: false

  • 示例: 表分页

onlyInfoPagination

  • 属性: data-only-info-pagination

  • 类型: Boolean

  • 详情:

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

  • 默认: false

  • 示例: 仅信息分页

showExtendedPagination

  • 属性: data-show-extended-pagination

  • 类型: Boolean

  • 详情:

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

  • 默认: false

  • 示例: 显示扩展分页

分页循环

  • 属性: data-pagination-loop

  • 类型: Boolean

  • 详情:

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

  • 默认: true

  • 示例: 分页循环

侧面分页

  • 属性: data-side-pagination

  • 类型: String

  • 详情:

    定义表格的侧面分页,只能是'client''server'。使用'server'side需要设置'url'or 'ajax'选项。

    请注意,取决于'sidePagination'选项设置为'client'还是,所需的服务器响应格式是不同的 'server'。请参阅以下示例:

  • 默认: 'client'

  • 示例: 客户端分页服务器端分页

totalRows

  • 属性: data-total-rows

  • 类型: Number

  • 详情:

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

  • 默认: 0

totalNotFiltered

  • 属性: data-total-not-filtered

  • 类型: Number

  • 详情:

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

  • 默认: 0

pageNumber

  • 属性: data-page-number

  • 类型: Number

  • 详情:

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

  • 默认: 1

  • 示例: 页码

页面大小

  • 属性: data-page-size

  • 类型: Number

  • 详情:

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

  • 默认: 10

  • 示例: 页面大小

pageList

  • 属性: data-page-list

  • 类型: Array

  • 详情:

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

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

  • 示例: 页面列表

分页

  • 属性: data-pagination-h-align

  • 类型: String

  • 详情:

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

  • 默认: 'right'

  • 示例: 分页H对齐

分页

  • 属性: data-pagination-v-align

  • 类型: String

  • 详情:

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

  • 默认: 'bottom'

  • 示例: 分页V对齐

paginationDetailHAlign

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

  • 类型: String

  • 详情:

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

  • 默认: 'left'

  • 示例: 分页H对齐

paginationPreText

  • 属性: data-pagination-pre-text

  • 类型: String

  • 详情:

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

  • 默认: '‹'

  • 示例: 分页文本

分页

  • 属性: data-pagination-next-text

  • 类型: String

  • 详情:

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

  • 默认: '›'

  • 示例: 分页文本

分页成功

  • 属性: data-pagination-successively-size

  • 类型: Number

  • 详情:

    连续的最大连续页数。

  • 默认: 5

  • 示例: 分页索引号

paginationPagesBySide

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

  • 类型: Number

  • 详情:

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

  • 默认: 1

  • 示例: 分页索引号

分页使用中级

  • 属性: data-pagination-use-intermediate

  • 类型: Boolean

  • 详情:

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

  • 默认: false

  • 示例: 分页索引号

  • 属性: data-search

  • 类型: Boolean

  • 详情:

    启用搜索输入。

    有3种搜索方式:

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

  • 示例: 表格搜索

searchOnEnterKey

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

  • 类型: Boolean

  • 详情:

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

  • 默认: false

  • 示例: 按Enter键搜索

strictSearch

  • 属性: data-strict-search

  • 类型: Boolean

  • 详情:

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

  • 默认: false

  • 示例: 严格搜索

visibleSearch

  • 属性: visible-search

  • 类型: Boolean

  • 详情:

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

  • 默认: false

  • 示例: 可见搜索

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:搜索文字。
    • filterfilterBy方法的过滤器对象(来自1.15.4)。

    用法示例:

复制

  function customSearch(data, text) {
    return data.filter(function (row) {
      return row.field.indexOf(text) > -1
    })
  }
  

showHeader

  • 属性: data-show-header

  • 类型: Boolean

  • 详情:

    设置false为隐藏表格标题。

  • 默认: true

  • 示例: 显示标题

showFooter

  • 属性: data-show-footer

  • 类型: Boolean

  • 详情:

    设置true为显示摘要页脚行。

  • 默认: false

  • 示例: 显示页脚

footerStyle

  • 属性: data-footer-style

  • 类型: Function

  • 详情:

    页脚样式格式化程序函数,采用一个参数:

    • column:列对象。

    支持classescss。用法示例:

复制

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

showColumns

  • 属性: data-show-columns

  • 类型: Boolean

  • 详情:

    设置true为显示列下拉列表。

  • 默认: false

  • 示例: 基本列大列

showColumnsToggleAll

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

  • 类型: Boolean

  • 详情:

    设置true为在“列”选项/下拉列表中显示“ toogle所有”复选框。

  • 默认: 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

  • 示例: 全屏显示

智能显示

  • 属性: data-smart-display

  • 类型: Boolean

  • 详情:

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

  • 默认: true

  • 示例: 智能显示

逃逸

  • 属性: data-escape

  • 类型: Boolean

  • 详情:

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

  • 默认: false

  • 示例: 表转义

filterOptions

  • 属性: data-filter-options

  • 类型: Boolean

  • 详情:

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

  • 默认: { filterAlgorithm: 'and' }

  • 示例: 过滤器选项

idField

  • 属性: data-id-field

  • 类型: String

  • 详情:

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

  • 默认: undefined

  • 示例: Id字段

selectItemName

  • 属性: data-select-item-name

  • 类型: String

  • 详情:

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

  • 默认: 'btSelectItem'

  • 示例: Id字段

单击选择

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

  • 示例: 单选

复选框标题

  • 属性: data-checkbox-header

  • 类型: Boolean

  • 详情:

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

  • 默认: true

  • 示例: 复选框标题

maintainMetaData

  • 属性: data-maintain-meta-data

  • 类型: Boolean

  • 详情:

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

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

  • 示例: 维护元数据

multipleSelectRow

  • 属性: data-multiple-select-row

  • 类型: Boolean

  • 详情:

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

  • 默认: false

  • 示例: 多选行

唯一身份

  • 属性: data-unique-id

  • 类型: String

  • 详情:

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

  • 默认: undefined

  • 示例: getRowByUniqueId

cardView

  • 属性: data-card-view

  • 类型: Boolean

  • 详情:

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

  • 默认: false

  • 示例: 卡视图

详细视图

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

  • 示例: 明细过滤器

工具栏

  • 属性: data-toolbar

  • 类型: String/Node

  • 详情:

    jQuery选择指示工具栏,例如:#toolbar.toolbar,或DOM节点。

  • 默认: undefined

  • 示例: 自定义工具栏

工具栏对齐

  • 属性: data-toolbar-align

  • 类型: String

  • 详情:

    指示如何对齐自定义工具栏。'left''right'可以使用。

  • 默认: 'left'

  • 示例: 工具栏对齐

按钮工具栏

  • 属性: data-buttons-toolbar

  • 类型: String/Node

  • 详情:

    jQuery选择,指示自定义按钮工具栏,例如:#buttons-toolbar.buttons-toolbar,或DOM节点。

  • 默认: undefined

  • 示例: 按钮工具栏

按钮对齐

  • 属性: data-buttons-align

  • 类型: String

  • 详情:

    指示如何对齐工具栏按钮。'left''right'可以使用。

  • 默认: 'right'

  • 示例: 按钮对齐

buttonPrefix

  • 属性: data-buttons-prefix

  • 类型: String

  • 详情:

    定义表格按钮的前缀。

  • 默认: 'btn'

  • 示例: 按钮前缀

buttonClass

  • 属性: data-buttons-class

  • 类型: String

  • 详情:

    定义'btn-'表格按钮的类(在后面添加)。

  • 默认: 'secondary'

  • 示例: 按钮类

图标

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

  • 示例: 表格HTML

iconSize

  • 属性: data-icon-size

  • 类型: String

  • 详情:

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

  • 默认: undefined

  • 示例: 图标大小

iconsPrefix

  • 属性: data-icons-prefix

  • 类型: String

  • 详情:

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

  • 默认: 'fa'

  • 示例: 图标前缀

 类似资料: