Bootstrap Table API 中国語版（翻訳ドキュメント）

ネットで中国語版があるのを見ましたが、直訳だったり、未訳だったりするので、自分で翻訳し直す​​予定です、頑張りますそれぞれを組み合わせる 可能な限り多くの情報を翻訳する 翻訳内容が英語以上であることがわかった場合は、より詳細な説明を追加する テーブルの名前、属性、型、デフォルト値は翻訳されません例: 「class」、「id」などは翻訳されません。間違いがあればご報告ください。すぐに修正されますので、よろしくお願いします。

推奨チュートリアル: bootstrap チュートリアル

##1.「名前」は $('# で記述できますtable').bootstrapTable({}); では、

$("#realTime_Table").bootstrapTable({
		       search: true,
	            pagination: false,
	            pageSize: 15,
	            pageList: [5, 10, 15, 20],
	            showColumns: true,
	            showRefresh: false,
	            showToggle: true,
	            locale: "zh-CN",
	            striped: true
        });

2 などの必要な値を定義できます。「属性」は、宣言テーブルに次のように配置されます。

<!--例子应该很好看懂Table options和Column options 所放的位置不同，随便写的，主要为了懂得如何用--!>

 <table id="realTime_Table" data-click-to-select="true" class="table table-bordered" data-page-size="20">
      <thead>
          <tr >
              <th data-sortable="true" data-field="realTimeDate">日期</th>
              <th data-sortable="true" data-field="newPlayerNum">新增用户</th>
              <th data-sortable="true" data-field="activePlayerNum">活跃用户</th>
          </tr>
      </thead>
      <tbody>
      </tbody>
</table>

#3. 名前と属性の機能が似ていればどこでも大丈夫です。定義を繰り返す必要はありません。一部の属性は、js で記述されています。テーブルはより単純、またはその逆です (一部の属性を記述する必要があり、対応する名前はその属性を有効にするかどうかを示すだけです)

---

table (テーブル オプション)

jQuery.fn.bootstrapTable.defaults ファイルで定義されています

#名前属性タイプデフォルト値関数の説明-data-toggleStringtable jquery、bootstrap、bootstrap-table パッケージを導入するだけで、何もする必要はありません。それらをjsに追加します。内部で定義されている場合は、#heightdata-heightNumber未定義テーブルの高さ unknownTextdata-undependent-textString-コンテンツが書き込まれない場合、デフォルトの表示は '-'tripeddata-stripedBooleanfalseデフォルトは false です。true に設定すると、背景がテーブルの各行はグレーと白で表示されます。 #sortNamedata-sort-nameStringunknown どの列の値をソートするかを定義します。データ フィールドのカスタム名を書き込みます。定義されていない場合、デフォルトでソートされません。以下と同じです。sortOrder と組み合わせて使用​​します。そうでない場合は、書き込むと、列はデフォルトで増分されます (asc) sortOrderdata-sort-orderStringasc 上記と組み合わせて使用​​すると、デフォルトは増加 (asc) ですが、減少 (desc) に設定することもできます。 sortStable data-sort -stableBooleanfalse (読み間違えないでください。sortStable です。sortable は以下にあります) true に設定されている場合、デフォルトは false です。ソート部分と同じですが、異なる点は次のとおりです。ソート処理中、等しい要素がある場合、元の順序は変わりません。元のテキストには別の文があります: (この属性を true に設定した場合) この行に '_position' 属性を追加しますiconsPrefixdata- icons-prefixStringglyphiconフォント ライブラリ (FontAwesome の場合は「Glyphicon」または「fa」) を定義します。「fa」を使用する場合は、FontAwesome を参照する必要がありますicon 属性と連携して効果を実現します。 Glyphicon は Bootstrap に統合されており、無料で使用できます iconSizedata-icon-sizeStringunknown定義されたアイコン サイズ: ##オブジェクト paginationSwitchUp: 'glyphicon-collapse-up icon-chevron-up', - 説明する方法はありません。初心者向けチュートリアルのアイコンを参照してください: ##columns-Array[]デフォルトの空の配列は JS で定義され、field はデータフィールド、title は各列のヘッダー名などです。 Bootstrap-table の使用方法を確認する-## を参照してください。 #[ ]ロードされたデータ。 data-data-fieldStringrows - 名前には、定義された各列のフィールド名を記述します。自分自身、つまりキーによって、Key を介して行の列に値を割り当てることができます。 - 例: {"name":"zz","age":20}、要求された場合、名前と年齢がキーになります。サーバー JSON から取得したものであり、各列で定義されているフィールドとは異なる場合がありますが、すべて一意ですdata-ajax Functionunknown - jQuery の ajax メソッドに似た ajax メソッド##searchdata-searchBooleanfalse デフォルトの false では、テーブルの右上隅に検索ボックスを表示します。true に設定できます。検索ボックスに内容を入力する限り、検索が開始されます。searchOnEnterKeydata-search-on-enter-keyBooleanfalseデフォルトの false は有効になっていません。有効にするには true に設定します。関数上記と比較するには、検索ボックスに内容を入力して Enter キーを押して検索を開始します#strictSearchsearchText - 検索ボックスに最初に表示されるコンテンツ、デフォルトの空の文字列 searchTimeOut・検索ファイルのタイムアウトを設定する（原文：Set timeout for search fire、書き方が間違っているのか、知識が狭すぎるのかわかりません。「search fire」とはどういう意味ですか？公式APIが間違っているのでしょうか？）ご苦労様です)## であるかを示します。 #data-unique-idString未定義は、各行が一意であることを示します。 cardView## の識別子detailView #paginationNextTextdata-pagination-next-textString›上記項目を参照 #clickToSelect#singleSelectdata-single-selectBoolean#falseデフォルトは false ですが、チェック ボックスで 1 行のみ選択できるようにするには true に設定します

