ホームページ > ウェブフロントエンド > ブートストラップのチュートリアル > Bootstrap Table API 中国語版(翻訳ドキュメント)

Bootstrap Table API 中国語版(翻訳ドキュメント)

angryTom
リリース: 2020-05-15 09:18:27
オリジナル
6562 人が閲覧しました

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 については知っておくべきです。一般的に使用されるものには、「ツールチップ、ポップオーバーなど」が含まれますが、ここでは説明しません。
classesdata-classesStringtable table-hoverテーブルのクラス属性(自分で定義していない場合)にはデフォルトで枠線があり、マウスをホバーすると、その行の背景が明るい灰色に変わります。
sortClassdata-sort-classStringunknownテーブル td のクラス名を宣言します。これは、ソートされるこの列内の要素のクラス名を表します
- 未定義 =>デフォルトはデフォルトのボタン サイズを示します (btn)
- xs =>極小ボタンのサイズ (btn-xs)
- sm =>小さいボタン サイズ (btn-sm)
- lg =>大きなボタン サイズ (btn-lg)
buttonsClassdata-buttons-classString 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
methoddata-methodStringget向服务器请求远程数据的方式,默认为'get',可选'post'
urldata-urlStringundefined向服务器请求的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)
cachedata-cacheBooleantrue默认缓存ajax请求,设为false则禁用缓存
contentTypedata-content-typeStringapplication/json请求数据的contentType(内容类型),用于定义文件的类型,决定接收方以什么形式读取这个文件。
- 默认application/json,用来告诉接收端从服务器发来的消息是序列化后的json字符串
dataTypedata-data-typeStringjson期望从服务器获取的数据的类型,默认为json格式字符串
ajaxOptionsdata-ajax-optionsObject{}向服务器请求ajax时的附加项,默认无附加
- 参考 jQuery.ajax()
queryParamsdata-query-paramsFunction
function(params){
return params;}
ログイン後にコピー
当请求数据时,你可以通过修改queryParams向服务器发送其余的参数。
- queryParamsType="limit",它的参数包括:limit,offset,search,sort,order Else
- params包括:pageSize,pageNumber,searchText,sortName,sortOrder
- 当return false,请求则终止
queryParamsTypedata-query-params-typeStringlimit默认"limit",设置该属性用来发送符合RESTful格式的参数
responseHandlerdata-response-handlerFunction
function(res){
return res;}
ログイン後にコピー
在加载服务器发送来的数据之前,处理数据的格式,参数res表示the response data(获取的数据)
paginationdata-paginationBooleanfalse默认为false,表格的底部工具栏不会显示分页条(pagination toolbar),可以设为true来显示
paginationLoopdata-pagination-loopBooleantrue默认true,分页条无限循环
onlyInfoPaginationdata-only-info-paginationBooleanfalse前提:pagination设为true,启用了分页功能。
- 默认false,设为true显示总记录数
sidePaginationdata-side-paginationStringclient设置在哪进行分页,默认"client",可选"server",如果设置 "server",则必须设置url或者重写ajax方法
- 请记住,如果服务端分页选项使用了自定义的,那么请求的服务器响应格式是不同的,参考下面两个数据格式:
Without server-side pagination(没有启用服务端分页)
With server-side pagination(启用服务端分页)
pageNumberdata-page-numberNumber1前提:pagination设为true,启用了分页功能。
- 默认第1页,用于设置初始的页数
pageSizedata-page-sizeNumber10前提:pagination设为true,启用了分页功能。
- デフォルトでは、ページごとに 10 レコードが表示されます。これは、各ページに表示されるレコードの初期数を設定するために使用されます
pageListdata-page-list配列 [10, 25, 50, 100]前提条件: ページネーションが true に設定され、ページング機能が有効になっています。
- デフォルトは [10、25、50、100] です。つまり、「ページごとに 10/25/50/100 レコードを表示」を選択して、ページごとに表示されるレコード数を設定できます
selectItemNamedata-select-item-nameStringbtSelectItemradio (ラジオ ボタン) または checkbox (複雑)選択ボックスのフィールド名
smartDisplaydata-smart-displayBooleantrueデフォルトは true で、巧みに (<_<)状況に応じてページネーションまたはカード ビューを表示します
escapedata- scapeBooleanfalse HTML に挿入された文字列をスキップし、特殊文字 (次の記号にはカンマは含まれません) を置き換えます: &、<、>、" ,`,'
data-strict-searchBooleanfalse 正確な検索を有効にするには true に設定します
data-search-text String"" 前提条件: search が true に設定されており、検索機能が有効になっています。
data-search-time-outNumber500前提条件: 検索が設定されているtrue に設定すると、検索機能が有効になります。
trimOnSearchdata-trim-on-searchBooleantrue デフォルトは true、スペースは自動的に無視されます
showHeaderdata-show-headerBooleantrue デフォルトはヘッダーを表示する場合は true、非表示にする場合は false に設定します。
showFooterdata-show-footerBoolean falseデフォルトは表のフッターを非表示にする場合は false、表示する場合は true に設定します
showColumnsdata-show-columnsブール値 false列ドロップダウン メニューを非表示にする場合はデフォルトが false、表示する場合は true に設定します
showRefresh data-show-refresh Booleanfalse更新ボタンを非表示にする場合はデフォルトは false、表示する場合は true に設定します
showToggle data-show-toggleBooleanfalseビュー切り替えボタンを非表示にするデフォルトは false です。 、表示するには true に設定します
showPaginationSwitch data-show-pagination-switchBooleanfalseデフォルトはページごとのデータ項目数の選択を非表示にする場合は false、表示する場合は true に設定します
minimumCountColumnsdata-minimum-count-columns 数値1各列のドロップダウン メニューは最小の数値
idFielddata-id-fieldStringunknown は、どのフィールドが識別フィールド
uniqueId
#data-card-viewBooleanfalseデフォルトは false、カード ビューを表示するには true に設定します
data-card-viewBooleanfalseデフォルトは false、詳細ビューを表示するには true に設定します
detailFormatterdata-detail-formatterFunctionfunction(index, row, element){
return '';}
前提条件:detailView が true に設定されており、詳細ビューの表示が有効になっています。
- 詳細ビューの書式設定に使用されます
- 3 番目のパラメーター要素を通じて詳細ビューのセル (特定のグリッド) に直接追加される文字列を返します。要素はターゲット セルの jQuery 要素です。
searchAlign data-search-alignStringright検索ボックスの位置、デフォルトは右 (右端)、オプションで左
buttonsAligndata-buttons-alignStringrightツールバー ボタンの位置、デフォルトは右 (右端)、オプションの left
toolbarAligndata-toolbar-alignStringleftCustomizedツールバーの位置、デフォルトは右 (右端)、オプションで左
#paginationVAligndata-pagination-v-alignString bottomページング バーの垂直位置。デフォルトは下 (下部)、オプションで上、両方 (上部と下部の両方にページング バーがあります)
# # paginationHAligndata-pagination-h-alignStringrightページング バーの水平位置、デフォルトは右 (右端)、オプションleft
paginationDetailHAligndata-pagination-detail-h-alignStringleftif説明が長すぎます。例えば、paginationDetail は「1 件目から 8 件目までの合計 15 件を表示し、1 ページに 8 件のレコードを表示する」です。デフォルトは left (一番左)、オプションで right
paginationPreTextdata-pagination-pre-textString 引き続き例を示します。コンテンツが多い場合は、下部の右端に「‹ 1 2 3 4 5 ›」と表示され、ページ数を選択します。デフォルトは、以下と同じ一番左の記号です。
data-click -to-selectBooleanfalseデフォルトの false は応答しません。true に設定すると、この行のどこかをクリックすると、この行のチェックボックス (チェックボックス) またはラジオボックス (ラジオボタン) が自動的に選択されます。
toolbardata-toolbarString | Node未定義jQuery セレクター (例: #toolbar、.toolbar 、または DOM ノード
checkboxHeaderdata-checkbox-headerBooleantrue がある場合宣言チェック ボックスをオンにすると、ヘッダー行の [すべて選択] チェック ボックスがデフォルトで表示されます。これを非表示にするには false に設定します (つまり、テーブルの 1 行目は表示されず、2 行目以降はすべて表示されます)。
maintainSelecteddata-maintain-selectedBooleanfalsetrue に設定選択した行のステータスを維持するには
sortabledata-sortableBooleantrueデフォルトは true、すべての行の配置を無効にするには false に設定します (つまり、並べ替えボタンが各列のヘッダーに表示されません。これは data-sortable="true" で宣言する必要があり、js で記述されますが、有効にされるだけです)かどうか)
slientSort data-silent-sortBooleantrue前提条件: SidePaginationサーバー (サーバー)
に設定されます - デフォルトは true、に設定されます false の場合、データはサイレントに並べ替えられます
rowStyledata-row-styleFunction{} 行の形式を変更するには、次の 2 つのパラメータが必要です。
- row: この行のデータ
-index: この行のインデックス
クラスと CSS をサポートしており、使用方法は次のとおりです。 function rowStyle(行, インデックス){
return { クラス: 'text-nowrap another-class',
css: {"color": "blue", "font-size": "50px"}
}; }
rowAttributesdata-row-attributesFunction{}必要な属性を変更します2 つのパラメータ:
- 行: この行のデータ
- インデックス: この行のインデックス
すべてのカスタム属性をサポートします。
customSearchdata-custom-searchFunction$.noopカスタム検索関数 (組み込みの検索関数を置き換えるために使用されます)、1 つのパラメーターが必要です:
- text: 検索するコンテンツ
使用法は次のとおりです:
function CustomSearch(text){
//データをフィルターするには 'this.data' を使用する必要があります (データをフィルターします。この単語は翻訳する必要がないと思います)。'this.options.data' は使用しないでください。 }
customSortdata-custom-sortFunction$.noopカスタム ソート関数(組み込みのソート関数を置き換えるために使用されます)、2 つのパラメータが必要です (前のパラメータを参照できます):
- sortName: ソートする必要がある列
- sortOrder: ソート方法
: 上記と同じ。心配しないでください。コメントはまったく同じです。
localedata-localeString未定義ローカリゼーション (動詞)。
ローカライズされたファイルは、フォールバックを可能にするために事前にロードする必要があります (簡単に言うと、使用するファイルが利用できない場合は、ピッチ上の代替選手など、他のもので置き換えることができます。代替選手がいない場合、誰かがいる場合)負傷した場合、ゲームは停止しません (非推奨)、ロードされる場合、次の順序になります:
- まず、指定された「ローカリゼーション」ファイルのロードを試みます
- その後、「_」 (アンダースコア) が書き込まれますコードは大文字で表されます
- 次に短いロケール コード (例: 「fr-CA」の代わりに「fr」)
- 最後に残りのローカリゼーション ファイルが使用されます (ロードするファイルがない場合はデフォルトが使用されます)
残りの未定義または空の文字が使用される場合は、最後に使用されたファイルが使用されます (ローカリゼーション ファイルをロードできない場合は、組み込みの「en_US」が使用されます) used)
footerStyledata-footer-styleFunction{}フッターの変更形式には 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 プラグインを参照してください
classclass/data-classStringunknown 何も言うことはありません。ただクラス
rowspanrowspan/data-rowspanNumberunknown 各セルが占める行数
colspancolspan/data-colspanNumber unnamed各セルが占める列の数
aligndata-alignStringunnamed各セル内のデータの配置には、左 (左)、右 (右)、中央 (中央) が含まれます。
halign data-halignString未定義テーブル ヘッダー (テーブル ヘッダー) の配置には次が含まれます: left (左)、right (右)、center (中央)
faligndata-falignString未定義テーブル フッター( テーブル フッター、次のように翻訳するだけですこれは意図的に、実際には何気なく翻訳できます。知っておいてください) 整列方法は次のとおりです: left (左)、right (右)、center (中央)
valigndata-valignStringunnamedデータの各グリッドの配置には次が含まれます: 上 (上)、中央 (中央) )、下 (下)
- カスタム幅がない場合、幅はコンテンツの幅に応じて調整されます。
- テーブルが応答性のままであるか、設定された幅がコンテンツの幅より小さい場合でも、幅は適応されます (min-width または max-width はクラスまたは他の属性で使用できます)。
- 単位として「%」を使用することもできます。この場合、bootstapTable はパーセンテージで除算されます。「ピクセル (ピクセル値)」を使用したい場合は、数値を記述するだけで済みます (特に指定しない限り)。 "%" を追加します。単位はデフォルトで "px" になります。気にしない場合、またはより明確にしたい場合は、"px" を追加することもできます)
sortabledata-sortableBooleanfalseデフォルトは false で、デフォルトで表示されます。true に設定すると、次のようになります。 sorted
orderdata-orderStringascデフォルトの並べ替え方法は「asc」です「(昇順)」を選択しますが、「desc(降順)」も設定できます。
- 上記と組み合わせて使用​​すると、ソートされません。昇降について他にどう思いますか。
visibledata-visibleBooleantrueこの列を表示する場合、デフォルトは true です。 , set false の場合、列は非表示になります。
- これは依然として非常に便利です。たとえば、特定の属性で並べ替えると混乱してしまうカスタム インデックス列を非表示にし、特定の行のインデックスを読み取って値
cardVisibledata-card-visibleBooleantrueデフォルトは true で、この列を表示し、設定します。非表示にするには false に設定します。
switchabledata-switchableBooleantrueこの列を表示する場合、デフォルトは true です。 、False に設定すると、列項目のタブが無効になります。
clickToSelectdata-click-to-selectBooleantrueデフォルトの true では、応答 、 false に設定すると、この行のどこかをクリックすると、この行のチェックボックス (チェックボックス) またはラジオボックス (ラジオ ボタン) は自動的に選択されません
formatter data-formatterFunction未定義この列を必要とするオブジェクト。
あるグリッドのデータ変換関数には 3 つのパラメータが必要です。
-value: field (フィールド名) -row: 行データ
-index: row (インデックス) インデックス
特定のグリッドのデータ変換関数にはパラメータが 1 つ必要です:
-data: すべての行データの配列
この関数は、フッターの特定のセルに表示される文字列の形式を返す必要があり、コンテンツ
eventsdata- も含める必要があります。 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 クエリ可能searchFormatterdata-search-formatterBoolean
デフォルトは true 、フォーマットされたデータクエリを使用できますescapedata-escapeBoolean
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 < tbody> ; のコンテンツが表示される前にトリガーします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中的事件名参数作用描述
onAllall.bs.tablename, args当所有触发器被触发时都执行此函数,就是所有的事件都会触发该事件,参数包括:
- name:事件名
- args:事件的数据
onClickRowclick-row.bs.tablerow, $element, field当单击此行的任意一处,就会触发该事件,所需参数如下(只是按原文译过来的,在bootstraptable的js中不需要这些参数,因为单击该行就会获得一个row,row中包括此行所有数据,只要通过此行某列的字段名即可取出):
- row:哪一行(从0开始)
- $element:该行(tr)
- field:当点击该行,你想获取此行哪一格的数据,field就是此列字段名
onDblClickRowdbl-click-row.bs.tablerow, $element, field和上面差不多,当双击(666)此行的任意一处,就会触发该事件,所需参数如下(只是按原文译过来的,在bootstraptable的js中不需要这些参数,因为双击该行就会获得一个row,row中包括此行所有数据,只要通过此行某列的字段名即可取出):
- row:哪一行(从0开始)
- $element:该行(tr)
- field:当点击该行,你想获取此行哪一格的数据,field就是此列字段名
onClickCellclick-cell.bs.tablefield, value, row, $element当单击某一格,就会触发该事件,所需参数如下:
- field:此格所在列的字段名
- value:此格的数据
- $element:此行的此列,就是此格(td)
onDblClickCelldbl-click-cell.bs.table field, value, row, $element当双击某一格,就会触发该事件,所需参数如下:
- field:此格所在列的字段名
- value:此格的数据
- $element:此行的此列,就是此格(td)
onSortsort.bs.tablename, order当对某列进行排序时触发该事件,所需参数如下:
- name:所排序的列的字段名
- order: 選択時の順序
onCheckcheck.bs.tablerow、$element (トリガーされるタイミング) check) この行の場合、必要なパラメータは次のとおりです: - row: 選択した行のフィールド名
- $element: この行の DOM 要素
- row : フィールド選択解除された行の名前
- $element: この行の DOM 要素


