Посмотреть на GitHub

Опции столбцов

API опций столбцов Bootstrap Table.

На этой странице

Опции столбцов определены в jQuery.fn.bootstrapTable.columnDefaults.

Примечание: Имена опций ниже (например, align, checkbox, class) — это точные имена свойств, используемые при определении столбцов в массиве columns.

Например:

$('#table').bootstrapTable({
  columns: [
    {
      field: 'id',
      title: 'ID',
      align: 'center'
    }
  ]
})

align

  • Атрибут: data-align

  • Тип: String

  • Описание:

    Указывает выравнивание данных столбца. Можно использовать 'left', 'right', 'center'.

  • Значение по умолчанию: undefined

  • Пример: Aligning Columns

cardVisible

  • Атрибут: data-card-visible

  • Тип: Boolean

  • Описание:

    Установите в false, чтобы скрыть этот столбец в режиме карточного представления.

  • Значение по умолчанию: true

  • Пример: Card Visible

cellStyle

  • Атрибут: data-cell-style

  • Тип: Function

  • Описание:

    Функция форматирования стиля ячейки, принимает четыре параметра:

    • value: значение поля.
    • row: запись данных строки.
    • index: индекс строки.
    • field: имя поля строки.

    Поддерживает возврат classes или css.

  • Значение по умолчанию: undefined

  • Пример: Cell Style

checkbox

  • Атрибут: data-checkbox

  • Тип: Boolean

  • Описание:

    При установке в true отображает флажок. Столбец флажка имеет фиксированную ширину.

    Если предоставлено значение, флажок будет автоматически отмечен. Также можно управлять состоянием флажка через formatter (возврат true отмечает флажок, возврат false снимает отметку).

  • Значение по умолчанию: false

  • Пример: Column Checkbox

checkboxEnabled

  • Атрибут: data-checkbox-enabled

  • Тип: Boolean

  • Описание:

    Установите в false, чтобы отключить флажок/переключатель.

  • Значение по умолчанию: true

  • Пример: Checkbox Enabled и Checkbox Disabled

class

  • Атрибут: class | data-class

  • Тип: String

  • Описание:

    Имя класса столбца.

  • Значение по умолчанию: undefined

  • Пример: Column Class

clickToSelect

  • Атрибут: data-click-to-select

  • Тип: Boolean

  • Описание:

    При установке в true, клик по строке выберет флажок или переключатель.

  • Значение по умолчанию: true

  • Пример: Click to Select

colspan

  • Атрибут: colspan | data-colspan

  • Тип: Number

  • Описание:

    Указывает количество столбцов, которые должна охватывать ячейка.

  • Значение по умолчанию: undefined

  • Пример: Rowspan Colspan

detailFormatter

  • Атрибут: data-detail-formatter

  • Тип: Function

  • Описание:

    Когда detailView и detailViewByClick установлены в true, эта функция используется для форматирования детального представления. Может возвращать строку для добавления в ячейку детального представления или напрямую использовать третий параметр (объект jQuery целевой ячейки) для рендеринга элементов.

    Если эта функция не определена, будет использоваться detail-formatter уровня таблицы.

  • Значение по умолчанию: function(index, row, $element) { return '' }

  • Пример: Detail Formatter

escape

  • Атрибут: data-escape

  • Тип: Boolean

  • Описание:

    Выполняет HTML-экранирование строки, заменяя символы &, <, >, ", ` и '.

  • Значение по умолчанию: undefined

  • Пример: Column Escape

events

  • Атрибут: data-events

  • Тип: Object

  • Описание:

    Слушатели событий ячейки, при использовании функции formatter могут принимать четыре параметра:

    • event: объект события.
    • value: значение поля.
    • row: запись данных строки.
    • index: индекс строки.

    Пример кода:

    <th .. data-events="operateEvent">
var operateEvents = {
  'click .like': function (e, value, row, index) {}
}

  • Значение по умолчанию: undefined

  • Пример: Column Events

falign

  • Атрибут: data-falign

  • Тип: String

  • Описание:

    Указывает, как выравнивать нижний колонтитул таблицы. Можно использовать 'left', 'right', 'center'.

  • Значение по умолчанию: undefined

  • Пример: Aligning Footer

field

  • Атрибут: data-field

  • Тип: String

  • Описание:

    Имя поля столбца. Это поле должно быть уникальным, иначе могут возникнуть неизвестные проблемы.

  • Значение по умолчанию: undefined

  • Пример: Column Field

footerFormatter

  • Атрибут: data-footer-formatter

  • Тип: Function

  • Описание:

    Контекст выполнения функции (this) указывает на объект столбца.

    Функция принимает два параметра:

    • data: массив, содержащий все данные строк.
    • value: значение столбца нижнего колонтитула при установке данных нижнего колонтитула, иначе undefined.

    Функция ожидает возврат типа jQuery, String или HTMLElement, другие типы будут принудительно преобразованы в String.

    При получении данных с сервера и установке значений нижнего колонтитула в ответе используйте опцию footerField.

  • Значение по умолчанию: undefined

  • Пример: Footer Formatter

footerStyle

  • Атрибут: data-footer-style

  • Тип: Function

  • Описание:

    Функция форматирования стиля нижнего колонтитула, принимает один параметр:

    • column: объект столбца.

    Поддерживает возврат classes или css. Пример:

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

  • Значение по умолчанию: {}

  • Пример: Footer Style

formatter

  • Атрибут: data-formatter

  • Тип: Function

  • Описание:

    Контекст выполнения функции (this) указывает на объект столбца.

    Функция форматирования ячейки, принимает четыре параметра:

    • value: значение текущего поля.
    • row: объект данных текущей строки.
    • index: индекс текущей строки.
    • field: имя текущего поля.

    Функция ожидает возврат типа jQuery, String или HTMLElement, другие типы будут принудительно преобразованы в String.

  • Значение по умолчанию: undefined

  • Пример: Column Formatter