---

列オプション

jQuery.fn で定義されます。 bootstrapTable.columnDefaults ファイル

#

				を使用できます。デフォルトでは、data-toggle="table" と書かれています。data-toggle については知っておくべきです。一般的に使用されるものには、「ツールチップ、ポップオーバーなど」が含まれますが、ここでは説明しません。
classes	data-classes	String	table table-hover	テーブルのクラス属性（自分で定義していない場合）にはデフォルトで枠線があり、マウスをホバーすると、その行の背景が明るい灰色に変わります。
sortClass	data-sort-class	String	unknown	テーブル td のクラス名を宣言します。これは、ソートされるこの列内の要素のクラス名を表します
				- 未定義 =>デフォルトはデフォルトのボタン サイズを示します (btn) - xs =>極小ボタンのサイズ (btn-xs) - sm =>小さいボタン サイズ (btn-sm) - lg =>大きなボタン サイズ (btn-lg)
buttonsClass	data-buttons-class	String	default	ボタンのクラス。デフォルトはdefaultです。 - オプションは、primary、danger、warning などです。 - 書き込み後、btn-primary (青)、btn-danger (赤)、btn-warning (黄) などの形式に自動的に変換されます。したがって、前に「btn-」を追加しないでください。デフォルトは btn-default (白) です。 - 初心者向けチュートリアルを参照してください: Bootstrap button
アイコン	データアイコン	##{ paginationSwitchDown: 'glyphicon-collapse-down icon-chevron-down',	更新: 'glyphicon-refresh icon-refresh', トグル: 'glyphicon-list-alt アイコン-リスト-alt', 列: 'glyphicon-th icon-th', 詳細開く: 'glyphicon-plus アイコン-プラス', DetailClose: 'glyphicon-minus icon-minus' } ツールバー、ページング、および詳細ビューで使用されるアイコンを定義します	Bootstrap font icon
			-	#data
Array		- つまり、サーバーから取得されるデータは、「data.date/data.anything」などの「.」演算子を介して取得され、その後にサーバーによって送信されたフィールド名が続きます		dataField
		- 元のテキスト: データ json の各行のキーを取得します。		ajax