onCheckSome
#特定の行(複数行、行)が選択されたときにトリガーされます(チェック)、必要なパラメーターは次のとおりです。 uncheck-some.bs.tablerows一部の行のチェックを外す場合 (複数の行、行の場合にトリガーされます)、必要なパラメーターは次のとおりです:
- 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 を破壊してください!て!て!ああ! C!き! $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
appenddata最後の行の後にデータを追加 $ table.bootstrapTable('append', data);data は配列にすることができます
- 確認してください: append
prependdata 最初の行の直前にも追加されます$table.bootstrapTable('prepend', data);data は配列にすることもできます
- 確認してください: prepend
removeparams選択した 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
optionsMerge~ (複数のセルを 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
uncheckAllnone現在のページのすべての行の選択を解除します$table.bootstrapTable('uncheckAll');
- お願いしますcheck: checkAll/uncheckAll

check
行を選択します。インデックスは 0- チェックしてください: チェック/チェック解除
チェックを外してくださいindex行の選択を解除します。インデックスは 0 から始まります$table.bootstrapTable('uncheck', 1);
- チェックしてください: check/uncheck
checkByparams配列を介して行を選択します。必要なパラメーターは次のとおりです:
- フィールド: 選択するフィールドの名前
- 値: 値 (配列)
公式ではありません、ああ、例があります:
- $("#table").bootstrapTable("checkBy", { field:"field_name", value:["value1" ,"value2"," value3"]});
- チェックしてください: checkBy/uncheckBy
uncheckByparams配列を渡す 行を選択するには、必要なパラメータは次のとおりです:
- フィールド: 選択を解除するフィールド名
- 値: 選択を解除する値 (配列)
$("#table") .bootstrapTable("uncheckBy", { field:"field_name", value:["value1","value2","value3"]});
- 確認してください: checkBy/uncheckBy
resetViewparamsテーブルの高さの変更など、テーブルのスタイルを変更します $table.bootstrapTable('resetView ');
- チェックしてください: resetView
resetWidthnoneヘッダーとフッター (フィートに変換され、任意) の幅を各列の幅に合わせて自動的に変更します$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 サイトの他の関連記事を参照してください。

関連ラベル:
ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
最新の問題
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート