列選項

Bootstrap Table 的列選項 API。

列選項定義在 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 時顯示單選框。單選框列具有固定寬度。

  如果提供了值，會自動選中該單選框。也可通過 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