method	data-method	String	get	向服务器请求远程数据的方式，默认为'get'，可选'post'
url	data-url	String	undefined	向服务器请求的url。       - 例如：server + "get_app_player"和server + 'get_channel_list'，两者都是向server（server是自己定义的，例如"http://kanshakan.nichousha.com/"）请求数据，只是接口不同，一个是请求该游戏玩家信息，一个是请求渠道信息 下面看看原文：       - 向远程站点请求数据的URL       - 请记住，如果服务端分页选项使用了自定义的，那么请求的服务器响应格式是不同的，参考下面两个数据格式：       Without server-side pagination（没有启用服务端分页 - data1.json）       With server-side pagination（启用服务端分页 - data2.json）
cache	data-cache	Boolean	true	默认缓存ajax请求，设为false则禁用缓存
contentType	data-content-type	String	application/json	请求数据的contentType（内容类型），用于定义文件的类型，决定接收方以什么形式读取这个文件。       - 默认application/json，用来告诉接收端从服务器发来的消息是序列化后的json字符串
dataType	data-data-type	String	json	期望从服务器获取的数据的类型，默认为json格式字符串
ajaxOptions	data-ajax-options	Object	{}	向服务器请求ajax时的附加项，默认无附加       - 参考 jQuery.ajax()
queryParams	data-query-params	Function	function(params){ return params;}	当请求数据时，你可以通过修改queryParams向服务器发送其余的参数。       - queryParamsType="limit"，它的参数包括：limit，offset，search，sort，order Else       - params包括：pageSize，pageNumber，searchText，sortName，sortOrder       - 当return false，请求则终止
queryParamsType	data-query-params-type	String	limit	默认"limit"，设置该属性用来发送符合RESTful格式的参数
responseHandler	data-response-handler	Function	function(res){ return res;}	在加载服务器发送来的数据之前，处理数据的格式，参数res表示the response data（获取的数据）
pagination	data-pagination	Boolean	false	默认为false，表格的底部工具栏不会显示分页条（pagination toolbar），可以设为true来显示
paginationLoop	data-pagination-loop	Boolean	true	默认true，分页条无限循环
onlyInfoPagination	data-only-info-pagination	Boolean	false	前提：pagination设为true，启用了分页功能。       - 默认false，设为true显示总记录数
sidePagination	data-side-pagination	String	client	设置在哪进行分页，默认"client"，可选"server"，如果设置 "server"，则必须设置url或者重写ajax方法       - 请记住，如果服务端分页选项使用了自定义的，那么请求的服务器响应格式是不同的，参考下面两个数据格式：       Without server-side pagination（没有启用服务端分页）       With server-side pagination（启用服务端分页）
pageNumber	data-page-number	Number	1	前提：pagination设为true，启用了分页功能。       - 默认第1页，用于设置初始的页数
pageSize	data-page-size	Number	10	前提：pagination设为true，启用了分页功能。 - デフォルトでは、ページごとに 10 レコードが表示されます。これは、各ページに表示されるレコードの初期数を設定するために使用されます
pageList	data-page-list	配列	[10, 25, 50, 100]	前提条件: ページネーションが true に設定され、ページング機能が有効になっています。 - デフォルトは [10、25、50、100] です。つまり、「ページごとに 10/25/50/100 レコードを表示」を選択して、ページごとに表示されるレコード数を設定できます
selectItemName	data-select-item-name	String	btSelectItem	radio (ラジオ ボタン) または checkbox (複雑)選択ボックスのフィールド名
smartDisplay	data-smart-display	Boolean	true	デフォルトは true で、巧みに (<_>状況に応じてページネーションまたはカード ビューを表示します
escape	data- scape	Boolean	false	HTML に挿入された文字列をスキップし、特殊文字 (次の記号にはカンマは含まれません) を置き換えます: &、、" ,`,'
data-strict-search	Boolean	false	正確な検索を有効にするには true に設定します
data-search-text	String	""	前提条件: search が true に設定されており、検索機能が有効になっています。
data-search-time-out	Number	500	前提条件: 検索が設定されているtrue に設定すると、検索機能が有効になります。
trimOnSearch	data-trim-on-search	Boolean	true	デフォルトは true、スペースは自動的に無視されます
showHeader	data-show-header	Boolean	true	デフォルトはヘッダーを表示する場合は true、非表示にする場合は false に設定します。
showFooter	data-show-footer	Boolean	false	デフォルトは表のフッターを非表示にする場合は false、表示する場合は true に設定します
showColumns	data-show-columns	ブール値	false	列ドロップダウン メニューを非表示にする場合はデフォルトが false、表示する場合は true に設定します
showRefresh	data-show-refresh	Boolean	false	更新ボタンを非表示にする場合はデフォルトは false、表示する場合は true に設定します
showToggle	data-show-toggle	Boolean	false	ビュー切り替えボタンを非表示にするデフォルトは false です。 、表示するには true に設定します
showPaginationSwitch	data-show-pagination-switch	Boolean	false	デフォルトはページごとのデータ項目数の選択を非表示にする場合は false、表示する場合は true に設定します
minimumCountColumns	data-minimum-count-columns	数値	1	各列のドロップダウン メニューは最小の数値
idField	data-id-field	String	unknown	は、どのフィールドが識別フィールド
uniqueId
#data-card-view	Boolean	false	デフォルトは false、カード ビューを表示するには true に設定します
data-card-view	Boolean	false	デフォルトは false、詳細ビューを表示するには true に設定します
detailFormatter	data-detail-formatter	Function	function(index, row, element){ return '';}	前提条件:detailView が true に設定されており、詳細ビューの表示が有効になっています。 - 詳細ビューの書式設定に使用されます - 3 番目のパラメーター要素を通じて詳細ビューのセル (特定のグリッド) に直接追加される文字列を返します。要素はターゲット セルの jQuery 要素です。
searchAlign	data-search-align	String	right	検索ボックスの位置、デフォルトは右 (右端)、オプションで左
buttonsAlign	data-buttons-align	String	right	ツールバー ボタンの位置、デフォルトは右 (右端)、オプションの left
toolbarAlign	data-toolbar-align	String	left	Customizedツールバーの位置、デフォルトは右 (右端)、オプションで左
#paginationVAlign	data-pagination-v-align	String	bottom	ページング バーの垂直位置。デフォルトは下 (下部)、オプションで上、両方 (上部と下部の両方にページング バーがあります)
# # paginationHAlign	data-pagination-h-align	String	right	ページング バーの水平位置、デフォルトは右 (右端)、オプションleft
paginationDetailHAlign	data-pagination-detail-h-align	String	left	if説明が長すぎます。例えば、paginationDetail は「1 件目から 8 件目までの合計 15 件を表示し、1 ページに 8 件のレコードを表示する」です。デフォルトは left (一番左)、オプションで right
paginationPreText	data-pagination-pre-text	String	‹	引き続き例を示します。コンテンツが多い場合は、下部の右端に「‹ 1 2 3 4 5 ›」と表示され、ページ数を選択します。デフォルトは、以下と同じ一番左の記号です。
data-click -to-select	Boolean	false	デフォルトの false は応答しません。true に設定すると、この行のどこかをクリックすると、この行のチェックボックス (チェックボックス) またはラジオボックス (ラジオボタン) が自動的に選択されます。
toolbar	data-toolbar	String | Node	未定義	jQuery セレクター (例: #toolbar、.toolbar 、または DOM ノード
checkboxHeader	data-checkbox-header	Boolean	true	がある場合宣言チェック ボックスをオンにすると、ヘッダー行の [すべて選択] チェック ボックスがデフォルトで表示されます。これを非表示にするには false に設定します (つまり、テーブルの 1 行目は表示されず、2 行目以降はすべて表示されます)。
maintainSelected	data-maintain-selected	Boolean	false	true に設定選択した行のステータスを維持するには
sortable	data-sortable	Boolean	true	デフォルトは true、すべての行の配置を無効にするには false に設定します (つまり、並べ替えボタンが各列のヘッダーに表示されません。これは data-sortable="true" で宣言する必要があり、js で記述されますが、有効にされるだけです)かどうか)
slientSort	data-silent-sort	Boolean	true	前提条件: SidePaginationサーバー (サーバー) に設定されます - デフォルトは true、に設定されます false の場合、データはサイレントに並べ替えられます
rowStyle	data-row-style	Function	{}	行の形式を変更するには、次の 2 つのパラメータが必要です。 - row: この行のデータ -index: この行のインデックス クラスと CSS をサポートしており、使用方法は次のとおりです。 function rowStyle(行, インデックス){ return { クラス: 'text-nowrap another-class', css: {"color": "blue", "font-size": "50px"} }; }
rowAttributes	data-row-attributes	Function	{}	必要な属性を変更します2 つのパラメータ: - 行: この行のデータ - インデックス: この行のインデックス すべてのカスタム属性をサポートします。
customSearch	data-custom-search	Function	$.noop	カスタム検索関数 (組み込みの検索関数を置き換えるために使用されます)、1 つのパラメーターが必要です: - text: 検索するコンテンツ 使用法は次のとおりです: function CustomSearch(text){ //データをフィルターするには 'this.data' を使用する必要があります (データをフィルターします。この単語は翻訳する必要がないと思います)。'this.options.data' は使用しないでください。 }
customSort	data-custom-sort	Function	$.noop	カスタム ソート関数(組み込みのソート関数を置き換えるために使用されます)、2 つのパラメータが必要です (前のパラメータを参照できます): - sortName: ソートする必要がある列 - sortOrder: ソート方法 : 上記と同じ。心配しないでください。コメントはまったく同じです。
locale	data-locale	String	未定義	ローカリゼーション (動詞)。 ローカライズされたファイルは、フォールバックを可能にするために事前にロードする必要があります (簡単に言うと、使用するファイルが利用できない場合は、ピッチ上の代替選手など、他のもので置き換えることができます。代替選手がいない場合、誰かがいる場合)負傷した場合、ゲームは停止しません (非推奨)、ロードされる場合、次の順序になります: - まず、指定された「ローカリゼーション」ファイルのロードを試みます - その後、「_」 (アンダースコア) が書き込まれますコードは大文字で表されます - 次に短いロケール コード (例: 「fr-CA」の代わりに「fr」) - 最後に残りのローカリゼーション ファイルが使用されます (ロードするファイルがない場合はデフォルトが使用されます) 残りの未定義または空の文字が使用される場合は、最後に使用されたファイルが使用されます (ローカリゼーション ファイルをロードできない場合は、組み込みの「en_US」が使用されます) used)
footerStyle	data-footer-style	Function	{}	フッターの変更形式には 2 つのパラメータが必要です。 - row: この行のデータ -index: この行のインデックス クラスと CSS をサポートしており、使用法は次のとおりです: function rowStyle(value, row,index){# ＃＃ 戻る { css: { "フォントの太さ": "太字" } }; }

#名前属性タイプデフォルト値関数の説明radiodata-radioBooleanfalseデフォルトの false では、ラジオ (ラジオ ボタン) が表示されません。 true に設定 表示、無線幅は固定ですcheckboxdata-checkboxBoolean#falseデフォルトの false はチェックボックス (チェックボックス) を表示しません。表示するには true に設定します。チェックボックスの各列の幅は固定されていますfield data-fieldString未定義 は各列のフィールド名であり、テーブル ヘッダーに表示される名前ではありません。このフィールドを使用して値を割り当てることができます。 name はキーに相当し、テーブル内で一意ですtitledata-titleString未定義これはヘッダーに表示される名前であり、一意ではありません。必要に応じて、すべてのヘッダーを同じ名前に設定できますtitleTooltipdata-title-tooltipStringunknownコントロールの上にマウスを置くと、プロンプトが表示されます#widthdata-width数値 (単位: px または %)未定義 各列の幅。 を割り当てることができます。 footerFormatterdata-footer-formatterFunction未定義この列を必要とするオブジェクト。 sorterdata-sorterFunction未定義カスタム並べ替え関数でローカル並べ替えを実装するには、次の 2 つのパラメーターが必要です: sortNamedata-sort-nameStringundependentヘッダーを除く デフォルトの並べ替え名または列のフィールド名を指定することもできます。カスタマイズされたsort-name ## cellStyledata-cell-styleFunctionunknown特定のセルでディスプレイスタイル（スタイル）を変更するには、3つの機能が必要です。＃##＃ クラスと CSS をサポートしており、使用法は次のとおりです。 truetruefalse

- Bootstrap Tooltip プラグインを参照してください

class

class/data-class

String

unknown

何も言うことはありません。ただクラス

rowspan

rowspan/data-rowspan

Number

unknown

各セルが占める行数

colspan

colspan/data-colspan

Number

unnamed

各セルが占める列の数

align

data-align

String

unnamed

各セル内のデータの配置には、左 (左)、右 (右)、中央 (中央) が含まれます。

halign

data-halign

String

未定義

テーブル ヘッダー (テーブル ヘッダー) の配置には次が含まれます: left (左)、right (右)、center (中央)

falign

data-falign

String

未定義

テーブル フッター（ テーブル フッター、次のように翻訳するだけですこれは意図的に、実際には何気なく翻訳できます。知っておいてください) 整列方法は次のとおりです: left (左)、right (右)、center (中央)

valign

data-valign

String

unnamed

データの各グリッドの配置には次が含まれます: 上 (上)、中央 (中央) )、下 (下)

