列オプション

Bootstrap Tableの列オプションAPI。

列オプションは、jQuery.fn.bootstrapTable.columnDefaults で定義されています。

align

• 属性: data-align

• 型: String

• 詳細

  列データの配置方法を示します。'left'、'right'、'center'を使用できます。

• デフォルト: undefined

• 例: 列の配置

cardVisible

• 属性: data-card-visible

• 型: Boolean

• 詳細

  カードビューの状態で行項目を非表示にするには、falseを設定します。

• デフォルト: true

• 例: カードの表示/非表示

cellStyle

• 属性: data-cell-style

• 型: Function

• 詳細

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

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

  クラスまたはCSSをサポートします。

• デフォルト: undefined

• 例: セルスタイル

checkbox

• 属性: data-checkbox

• 型: Boolean

• 詳細

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

  値が指定された場合、チェックボックスは自動的にチェックされます。また、フォーマッタを使用してチェックボックスをチェック/チェック解除することもできます（チェックするにはtrueを返し、チェック解除するにはfalseを返します）。

• デフォルト: false

• 例: 列のチェックボックス

checkboxEnabled

• 属性: data-checkbox-enabled

• 型: Boolean

• 詳細

  チェックボックス/ラジオボックスを無効にするにはfalseを設定します。

• デフォルト: true

• 例: チェックボックスの有効化 および チェックボックスの無効化

class

• 属性: class | data-class

• 型: String

• 詳細

  列のクラス名。

• デフォルト: undefined

• 例: 列のクラス

clickToSelect

• 属性: data-click-to-select

• 型: Boolean

• 詳細

  行をクリックしたときにチェックボックスまたはラジオボックスを選択するにはtrueを設定します。

• デフォルト: true

• 例: クリックして選択

colspan

• 属性: colspan | data-colspan

• 型: Number

• 詳細

  セルが占有する列数を示します。

• デフォルト: undefined

• 例: Rowspan Colspan

detailFormatter

• 属性: data-detail-formatter

• 型: Function

• 詳細

  detailView と detailViewByClick がtrueに設定されている場合、詳細ビューをフォーマットします。Stringを返すと、詳細ビューセルに追加されます。オプションで、3番目のパラメータを使用して要素を直接レンダリングできます。これは、ターゲットセルのjQuery要素です。

  フォールバックは、テーブルの詳細フォーマッタです。

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

• 例: 詳細フォーマッタ

escape

• 属性: data-escape

• 型: Boolean

• 詳細

  HTMLに挿入するための文字列をエスケープし、&、<、>、"、`、および'文字を置き換えます。

• デフォルト: undefined

• 例: 列のエスケープ

events

• 属性: data-events

• 型: Object

• 詳細

  セルイベントリスナー。formatter関数を使用する場合、4つのパラメータを取ります。

  • event: jQueryイベント。
  • value: フィールドの値。
  • row: 行レコードデータ。
  • index: 行のインデックス。

  コード例

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

• デフォルト: undefined

• 例: 列イベント

  falign

• 属性: data-falign

• 型: String

• 詳細

  テーブルフッターの配置方法を示します。'left'、'right'、'center'を使用できます。

• デフォルト: undefined

• 例: フッターの配置

field

• 属性: data-field

• 型: String

• 詳細

  列のフィールド名。このフィールドは一意である必要があります。そうでない場合、不明な問題が発生する可能性があります。

• デフォルト: undefined

• 例: 列のフィールド

footerFormatter

• 属性: data-footer-formatter

• 型: Function

• 詳細

  コンテキスト（this）は、列オブジェクトです。

  関数は、2つのパラメータを取ります。

  • data: すべてのデータ行の配列。
  • value: フッターデータが設定されている場合、フッター列の値。

  期待される戻り値のデータ型は、jQuery、String、またはHTMLElementです。他の型は、String型に強制されます。

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

• デフォルト: undefined

• 例: フッターフォーマッタ

footerStyle

• 属性: data-footer-style

• 型: Function

• 詳細

  フッタースタイルフォーマッタ関数は、1つのパラメーターを取ります。

  • column: 列オブジェクト。

  classesまたはcssをサポートします。使用例

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

• デフォルト: {}

• 例: フッタースタイル

formatter

• 属性: data-formatter

• 型: Function

• 詳細

  コンテキスト（this）は、列オブジェクトです。

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

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

  期待される戻り値のデータ型は、jQuery、String、またはHTMLElementです。他の型は、String型に強制されます。

• デフォルト: undefined

• 例: 列フォーマッタ

halign

• 属性: data-halign

• 型: String

