Opciones de columnas de Bootstrap Table

La API de opciones de columnas de Bootstrap Table.

Las opciones de columna se definen en jQuery.fn.bootstrapTable.columnDefaults.

Nota: Los nombres de las opciones a continuación (por ejemplo, align, checkbox, class) son nombres de propiedades exactos para usar al definir columnas en la matriz columns.

Por ejemplo:

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

align

• Atributo: data-align

• Tipo: String

• Detalle:

  Indica cómo alinear los datos de la columna. Se pueden usar 'left' (izquierda), 'right' (derecha), 'center' (centro).

• Por defecto: undefined

• Ejemplo: Alineación de columnas

cardVisible

• Atributo: data-card-visible

• Tipo: Boolean

• Detalle:

  Establece false para ocultar el elemento de columna en el estado de vista de tarjeta.

• Por defecto: true

• Ejemplo: Visible en tarjeta

cellStyle

• Atributo: data-cell-style

• Tipo: Function

• Detalle:

  La función formateadora de estilo de celda, toma cuatro parámetros:

  • value: el valor del campo.
  • row: los datos del registro de fila.
  • index: el índice de la fila.
  • field: el campo de la fila.

  Admite clases o css.

• Por defecto: undefined

• Ejemplo: Estilo de celda

checkbox

• Atributo: data-checkbox

• Tipo: Boolean

• Detalle:

  Establece true para mostrar una casilla de verificación. La columna de casilla de verificación tiene un ancho fijo.

  Si se da un valor, la casilla de verificación se marca automáticamente. También es posible marcar/desmarcar la casilla de verificación usando un formateador (devolver true para marcar, devolver false para desmarcar).

• Por defecto: false

• Ejemplo: Casilla de verificación de columna

checkboxEnabled

• Atributo: data-checkbox-enabled

• Tipo: Boolean

• Detalle:

  Establece false para deshabilitar las casillas de verificación/radio buttons.

• Por defecto: true

• Ejemplo: Casilla de verificación habilitada y Casilla de verificación deshabilitada

class

• Atributo: class | data-class

• Tipo: String

• Detalle:

  El nombre de clase de la columna.

• Por defecto: undefined

• Ejemplo: Clase de columna

clickToSelect

• Atributo: data-click-to-select

• Tipo: Boolean

• Detalle:

  Establece true para seleccionar la casilla de verificación o radio button al hacer clic en las filas.

• Por defecto: true

• Ejemplo: Hacer clic para seleccionar

colspan

• Atributo: colspan | data-colspan

• Tipo: Number

• Detalle:

  Indica cuántas columnas debe ocupar una celda.

• Por defecto: undefined

• Ejemplo: Rowspan Colspan

detailFormatter

• Atributo: data-detail-formatter

• Tipo: Function

• Detalle:

  Formatea tu vista de detalle cuando detailView y detailViewByClick se establecen en true. Devuelve una String y se añadirá a la celda de vista de detalle, opcionalmente renderiza el elemento directamente usando el tercer parámetro, que es un elemento jQuery de la celda objetivo.

  El respaldo es el detail-formatter de la tabla.

• Por defecto: function(index, row, $element) { return '' }

• Ejemplo: Formateador de detalle

escape

• Atributo: data-escape

• Tipo: Boolean

• Detalle:

  Escapa una cadena para su inserción en HTML, reemplazando los caracteres &, <, >, ", ` y '.

• Por defecto: undefined

• Ejemplo: Escape de columna

events

• Atributo: data-events

• Tipo: Object

• Detalle:

  El listener de eventos de celda, cuando usas la función formateadora, toma cuatro parámetros:

  • event: el evento.
  • value: el valor del campo.
  • row: los datos del registro de fila.
  • index: el índice de la fila.

  Código de ejemplo:

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

• Por defecto: undefined

• Ejemplo: Eventos de columna

falign

• Atributo: data-falign

• Tipo: String

• Detalle:

  Indica cómo alinear el pie de tabla. Se pueden usar 'left' (izquierda), 'right' (derecha), 'center' (centro).

• Por defecto: undefined

• Ejemplo: Alineación de pie

field

• Atributo: data-field

• Tipo: String

• Detalle:

  El nombre del campo de la columna. Este campo debe ser único, de lo contrario pueden ocurrir problemas desconocidos.

• Por defecto: undefined

• Ejemplo: Campo de columna

footerFormatter

• Atributo: data-footer-formatter

• Tipo: Function

• Detalle:

  El contexto (this) es el objeto de columna.

  La función toma dos parámetros:

  • data: Matriz de todas las filas de datos.
  • value: Si se establecen datos de pie, el valor de la columna de pie.

  El tipo de datos de retorno esperado es jQuery, String o HTMLElement. Otros tipos se forzarán al tipo String.

  Si obtienes datos de un servidor y estableces el valor del pie desde la respuesta del servidor, por favor usa la opción footerField.

• Por defecto: undefined

• Ejemplo: Formateador de pie

footerStyle

• Atributo: data-footer-style

• Tipo: Function

• Detalle:

  La función formateadora de estilo de pie, toma un parámetro:

  • column: el objeto de columna.

  Admite classes o css. Ejemplo de uso:

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

• Por defecto: {}

• Ejemplo: Estilo de pie

formatter

• Atributo: data-formatter

• Tipo: Function

• Detalle:

  El contexto (this) es el objeto de columna.

  La función formateadora de celda, toma cuatro parámetros:

  • value: el valor del campo.
  • row: los datos del registro de fila.
  • index: el índice de la fila.
  • field: el campo de la fila.

  El tipo de datos de retorno esperado es jQuery, String o HTMLElement. Otros tipos se forzarán al tipo String.