- カスタム幅がない場合、幅はコンテンツの幅に応じて調整されます。
- テーブルが応答性のままであるか、設定された幅がコンテンツの幅より小さい場合でも、幅は適応されます (min-width または max-width はクラスまたは他の属性で使用できます)。
- 単位として「%」を使用することもできます。この場合、bootstapTable はパーセンテージで除算されます。「ピクセル (ピクセル値)」を使用したい場合は、数値を記述するだけで済みます (特に指定しない限り)。 "%" を追加します。単位はデフォルトで "px" になります。気にしない場合、またはより明確にしたい場合は、"px" を追加することもできます)

sortable

data-sortable

Boolean

false

デフォルトは false で、デフォルトで表示されます。true に設定すると、次のようになります。 sorted

order

data-order

String

asc

デフォルトの並べ替え方法は「asc」です「(昇順)」を選択しますが、「desc(降順)」も設定できます。
- 上記と組み合わせて使用​​すると、ソートされません。昇降について他にどう思いますか。

visible

data-visible

Boolean

true

この列を表示する場合、デフォルトは true です。 , set false の場合、列は非表示になります。
- これは依然として非常に便利です。たとえば、特定の属性で並べ替えると混乱してしまうカスタム インデックス列を非表示にし、特定の行のインデックスを読み取って値