halign

  • Атрибут: data-halign

  • Тип: String

  • Описание:

    Указывает, как выравнивать заголовок таблицы. Можно использовать 'left', 'right', 'center'.

  • Значение по умолчанию: undefined

  • Пример: Aligning Columns

order

  • Атрибут: data-order

  • Тип: String

  • Описание:

    Порядок сортировки по умолчанию, может быть только 'asc' или 'desc'.

  • Значение по умолчанию: 'asc'

  • Пример: Sort Name Order

radio

  • Атрибут: data-radio

  • Тип: Boolean

  • Описание:

    При установке в true отображает переключатель (radio button). Столбец переключателя имеет фиксированную ширину.

    Если предоставлено значение, переключатель будет автоматически выбран. Также можно управлять состоянием переключателя через formatter (возврат true выбирает переключатель, возврат false отменяет выбор).

  • Значение по умолчанию: false

  • Пример: Column Radio

rowspan

  • Атрибут: rowspan | data-rowspan

  • Тип: Number

  • Описание:

    Указывает количество строк, которые должна охватывать ячейка.

  • Значение по умолчанию: undefined

  • Пример: Rowspan Colspan

searchable

  • Атрибут: data-searchable

  • Тип: Boolean

  • Описание:

    При установке в true, поиск будет выполняться в этом столбце.

  • Значение по умолчанию: true

  • Пример: Column Searchable

searchFormatter

  • Атрибут: data-search-formatter

  • Тип: Boolean

  • Описание:

    При установке в true можно выполнять поиск на основе форматированных данных.

  • Значение по умолчанию: true

  • Пример: Search Formatter

searchHighlightFormatter

  • Атрибут: data-search-highlight-formatter

  • Тип: Boolean|Function

  • Описание:

    Определяет пользовательскую функцию форматирования подсветки, обеспечивающую функциональность подсветки для опции search highlight.

  • Значение по умолчанию: true

  • Пример: Searchable Highlight Formatter

showSelectTitle

  • Атрибут: data-show-select-title

  • Тип: Boolean

  • Описание:

    При установке в true, отображает заголовок столбца, использующего опции radio или singleSelect, checkbox.

  • Значение по умолчанию: false

  • Пример: Show Select Title

sortable

  • Атрибут: data-sortable

  • Тип: Boolean

  • Описание:

    При установке в true разрешает сортировку по этому столбцу.

  • Значение по умолчанию: false

  • Пример: Column Sortable

sorter

  • Атрибут: data-sorter

  • Тип: Function

  • Описание:

    Пользовательская функция сортировки полей для локальной сортировки, принимает четыре параметра:

    • fieldA: значение первого поля.
    • fieldB: значение второго поля.
    • rowA: данные первой строки.
    • rowB: данные второй строки.

    Ожидаемое возвращаемое значение: -1, 0, 1.

  • Значение по умолчанию: undefined

  • Пример: Column Sorter

sortName

  • Атрибут: data-sort-name

  • Тип: String

  • Описание:

    Предоставляет пользовательское имя поля сортировки, заменяющее поле сортировки по умолчанию в заголовке или имя поля столбца. Например, столбец отображает значение с именем поля html (например, <b><span style="color:red">abc</span></b>), но сортировка использует значение с именем поля content ('abc').

  • Значение по умолчанию: undefined

  • Пример: Sort Name Order

switchable

  • Атрибут: data-switchable

  • Тип: Boolean

  • Описание:

    Установите в false, чтобы отключить функцию переключения отображения/скрытия для этого столбца.

  • Значение по умолчанию: true

  • Пример: Column Switchable

switchableLabel

  • Атрибут: data-switchable-label

  • Тип: String

  • Описание:

    Метка переключения для столбца в выпадающем меню. Если не указано, используется заголовок столбца.

  • Значение по умолчанию: undefined

  • Пример: Column Switchable

title

  • Атрибут: data-title

  • Тип: String

  • Описание:

    Текст заголовка столбца.

  • Значение по умолчанию: undefined

  • Пример: Column Title

titleTooltip

  • Атрибут: data-title-tooltip

  • Тип: String

  • Описание:

    Текст всплывающей подсказки для заголовка столбца. Значение этой опции применяется к атрибуту HTML title.

  • Значение по умолчанию: undefined

  • Пример: Title Tooltip

valign

  • Атрибут: data-valign

  • Тип: String

  • Описание:

    Указывает, как выравнивать данные ячейки. Можно использовать 'top', 'middle', 'bottom'.

  • Значение по умолчанию: undefined

  • Пример: Aligning Columns

visible

  • Атрибут: data-visible

  • Тип: Boolean

  • Описание:

    Установите в false, чтобы скрыть этот столбец.

  • Значение по умолчанию: true

  • Пример: Column Visible

width

  • Атрибут: data-width

  • Тип: Number

  • Описание:

    Ширина столбца. Если не установлено, ширина автоматически расширяется для адаптации к содержимому. Однако, если таблица остаётся адаптивной и размер слишком мал, 'width' может быть проигнорирован (можно установить минимальную/максимальную ширину через классы и т.д.). Единица по умолчанию — px, можно изменить через widthUnit.

  • Значение по умолчанию: undefined

  • Пример: Column Width

widthUnit

  • Атрибут: data-width-unit

  • Тип: String

  • Описание:

    Определяет единицу измерения, используемую опцией width.

  • Значение по умолчанию: px

  • Пример: Width Unit