• Por defecto: undefined

• Ejemplo: Formateador de columna

halign

• Atributo: data-halign

• Tipo: String

• Detalle:

  Indica cómo alinear el encabezado de la tabla. Se pueden usar 'left' (izquierda), 'right' (derecha), 'center' (centro).

• Por defecto: undefined

• Ejemplo: Alineación de columnas

order

• Atributo: data-order

• Tipo: String

• Detalle:

  El orden de clasificación predeterminado, solo puede ser 'asc' (ascendente) o 'desc' (descendente).

• Por defecto: 'asc'

• Ejemplo: Orden de nombre de clasificación

radio

• Atributo: data-radio

• Tipo: Boolean

• Detalle:

  Establece true para mostrar un radio button. La columna de radio button tiene un ancho fijo.

  Si se da un valor, la casilla de verificación se marca automáticamente. También es posible marcar/desmarcar el radio button usando un formateador (devolver true para marcar, devolver false para desmarcar).

• Por defecto: false

• Ejemplo: Radio button de columna

rowspan

• Atributo: rowspan | data-rowspan

• Tipo: Number

• Detalle:

  Indica cuántas filas debe ocupar una celda.

• Por defecto: undefined

• Ejemplo: Rowspan Colspan

searchable

• Atributo: data-searchable

• Tipo: Boolean

• Detalle:

  Establece true para buscar datos en esta columna.

• Por defecto: true

• Ejemplo: Buscable de columna

searchFormatter

• Atributo: data-search-formatter

• Tipo: Boolean

• Detalle:

  Establece true para buscar usando datos formateados.

• Por defecto: true

• Ejemplo: Formateador de búsqueda

searchHighlightFormatter

• Atributo: data-search-highlight-formatter

• Tipo: Boolean|Function

• Detalle:

  Define una function para usar un formateador de resaltado personalizado para la opción search highlight (resaltado de búsqueda).

• Por defecto: true

• Ejemplo: Formateador de resaltado buscable

showSelectTitle

• Atributo: data-show-select-title

• Tipo: Boolean

• Detalle:

  Establece true para mostrar el título de la columna con la opción ‘radio’ o ‘singleSelect’ ‘checkbox’.

• Por defecto: false

• Ejemplo: Mostrar título de selección

sortable

• Atributo: data-sortable

• Tipo: Boolean

• Detalle:

  Establece true para permitir que la columna se pueda clasificar.

• Por defecto: false

• Ejemplo: Clasificable de columna

sorter

• Atributo: data-sorter

• Tipo: Function

• Detalle:

  La función de clasificación de campo personalizada que se usa para hacer clasificación local, toma cuatro parámetros:

  • fieldA: el primer valor de campo.
  • fieldB: el segundo valor de campo.
  • rowA: la primera fila.
  • rowB: la segunda fila.

  Valores de retorno esperados: -1, 0, 1.

• Por defecto: undefined

• Ejemplo: Clasificador de columna

sortName

• Atributo: data-sort-name

• Tipo: String

• Detalle:

  Proporciona un sort-name personalizable, no el sort-name predeterminado en el encabezado, ni el nombre de campo de la columna. Por ejemplo, una columna podría mostrar el valor del fieldName ‘html’ como <b><span style="color:red">abc</span></b>, pero un fieldName para ordenar es ‘content’ con el valor de 'abc'.

• Por defecto: undefined

• Ejemplo: Orden de nombre de clasificación

switchable

• Atributo: data-switchable

• Tipo: Boolean

• Detalle:

  Establece false para deshabilitar la capacidad de cambio del elemento de columna.

• Por defecto: true

• Ejemplo: Cambiable de columna

switchableLabel

• Atributo: data-switchable-label

• Tipo: String

• Detalle:

  La etiqueta de la columna cambiable en el dropdown. Si no se especifica, usa el título de la columna.

• Por defecto: undefined

• Ejemplo: Cambiable de columna

title

• Atributo: data-title

• Tipo: String

• Detalle:

  El texto del título de la columna.

• Por defecto: undefined

• Ejemplo: Título de columna

titleTooltip

• Atributo: data-title-tooltip

• Tipo: String

• Detalle:

  El texto del tooltip del título de la columna. El valor de esta opción también se aplicará al atributo HTML title.

• Por defecto: undefined

• Ejemplo: Tooltip de título

valign

• Atributo: data-valign

• Tipo: String

• Detalle:

  Indica cómo alinear los datos de la celda. Se pueden usar 'top' (arriba), 'middle' (medio), 'bottom' (abajo).

• Por defecto: undefined

• Ejemplo: Alineación de columnas

visible

• Atributo: data-visible

• Tipo: Boolean

• Detalle:

  Establece false para ocultar el elemento de columna.

• Por defecto: true

• Ejemplo: Visible de columna

width

• Atributo: data-width

• Tipo: Number

• Detalle:

  El ancho de la columna. Si no se define, el ancho se expandirá automáticamente para adaptarse a su contenido. Sin embargo, si la tabla se deja responsiva y con un tamaño demasiado pequeño, este 'width' podría ignorarse (usa min/max-width a través de class o similar en ese caso). La unidad predeterminada es ‘px’. ¡Usa widthUnit para cambiarla!

• Por defecto: undefined

• Ejemplo: Ancho de columna

widthUnit

• Atributo: data-width-unit

• Tipo: String

• Detalle:

  Define la unidad que se usa para la opción width.

• Por defecto: px

• Ejemplo: Unidad de ancho