cardVisible

data-card-visible

Boolean

true

デフォルトは true で、この列を表示し、設定します。非表示にするには false に設定します。

switchable

data-switchable

Boolean

true

この列を表示する場合、デフォルトは true です。 、False に設定すると、列項目のタブが無効になります。

clickToSelect

data-click-to-select

Boolean

true

デフォルトの true では、応答 、 false に設定すると、この行のどこかをクリックすると、この行のチェックボックス (チェックボックス) またはラジオボックス (ラジオ ボタン) は自動的に選択されません

formatter

data-formatter

Function

未定義

この列を必要とするオブジェクト。
あるグリッドのデータ変換関数には 3 つのパラメータが必要です。
-value: field (フィールド名) -row: 行データ
-index: row (インデックス) インデックス

特定のグリッドのデータ変換関数にはパラメータが 1 つ必要です:
-data: すべての行データの配列
この関数は、フッターの特定のセルに表示される文字列の形式を返す必要があり、コンテンツ

events

data- も含める必要があります。 events

オブジェクト

未定義

特定のグリッドがフォーマッタ関数を使用すると、イベント リスナーが応答し、次の 4 つのパラメータが必要になります。
—event: jQuery イベント (参照)イベントへ）。
-値: フィールド名
-行: 行データ
- インデックス: この行の行、例:
& lt; th .. data -events = "operateEvent" & gt; var operateEvents = {'click .like': function (e, value, row,index) {}};

フィールド名

を使用しますが、使用する列のフィールド名。 HTML コード内のコンテンツは次のように配置されます: abc

function cellStyle(value, row,index, field) { 戻る { クラス: 'text-nowrap another-class', css: {"カラー": "ブルー", "フォントサイズ": "50px"} }; }

searchable

data-searchable

Boolean

デフォルトは true、この列がdata クエリ可能

searchFormatter

data-search-formatter

Boolean

デフォルトは true 、フォーマットされたデータクエリを使用できます

escape

data-escape

Boolean

Jump By HTML に文字列を挿入する場合は、特殊文字 (&、、"、`、'

) を置き換えます。

---

イベント

定义事件的格式：

$(’#table’).bootstrapTable({
onEventName: function (arg1, arg2, …) {
// …
} });

$(’#table’).on(‘event-name.bs.table’, function (e, arg1, arg2, …) {
// …
});

onUncheckuncheck.bs.tablerow, $elementこの行が選択されていない (チェックを外されている) 場合にトリガーされ、必要なパラメーターは次のとおりです: onCheckAllcheck-all.bs.table rowsすべての行が選択されるとトリガーされ、必要なパラメーターは次のとおりです: onUncheckAlluncheck-all.bs.table rowsすべての行が選択されていないときにトリガーされ、必要なパラメーターは次のとおりです:以前または以前に選択された行のフィールド名の配列# #dataすべてのデータがロードされるときにトリガーされますonLoadErrorload-error.bs.tablestatus, res データのロード中にエラーが発生したときにトリガーされますonColumnSwitchcolumn-switch.bs.tableフィールド、チェック済み 列の表示ステータスが変更されたときにトリガーされますonColumnSearchcolumn-search.bs.tablefield, text列がクエリされたときにトリガーされますonPageChangepage-change.bs.tablenumber, sizeこのページに表示されるデータ項目の数が変更されたとき、またはページ番号が変更されたときにトリガーされますonSearchsearch.bs.table textこのテーブルをクエリするときにトリガーされますonToggletoggle.bs.tablecardView 起動されますテーブルのビューが変更されたときonPreBodypre-body.bs.tabledataWhen のコンテンツが表示される前にトリガーしますonPostBodypost-body.bs.tabledata のコンテンツがロードされるか、使用している DOM で定義されるとトリガーされますonPostHeader post -header.bs.tablenone のコンテンツが読み込まれるか、使用している DOM に定義されるとトリガーされますonExpandRowexpand-row.bs.tableindex, row, $detail詳細ビューを表示する場合 (クリックして詳細アイコンを表示)onCollapseRowcollapse-row.bs.tableindex、row は、詳細が閉じられたときにトリガーされます。 ビューのときにトリガーされます (アイコンをクリックして詳細を再度表示します) onRefreshOptionsrefresh-options.bs.tableoptions 更新後にトリガーされます項目、またはテーブルの初期化前 (破棄と再初期化を含む)#onResetViewreset-view.bs.table onrefresh

