GitHubで見る

メソッド

Bootstrap Table のメソッド API。

このページ

呼び出し構文:$('#table').bootstrapTable('method', parameter)

注意: 以下のメソッド名(例:appendcheckgetData)は、JavaScript を通じて Bootstrap Table メソッドを呼び出す際に使用される正確なメソッド名です。

例:$('#table').bootstrapTable('append', data)

append

  • パラメータ: data

  • 詳細:

    data をテーブルに追加します。

  • 例: Append

check

  • パラメータ: index

  • 詳細:

    指定されたインデックスの行を選択します。行インデックスは 0 から始まります。

  • 例: Check/Uncheck

checkAll

  • パラメータ: undefined

  • 詳細:

    現在のページのすべての行を選択します。

  • 例: Check/Uncheck All

checkBy

  • パラメータ: params

  • 詳細:

    指定されたフィールドの値の配列に基づいて、一致する行を選択します。params には以下の属性が含まれます:

    • field:レコードを検索および照合するためのフィールド名。
    • values:選択する行のフィールド値の配列。
    • onlyCurrentPage(デフォルト値:false):true の場合、現在のページに表示されているデータのみを選択します。ページネーションが有効な場合は、他のページのデータは無視されます。
  • 例: Check/Uncheck By

checkInvert

  • パラメータ: undefined

  • 詳細:

    現在のページの行の選択を反転します。onCheckSome および onUncheckSome イベントがトリガーされます。

  • 例: Check Invert

collapseAllRows

  • パラメータ: undefined

  • 詳細:

    詳細ビュー(detail view)機能が有効になっている場合、展開されているすべての行を折りたたみます。

  • 例: Expand/Collapse All Rows

collapseRow

  • パラメータ: index

  • 詳細:

    詳細ビュー(detail view)機能が有効になっている場合、index が指定された行を折りたたみます。

  • 例: Expand/Collapse Row

collapseRowByUniqueId

  • パラメータ: uniqueId

  • 詳細:

    詳細ビュー(detail view)機能が有効になっている場合、uniqueId が指定された行を折りたたみます。

  • 例: Expand/Collapse Row by uniqueId

destroy

  • パラメータ: undefined

  • 詳細:

    Bootstrap Table を破棄します。

  • 例: Destroy

expandAllRows

  • パラメータ: undefined

  • 詳細:

    詳細ビュー(detail view)機能が有効になっている場合、すべての行を展開します。

  • 例: Expand/Collapse All Rows

expandRow

  • パラメータ: index

  • 詳細:

    詳細ビュー(detail view)機能が有効になっている場合、index が指定された行を展開します。

  • 例: Expand/Collapse Row

expandRowByUniqueId

  • パラメータ: uniqueId

  • 詳細:

    詳細ビュー(detail view)機能が有効になっている場合、uniqueId が指定された行を展開します。

  • 例: Expand/Collapse Row by uniqueId

filterBy

  • パラメータ:

    • filter - フィルタリング条件オブジェクト、デフォルト値:{}
    • options - オプションオブジェクト、デフォルト値:
      {
          'filterAlgorithm': 'and'
      }
  • 詳細:

    (クライアントモードのみサポート)指定された条件に基づいてテーブルデータをフィルタリングします。

    フィルタリング方法:

    • options を空のままにすると、and フィルタリングアルゴリズムが使用されます
    • filterAlgorithmor に設定すると、「または」論理でフィルタリングします
    • カスタム関数を filterAlgorithm として渡すことで、高度なフィルタリングロジックを実装します

    フィルタリングアルゴリズムの詳細

    • And(論理積)

      • 例:{age: 10} は年齢が 10 のデータのみを表示します
      • 配列値をサポート:{age: 10, hairColor: ['blue', 'red', 'green']} は年齢が 10 で、髪の色が青、赤、または緑のデータを検索します
    • Or(論理和)

      • 例:{age: 10, name: "santa"} は年齢が 10 または 名前が santa のすべてのデータを表示します
    • Custom(カスタムアルゴリズム)

      • カスタム関数を使用して複雑なフィルタリングロジックを実装します
      • 関数は 2 つのパラメータを受け取ります:
        • row:現在の行のデータオブジェクト
        • filters:フィルタリング条件オブジェクト
      • true を返すと行が保持され、false を返すと行がフィルタリングされます
  • 例: Filter By

getData

  • パラメータ: params

  • 詳細:

    テーブルに読み込まれたデータを取得します。

    • useCurrentPagetrue の場合、現在のページのデータのみを返します。
    • includeHiddenRowstrue の場合、非表示の行を含みます。
    • unfilteredtrue の場合、すべてのデータ(フィルタリングされていない)を返します。
    • formatted:定義された formatter に従ってフォーマットされた値を返します。
  • 例: Get Data

getFooterData

  • パラメータ: undefined

  • 詳細:

    フッターに読み込まれたデータを取得します。

  • 例: Get Footer Data

getHiddenColumns

