列オプション

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

• 詳細:

  セルスタイルフォーマット関数。4 つのパラメータを受け取ります：

  • value：フィールド値。
  • row：行データレコード。
  • index：行インデックス。
  • field：行フィールド名。

  classes または css を返すことができます。

• デフォルト値: undefined

• 例: Cell Style

checkbox

• 属性: data-checkbox

• タイプ: Boolean

• 詳細:

  true に設定するとチェックボックスを表示します。チェックボックス列は固定幅を持ちます。

  値が提供されている場合、そのチェックボックスは自動的にチェックされます。フォーマッターを使用してチェックボックスの状態を制御することもできます（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 に設定されている場合、この関数は詳細ビューのフォーマットに使用されます。文字列を返して詳細ビューセルに追加するか、3 番目のパラメータ（ターゲットセルの jQuery オブジェクト）を直接使用して要素をレンダリングできます。

  この関数が定義されていない場合、テーブルレベルの detail-formatter にフォールバックします。

• デフォルト値: function(index, row, $element) { return '' }

• 例: Detail Formatter

escape

• 属性: data-escape

• タイプ: Boolean

• 詳細:

  文字列に対して HTML エスケープを行い、その中の &、<、>、"、` および ' 文字を置き換えます。

• デフォルト値: undefined

• 例: Column Escape

events

• 属性: data-events

• タイプ: Object

• 詳細:

  セルイベントリスナー。フォーマッター関数を使用する際に 4 つのパラメータを受け取ることができます：

  • 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）は列オブジェクトを指します。

  関数は 2 つのパラメータを受け取ります：

  • data：すべての行データを含む配列。
  • value：フッターデータを設定する場合はフッター列の値、それ以外の場合は undefined。

  関数は jQuery、String、または HTMLElement タイプを返すことが期待されます。他のタイプは String に強制的に変換されます。

  サーバーからデータを取得し、応答でフッター値を設定する場合は、footerField オプションを使用してください。

• デフォルト値: undefined

• 例: Footer Formatter

footerStyle

• 属性: data-footer-style

• タイプ: Function

• 詳細:

  フッタースタイルフォーマット関数。1 つのパラメータを受け取ります：

  • column：列オブジェクト。

  classes または css を返すことができます。例：

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

• デフォルト値: {}

• 例: Footer Style

formatter

• 属性: data-formatter

• タイプ: Function

• 詳細:

  関数実行時のコンテキスト（this）は列オブジェクトを指します。

  セルフォーマット関数。4 つのパラメータを受け取ります：

  • 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 に設定するとラジオボタンを表示します。ラジオボタン列は固定幅を持ちます。

  値が提供されている場合、そのラジオボタンは自動的に選択されます。フォーマッターを使用してラジオボタンの状態を制御することもできます（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

• 詳細:

  カスタムフィールド並べ替え関数。ローカル並べ替えに使用されます。4 つのパラメータを受け取ります：

  • fieldA：最初のフィールド値。
  • fieldB：2 番目のフィールド値。
  • rowA：最初の行データ。
  • rowB：2 番目の行データ。

  期待される戻り値：-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