---

メソッド

#メソッド応答の構文を定義する $('#table').bootstrapTable(' メソッド', パラメータ);

事件名	定义在jQuery中的事件名	参数	作用描述
onAll	all.bs.table	name, args	当所有触发器被触发时都执行此函数，就是所有的事件都会触发该事件，参数包括：                - name：事件名          - args：事件的数据
onClickRow	click-row.bs.table	row, $element, field	当单击此行的任意一处，就会触发该事件，所需参数如下（只是按原文译过来的，在bootstraptable的js中不需要这些参数，因为单击该行就会获得一个row，row中包括此行所有数据，只要通过此行某列的字段名即可取出）：                - row：哪一行（从0开始）            - $element：该行（tr）              - field：当点击该行，你想获取此行哪一格的数据，field就是此列字段名
onDblClickRow	dbl-click-row.bs.table	row, $element, field	和上面差不多，当双击（666）此行的任意一处，就会触发该事件，所需参数如下（只是按原文译过来的，在bootstraptable的js中不需要这些参数，因为双击该行就会获得一个row，row中包括此行所有数据，只要通过此行某列的字段名即可取出）：                - row：哪一行（从0开始）            - $element：该行（tr）              - field：当点击该行，你想获取此行哪一格的数据，field就是此列字段名
onClickCell	click-cell.bs.table	field, value, row, $element	当单击某一格，就会触发该事件，所需参数如下：                - field：此格所在列的字段名            - value：此格的数据              - $element：此行的此列，就是此格（td）
onDblClickCell	dbl-click-cell.bs.table	field, value, row, $element	当双击某一格，就会触发该事件，所需参数如下：                - field：此格所在列的字段名            - value：此格的数据              - $element：此行的此列，就是此格（td）
onSort	sort.bs.table	name, order	当对某列进行排序时触发该事件，所需参数如下：                - name：所排序的列的字段名   - order: 選択時の順序
onCheck	check.bs.table	row、$element	(トリガーされるタイミング) check) この行の場合、必要なパラメータは次のとおりです: - row: 選択した行のフィールド名 - $element: この行の DOM 要素
			- row : フィールド選択解除された行の名前 - $element: この行の DOM 要素
			onCheckSome
#特定の行（複数行、行）が選択されたときにトリガーされます（チェック）、必要なパラメーターは次のとおりです。	uncheck-some.bs.table	rows	一部の行のチェックを外す場合 (複数の行、行の場合にトリガーされます)、必要なパラメーターは次のとおりです: - rows: 前に選択した行のフィールド名の配列
onLoadSuccess	‐ ‐ ‐ ‐ Load-success.bs.table
		##テーブルのビューがリセットされるときに発生します
REFRESH.TABLE	Params	リフレッシュボタンをクリックすると（ブラウザではなく、テーブル 更新ボタンの後にトリガーされます)