• 詳細

  テーブルヘッダーの配置方法を示します。'left'、'right'、'center'を使用できます。

• デフォルト: undefined

• 例: 列の配置

order

• 属性: data-order

• 型: String

• 詳細

  デフォルトのソート順序。 'asc'または'desc'のみを指定できます。

• デフォルト: 'asc'

• 例: ソート名と順序

radio

• 属性: data-radio

• 型: Boolean

• 詳細

  ラジオを表示するにはtrueを設定します。ラジオ列の幅は固定です。

  値が指定された場合、チェックボックスは自動的にチェックされます。また、フォーマッタを使用してラジオをチェック/チェック解除することもできます（チェックするにはtrueを返し、チェック解除するにはfalseを返します）。

• デフォルト: false

• 例: 列のラジオ

rowspan

• 属性: rowspan | data-rowspan

• 型: Number

• 詳細

  セルが占有する行数を示します。

• デフォルト: undefined

• 例: Rowspan Colspan

searchable

• 属性: data-searchable

• 型: Boolean

• 詳細

  この列のデータを検索するにはtrueを設定します。

• デフォルト: true

• 例: 列の検索

searchFormatter

• 属性: data-search-formatter

• 型: Boolean

• 詳細

  フォーマットされたデータを使用して検索するにはtrueを設定します。

• デフォルト: true

• 例: 検索フォーマッタ

searchHighlightFormatter

• 属性: data-search-highlight-formatter

• 型: Boolean|Function

• 詳細

  検索ハイライトオプションのカスタムハイライトフォーマッタを使用する関数を定義します。

• デフォルト: true

• 例: 検索可能なハイライトフォーマッタ

showSelectTitle

• 属性: data-show-select-title

• 型: Boolean

• 詳細

  ラジオまたは「singleSelect」「checkbox」オプションを使用して列のタイトルを表示するにはtrueを設定します。

• デフォルト: false

• 例: 選択タイトルの表示

sortable

• 属性: data-sortable

• 型: Boolean

• 詳細

  列をソートできるようにするにはtrueを設定します。

• デフォルト: false

• 例: 列のソート

sorter

• 属性: data-sorter

• 型: Function

• 詳細

  ローカルソートに使用されるカスタムフィールドソート関数。4つのパラメータを取ります。

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

  期待される戻り値: -1, 0, 1.

• デフォルト: undefined

• 例: 列ソーター

sortName

• 属性: data-sort-name

• 型: String

• 詳細

  ヘッダーのデフォルトのソート名や列のフィールド名ではなく、カスタマイズ可能なソート名を提供します。例えば、列が ‘html’ の fieldName の値を、<b><span style="color:red">abc</span></b> のように表示するかもしれませんが、ソートする fieldName は ‘content’ で、値は 'abc' である、というような場合です。

• デフォルト: undefined

• 例: ソート名と順序

switchable

• 属性: data-sort-name

• 型: Boolean

• 詳細

  列項目の切り替え機能を無効にするには、false を設定します。

• デフォルト: true

• 例: 列の切り替え

switchableLabel

• 属性: data-switchable-label

• 型: String

• 詳細

  ドロップダウンの切り替え可能な列のラベル。指定しない場合は、列のタイトルが使用されます。

• デフォルト: undefined

• 例: 列の切り替え

title

• 属性: data-title

• 型: String

• 詳細

  列のタイトルテキスト。

• デフォルト: undefined

• 例: 列のタイトル

titleTooltip

• 属性: data-title-tooltip

• 型: String

• 詳細

  列のタイトルツールチップテキスト。このオプションは、title HTML 属性もサポートしています。

• デフォルト: undefined

• 例: タイトルのツールチップ

valign

• 属性: data-valign

• 型: String

• 詳細

  セルデータの配置方法を示します。'top'、'middle'、'bottom'を使用できます。

• デフォルト: undefined

• 例: 列の配置

visible

• 属性: data-visible

• 型: Boolean

• 詳細

  列項目を非表示にするには、false を設定します。

• デフォルト: true

• 例: 列の表示/非表示

width

• 属性: data-width

• 型: Number

• 詳細

  列の幅。定義されていない場合、幅はコンテンツに合わせて自動的に拡張されます。ただし、テーブルがレスポンシブでサイズが小さすぎる場合、この 'width' は無視される可能性があります（クラスなどを使用して min/max-width を使用してください）。デフォルトで使用される単位は ‘px’ です。変更するには widthUnit を使用してください！

• デフォルト: undefined

• 例: 列の幅

widthUnit

• 属性: data-width-unit

• 型: String

• 詳細

  width オプションに使用する単位を定義します。

• デフォルト: px

• 例: 幅の単位