getHiddenRows

  • パラメータ: show

  • 詳細:

    すべての非表示行を取得します。パラメータ showtrue の場合、これらの非表示行も表示されます。false または指定されていない場合は、非表示行のデータのみを返し、表示しません。

  • 例: Get Hidden Rows

getOptions

  • パラメータ: undefined

  • 詳細:

    オプションオブジェクトを返します。

  • 例: Get Options

getRowByUniqueId

  • パラメータ: id

  • 詳細:

    テーブル内の id が指定された行のデータを取得します。

  • 例: Get Row By Unique Id

getScrollPosition

  • パラメータ: undefined

  • 詳細:

    現在のスクロール位置を取得します。単位は 'px' です。

  • 例: Get Scroll Position

getSelections

  • パラメータ: undefined

  • 詳細:

    選択されたすべての行のデータを返します。レコードが選択されていない場合は、空の配列を返します。

    注意: 検索、ページ切り替え、並べ替えなどの操作を実行すると、選択された行は自動的に選択解除されます。操作後に選択状態を維持するには、maintainMetaData オプションを設定してください。

  • 例: Get Selections

getVisibleColumns

hideAllColumns

  • パラメータ: undefined

  • 詳細:

    すべての列を非表示にします。

  • 例: Show/Hide All Columns

hideColumn

  • パラメータ: field

  • 詳細:

    指定された field の列を非表示にします。 パラメータは文字列または配列にすることができます。

  • 例: Show/Hide Column

hideLoading

  • パラメータ: undefined

  • 詳細:

    ロード状態を非表示にします。

  • 例: Show/Hide Loading

hideRow

  • パラメータ: params

  • 詳細:

    指定された行を非表示にします。params には少なくとも次の属性のいずれかが含まれている必要があります:

    • index:行インデックス。
    • uniqueId:その行の uniqueId 値。
  • 例: Show/Hide Row

insertRow

  • パラメータ: params

  • 詳細:

    新しい行を挿入します。params には以下の属性が含まれます:

    • index:挿入する行のインデックス。
    • row:行データ。
  • 例: Insert Row

load

  • パラメータ: data

  • 詳細:

    data をテーブルに読み込みます。古いデータは置き換えられます。

  • 例: Load

mergeCells

  • パラメータ: params

  • 詳細:

    複数のセルを結合します。params には以下の属性が含まれます:

    • index:行インデックス。
    • field:フィールド名。
    • rowspan:結合する行数。
    • colspan:結合する列数。
  • 例: Merge Cells

nextPage

prepend

  • パラメータ: data

  • 詳細:

    テーブルの先頭に data を挿入します。

  • 例: Prepend

prevPage

refresh

  • パラメータ: params

  • 詳細:

    リモートデータを更新/再読み込みします。以下のパラメータ設定をサポートします:

    • silent(デフォルト値:false):true に設定すると、サイレント更新を行い、ロード状態を表示しません。
    • url:オプション、現在のリクエスト URL を一時的に上書きします。
    • pageNumber:オプション、移動するページ番号を指定します。
    • pageSize:オプション、1 ページあたりの表示レコード数を指定します。
    • query:オプション、今回のリクエストに追加のクエリパラメータオブジェクトを追加します。

    使用例:

    // サイレント更新
    $('#table').bootstrapTable('refresh', {silent: true})
    
    // URL とページネーションパラメータを変更
    $('#table').bootstrapTable('refresh', {
      url: '/new/api/endpoint',
      pageNumber: 2,
      pageSize: 20
    })
    
    // クエリパラメータを追加
    $('#table').bootstrapTable('refresh', {
      query: {status: 'active', category: 'electronics'}
    })
  • 例: Refresh

refreshOptions

  • パラメータ: options

  • 詳細:

    テーブルオプションを更新します。

  • 例: Refresh Options

remove

  • パラメータ: params

  • 詳細:

    テーブルからデータを削除します。params には以下の属性が含まれます:

    • field:削除する行を照合するためのフィールド名。特殊フィールド $index を使用して行インデックスで削除できます。
    • values:削除する行のフィールド値の配列。$index 特殊フィールドを使用する場合、行インデックスの配列を渡すことができます。

    使用例:

    // id フィールドに基づいて削除
    $('#table').bootstrapTable('remove', {
      field: 'id',
      values: [1, 2, 3]
    })
    
    // 行インデックスに基づいて削除(0 から開始)
    $('#table').bootstrapTable('remove', {
      field: '$index',
      values: [0, 2, 4]
    })
    
    // 他のフィールドに基づいて削除
    $('#table').bootstrapTable('remove', {
      field: 'name',
      values: ['John', 'Jane']
    })
  • 例: Remove

removeAll

  • パラメータ: undefined

  • 詳細:

    テーブル内のすべてのデータを削除します。

  • 例: Remove All

removeByUniqueId

  • パラメータ: id

  • 詳細:

    テーブル内の id が指定された行のデータを削除します。

  • 例: Remove By Unique Id

resetSearch

  • パラメータ: text

  • 詳細:

    検索キーワード text を設定します。

  • 例: Reset Search

resetView

  • パラメータ: params

  • 詳細:

    Bootstrap Table ビューをリセットします(例:テーブルの高さをリセット)。params には以下が含まれます:

    • height:テーブルの高さ。
  • 例: Reset View

scrollTo

  • パラメータ: value|object

  • 詳細:

    • value
      • 数値 value に対応する位置までスクロールします。単位は 'px''bottom' を渡すと最下部までスクロールします。
    • object
      • 指定された単位の位置までスクロールします(px または rows、行インデックスは 0 から開始)。 デフォルト値:{unit: 'px', value: 0}
  • 例: Scroll To

selectPage

showAllColumns

showColumn

  • パラメータ: field

  • 詳細:

    指定された field の列を表示します。 パラメータは文字列または配列にすることができます。

  • 例: Show/Hide Column

showLoading

  • パラメータ: undefined

  • 詳細:

    ロード状態を表示します。

  • 例: Show/Hide Loading

showRow

  • パラメータ: params

  • 詳細:

    指定された行を表示します。params には少なくとも次の属性のいずれかが含まれている必要があります:

    • index:行インデックス。
    • uniqueId:その行の uniqueId 値。
  • 例: Show/Hide Row

sortBy

  • パラメータ: params

  • 詳細:

    指定されたフィールドで並べ替えます。params には少なくとも次の属性のいずれかが含まれている必要があります:

    • field:フィールド名。
    • sortOrder:並べ替え順序、'asc' または 'desc' のみ。
  • 例: Sort By

sortReset

  • パラメータ: undefined

  • 詳細:

    テーブルの並べ替え状態をリセットし、すべての現在の並べ替え条件をクリアします。ユーザーがテーブルヘッダーをクリックしてトリガーした並べ替えであっても、プログラムから sortBy メソッドを呼び出して設定した並べ替えであっても、すべて初期状態にリセットされます。

  • 例: Sort reset

toggleDetailView

  • パラメータ: index

  • 詳細:

    詳細ビュー(detail view)機能が有効になっている場合、index が指定された行の詳細ビューを切り替えます。

  • 例: Toggle Detail View

toggleFullscreen

  • パラメータ: undefined

  • 詳細:

    フルスクリーン表示を切り替えます。

  • 例: Toggle Fullscreen

togglePagination

  • パラメータ: undefined

  • 詳細:

    ページネーションオプションを切り替えます。

  • 例: Toggle Pagination

toggleView

  • パラメータ: undefined

  • 詳細:

    カードビューとテーブルビューを切り替えます。

  • 例: Toggle View

uncheck

  • パラメータ: index

  • 詳細:

    指定されたインデックスの行の選択を解除します。行インデックスは 0 から始まります。

  • 例: Check/Uncheck

uncheckAll

  • パラメータ: undefined

  • 詳細:

    現在のページのすべての行の選択を解除します。

  • 例: Check/Uncheck All

uncheckBy

  • パラメータ: params

  • 詳細:

    指定されたフィールドの値の配列に基づいて、一致する行の選択を解除します。params には以下の属性が含まれます:

    • field:レコードを検索および照合するためのフィールド名。
    • values:選択を解除する行のフィールド値の配列。
    • onlyCurrentPage(デフォルト値:false):true の場合、現在のページに表示されているデータのみの選択を解除します。ページネーションが有効な場合は、他のページのデータは無視されます。
  • 例: Check/Uncheck By

updateByUniqueId

  • パラメータ: params

  • 詳細:

    指定された行を更新します。params には以下の属性が含まれます:

    • id:行 ID、テーブル内の uniqueId フィールドの値である必要があります。
    • row:新しい行データ。
    • replace(オプション):true に設定すると、拡張ではなく行全体を置き換えます。
  • 例: Update By Unique Id

updateCell

  • パラメータ: params

  • 詳細:

    単一のセルを更新します。params には以下の属性が含まれます:

    • index:行インデックス。
    • field:フィールド名。
    • value:新しいフィールド値。

    テーブルの再初期化を無効にするには、{reinit: false} を設定できます。

  • 例: Update Cell

updateCellByUniqueId

  • パラメータ: params

  • 詳細:

    指定されたセルを更新します。params には以下の属性が含まれます:

    • id:行 ID、テーブル内の uniqueId フィールドの値である必要があります。
    • field:更新するフィールド名。
    • value:新しい値。

    テーブルの再初期化を無効にするには、{reinit: false} を設定できます。

  • 例: Update Cell By Unique Id

updateColumnTitle

  • パラメータ: params

  • 詳細:

    列のタイトルを更新します。params には以下の属性が含まれます:

    • field:フィールド名。
    • title:フィールドタイトル。
  • 例: Update Column Title

updateFormatText

  • パラメータ: formatName, text

  • 詳細:

    ローカライゼーションフォーマットテキストを更新します。

  • 例: Update Format Text

updateRow

  • パラメータ: params

  • 詳細:

    指定された行を更新します。params には以下の属性が含まれます:

    • index:更新する行のインデックス。
    • row:新しい行データ。
    • replace(オプション):true に設定すると、拡張ではなく行全体を置き換えます。
  • 例: Update Row