#メソッド名パラメータ説明例getOptionsnone各項目のオブジェクトを返します$table.bootstrapTable('getOptions');getSelectionsnone選択された行を返します。行が選択されていない場合は、空の配列が返されます (ただし、これは未定義または null ではなく、長さ。0 の空の配列なので、行が選択されているかどうかを判断するために長さが 0 より大きいかどうかを判断できます) $table.bootstrapTable('getSelections');getAllSelectionsnone選択されたすべての行を返します (元のテキストでは、検索またはフィルターが含まれています)実際には選択したフィルタリングされたデータです)、行が選択されていない場合は、空の配列が返されます $table.bootstrapTable('getAllSelections');showAllColumnsnoneすべての列を表示$table.bootstrapTable('showAllColumns');hideAllColumnsnoneすべての列を非表示$table.bootstrapTable('hideAllColumns') ;getDatauseCurrentPageuse を設定した場合、ロードされたテーブルのデータを取得します。現在のページ データ (useCurrentPage) を取得し、現在のページのデータを返します$table.bootstrapTable('getData');getRowByUniqueIdid必要な行のデータを取得します (行の ID を設定します) $table.bootstrapTable( 'getRowByUniqueId', 1) ;次の 1 は必要な行の IDload#$table.bootstrapTable('load', data);#removeByUniqueId-データの特定の行を削除します (特定の行の ID を設定します)$table.bootstrapTable('removeByUniqueId', 1);次の 1 は削除する行の ID ですinsertRowparams新しい行を追加します。必要なパラメータは次のとおりです。以下:$table.bootstrapTable(' insertRow', {index: 1, row: row}); #updateRow## を参照してください。 - インデックス: 更新する行のインデックス - 確認してください: updateByUniqueId - id: 何をするか更新しますか? 行の ID (一意)、(変更したい方を変更してください) - ##showRow## を参照してください。 #params - id: 表示される行のインデックス params特定の行を非表示にします。必須パラメータには、次の少なくとも 1 つが含まれます: - uniqueId: その行の ID ##$table.bootstrapTable('hideRow', {index:1}); getRowsHiddenboolean非表示の行を取得します (正式な用語はたくさんありますが、実際には前の文が要約です) $table.bootstrapTable( 'getRowsHidden');##mergeCells## $ $ table.bootstraptable（ 'mergecells'、{index：1、field： 'name'、colspan：2、rowspan：3}）; データの特定のセルを更新します。必要なパラメータは次のとおりです: - インデックス: 結合するセルが存在する行のインデックス (index) - フィールド: 列のフィールド名 {reinit を設定することもできます:false} テーブルの再初期化を無効にする $table.bootstrapTable('updateCell',{index:index,field:'id',value:value}); - {silent:true} を 秘密裏に (<_> 更新pageSize:pageSize} を設定して、要求されたアドレス、ページ番号、各ページに表示されるアイテムの数を変更します#$table.bootstrapTable('refresh');resetSearch##showLoading を参照してください。なし 読み込み中の表示... - チェックしてください: hideLoadingなし 読み込みを非表示... - チェックしてください: checkAllなし 現在のページのすべての行を選択します$table.bootstrapTable('checkAll');##checkInvertnone逆選択、理解するのは難しくありません $ table.bootstrapTable('checkInvert');index# から始まります # #$table.bootstrapTable('check', 1);#destroynoneフォーム A を破壊してください!て！て！ああ！ Ｃ！き！ $table.bootstrapTable('destroy');showColumnfield 特定の列を表示 - チェックしてください: #hideColumnfield特定の列を非表示にする$table.bootstrapTable('hideColumn', 'name');showColumn/hideCoulumngetHiddenColumns-すべての非表示列を取得$ table.bootstrapTable( 'getHiddenColumns');getVisibleColumns-表示されているすべての列を取得$table.bootstrapTable ('getVisibleColumns') ;scrollTovalueスクロール...どの位置まで、単位は「px」です。「bottom」に設定されている場合、シューッという音です。おめでとうございます。テーブルの最後に到達しました。$table.bootstrapTable('scrollTo', 0);scrollTogetScrollPositionnone現在のスクロール位置を取得します。単位は 'px'$table.bootstrapTable('getScrollPosition'); filterBynone は、クライアント側 (サーバー側を基準としたクライアント側) でのみ使用でき、 table - 年齢 10 のデータのみを表示するように {age:10} を設定できます。- 1人だけでなく、ペア、または複数人で飛行することもできます。{年齢: 10、髪の色: ["青"、"赤"、"緑"]}を設定すると、10歳のグループになります。 -青、赤、緑の髪の色を持つ老人...data##selectPagepage特定のページにジャンプします$table.bootstrapTable('selectPage', 1);prevPagenone前のページにジャンプします$table.bootstrapTable('prevPage');nextPagenone次のページにジャンプ$table.bootstrapTable('nextPage');togglePaginationnone言葉が足りない場合は、例を参照してください。用紙 $table.bootstrapTable('togglePagination');toggleViewなし Change View$table.bootstrapTable('toggleView');# # ExpandRow - この列の詳細ビューを展開します。パラメータindexexpandRow-collapseRowcollapseRow - パラメータ Index を使用してこの列の詳細ビューを閉じます expandAllRows 新しいバージョン (当初は「expandAllRow」) に変更があり、以下と同じですThanks @zhq449681061使用可能な条件: 詳細ビューは true に設定されますcollapseAllRowsis subtable使用可能な条件: 詳細ビューが true に設定されている

---

本地化，切换为另一种语言(Localizations)

默认显示英文，如果想使用中文，首先引入：

<script src="bootstrap-table-zh-CN.js"></script>

然后是三种声明使用的方法（个人只使用第二、三种），如下：

第一种：

$.extend($.fn.bootstrapTable.defaults, $.fn.bootstrapTable.locales['zh-CN']);

第二种：

<table data-toggle="table" data-locale="zh-CN"></table>

第三种：

$('table').bootstrapTable({locale:'zh-CN'});

---

以下说明除了数字外均为中文默认显示，本来不用写的，只要引入就显示中文了

			- チェックしてください: getOptions
			- チェックしてください: getSelections
			- 参照してください: getAllSelections
			- ただすべての列を表示し、何も表示しない Sayable
			- すべての列を非表示にします。
			- チェックしてください: getData
			です - 確認してください: getRowByUniqueId
# #data	データをテーブルにロードします。元のデータは削除されます	- 参照してください: load
append	data	最後の行の後にデータを追加	$ table.bootstrapTable('append', data);data は配列にすることができます - 確認してください: append
prepend	data	最初の行の直前にも追加されます	$table.bootstrapTable('prepend', data);data は配列にすることもできます - 確認してください: prepend
remove	params	選択した 1 行以上のデータを削除します	$table.bootstrapTable(' Remove', {field: 'id', value: ids}); - id: 削除する必要がある行のフィールド (行、1 つ以上の行) - 値: 削除する行削除された の配列 - ご覧ください: remove
removeAll	-	テーブル内のすべてのデータを削除	$table.bootstrapTable('removeAll'); - 以下を参照してください: removeAll
			- 確認してください: removeByUniqueId
		- インデックス: どこに挿入しますか (その気になれば、どこにでも挿入できます。誰でも挿入できます) - 行: 挿入するデータ	- insertRow
