ホームページ > 記事 > ウェブフロントエンド > Bootstrap Table API 中国語版（翻訳ドキュメント）

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

angryTomオリジナル: 2019-08-20 14:57:526487ブラウズ

ネットで中国語版があるのを見ましたが、直訳だったり、未訳だったりするので、自分で翻訳し直す予定です、頑張りますそれぞれを組み合わせる可能な限り多くの情報を翻訳する翻訳内容が英語以上であることがわかった場合は、より詳細な説明を追加するテーブルの名前、属性、型、デフォルト値は翻訳されません例: 「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 で、巧みに (0272905c25dcf317be5bd93a386d95c4、" ,`,'


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 に文字列を挿入する場合は、特殊文字 (&、f539a70d3ea090bac4faa80192f58ccc、"、`、'

) を置き換えます。

イベント

定义事件的格式：

$(’#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 6b35977774a608575941c4d39a65c997 のコンテンツが表示される前にトリガーしますonPostBodypost-body.bs.tabledata92cee25da80fac49f6fb6eec5fd2c22aca745a59da05f784b8811374296574e1 のコンテンツがロードされるか、使用している DOM で定義されるとトリガーされますonPostHeader post -header.bs.tablenoneae20bdd317918ca68efdc799512a9b397943277d65306330563feb42dc8c705a のコンテンツが読み込まれるか、使用している 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[&#39;zh-CN&#39;]);

第二种：

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

第三种：

$(&#39;table&#39;).bootstrapTable({locale:&#39;zh-CN&#39;});

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


			- チェックしてください: 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 サイトの他の関連記事を参照してください。

声明：

この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。

前の記事：BootStrapTable の動的テーブルに関する詳細なチュートリアル [コード付き]次の記事：BootStrapTable の動的テーブルに関する詳細なチュートリアル [コード付き]

続きを見る