#params	行データを更新します。必要なパラメータは次のとおりです:	- 行: 変更する新しいデータ $table .bootstrapTable('updateRow', {index: 1, row: row});	updateRow
params	データ行を更新します。必要なパラメータは次のとおりです:	- 行: 変更する新しいデータ $ table.bootstrapTable('updateByUniqueId', {id: 3, row: row});	updateByUniqueId
特定の行を表示します。必須パラメータには、次の少なくとも 1 つが含まれます。	- uniqueId: その行の ID	$table.bootstrapTable('showRow ', {index:1}); - ご覧ください: showRow/hideRow	##hideRow
- id: 非表示にする行のインデックス	- チェックしてください: showRow/hideRow
options	Merge~ (複数のセルを 1 つにマージ)、必要なパラメータは次のとおりです。フォロー：＃## can	-閲覧： mergeCells	updateCell params
- 値: 置換される新しいデータ		#refresh params	サーバー データを更新します:
- {url:newUrl,pageNumber:pageNumber,	- {query:{foo:'bar' を設定できます}} 特定のパラメータを増やすには	- refresh ##refreshOptions## を参照してください。 #options	例を見てみましょう - ご覧ください: refreshOptions
	# #text	検索テキスト (テキスト) をリセットします	- resetSearch
			showLoading/hideLoading
			showLoading/hideLoading
			- チェックしてください: checkAll/uncheckAll
uncheckAll	none	現在のページのすべての行の選択を解除します	$table.bootstrapTable('uncheckAll'); - お願いしますcheck: checkAll/uncheckAll
			check
行を選択します。インデックスは 0	- チェックしてください: チェック/チェック解除
チェックを外してください	index	行の選択を解除します。インデックスは 0 から始まります	$table.bootstrapTable('uncheck', 1); - チェックしてください: check/uncheck
checkBy	params	配列を介して行を選択します。必要なパラメーターは次のとおりです: - フィールド: 選択するフィールドの名前 - 値: 値 (配列)	公式ではありません、ああ、例があります: - $("#table").bootstrapTable("checkBy", { field:"field_name", value:["value1" ,"value2"," value3"]}); - チェックしてください: checkBy/uncheckBy
uncheckBy	params	配列を渡す 行を選択するには、必要なパラメータは次のとおりです: - フィールド: 選択を解除するフィールド名 - 値: 選択を解除する値 (配列)	$("#table") .bootstrapTable("uncheckBy", { field:"field_name", value:["value1","value2","value3"]}); - 確認してください: checkBy/uncheckBy
resetView	params	テーブルの高さの変更など、テーブルのスタイルを変更します	$table.bootstrapTable('resetView '); - チェックしてください: resetView
resetWidth	none	ヘッダーとフッター (フィートに変換され、任意) の幅を各列の幅に合わせて自動的に変更します	$table.bootstrapTable('resetWidth');
			- ご覧ください: destroy
		##$table.bootstrapTable('showColumn', 'name');	showColumn/hideCoulumn
		- 以下を確認してください。
		- チェックしてください:
	例:	$table.bootstrapTable('filterBy', { ID: [1、2、3] }); - チェックしてください: filterBy
			- ご覧ください: selectPage/prevPage/nextPage
			- チェックしてください: selectPage/prevPage/nextPage
			- お願いしますcheck: selectPage/prevPage/nextPage
			- ご覧ください: togglePagination
			- ご覧ください: toggleView
index	使用可能な条件: 詳細ビューが true に設定されている場合、ビュー関数は使用できず、役に立ちません。	- チェックしてください:
index	利用可能な条件:詳細ビューの設定 true にするためには	# - 次を参照してください: expandRow-collapseRow
is subtable	- すべての列を展開します詳細ビュー	$table.bootstrapTable('expandAllRows'); - 上記の例を参照してください。上記は展開 (折りたたみ) のビューです。特定の行、これはすべての行のビューです
	- すべての列の詳細ビューを閉じる	$table.bootstrapTable ('collapseAllRows'); - 上記を参照してください

名称	参数	默认	说明
formatLoadingMessage	-	'Loading, please wait…'	“加载中，请等待……”
formatRecordsPerPage	pageNumber	'%s records per page'	“每页显示 15  条记录”
formatShowingRows	pageFrom, pageTo, totalRows	'Showing %s to %s of %s rows'	“显示第 1 到第 15 条记录”
formatDetailPagination	totalRows	'Showing %s rows'	“总共 15 条记录”
formatSearch	-	'Search'	“搜索”（占位符）
formatNoMatches	-	'No matching records found'	“没有找到匹配的记录”
formatRefresh	-	'Refresh'	“刷新”（鼠标悬浮显示的文字，下同）
formatToggle	-	'Toggle'	“切换”
formatColumns	-	'Columns'	“列”

　　有错请留言，看到后会及时更改，如果像那种翻译的行写成列或漏字等低级错误，看英文名称就知道有没有错了，主要就是为了让你们知道怎么用，会持续检查哪有误、漏译，如果认为有译得不妥的地方，也可以留言一起讨论，谢谢

以上がBootstrap Table API 中国語版（翻訳ドキュメント）の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。