ネットで中国語版があるのを見ましたが、直訳だったり、未訳だったりするので、自分で翻訳し直す予定です、頑張りますそれぞれを組み合わせる 可能な限り多くの情報を翻訳する 翻訳内容が英語以上であることがわかった場合は、より詳細な説明を追加する テーブルの名前、属性、型、デフォルト値は翻訳されません例: 「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>
jQuery.fn.bootstrapTable.defaults ファイルで定義されています
列オプション jQuery.fn で定義されます。 bootstrapTable.columnDefaults ファイル イベント メソッド #メソッド応答の構文を定義する 本地化,切换为另一种语言(Localizations) 默认显示英文,如果想使用中文,首先引入: 然后是三种声明使用的方法(个人只使用第二、三种),如下: 第二种: 第三种: 以下说明除了数字外均为中文默认显示,本来不用写的,只要引入就显示中文了 有错请留言,看到后会及时更改,如果像那种翻译的行写成列或漏字等低级错误,看英文名称就知道有没有错了,主要就是为了让你们知道怎么用,会持续检查哪有误、漏译,如果认为有译得不妥的地方,也可以留言一起讨论,谢谢 以上がBootstrap Table API 中国語版(翻訳ドキュメント)の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。#名前 属性 タイプ デフォルト値 関数の説明 - data-toggle String table jquery、bootstrap、bootstrap-table パッケージを導入するだけで、何もする必要はありません。それらをjsに追加します。内部で定義されている場合は、 を使用できます。デフォルトでは、data-toggle="table" と書かれています。data-toggle については知っておくべきです。一般的に使用されるものには、「ツールチップ、ポップオーバーなど」が含まれますが、ここでは説明しません。 classes data-classes String table table-hover テーブルのクラス属性(自分で定義していない場合)にはデフォルトで枠線があり、マウスをホバーすると、その行の背景が明るい灰色に変わります。 sortClass data-sort-class String unknown テーブル td のクラス名を宣言します。これは、ソートされるこの列内の要素のクラス名を表します #height data-height Number 未定義 テーブルの高さ unknownText data-undependent-text String - コンテンツが書き込まれない場合、デフォルトの表示は '-' triped data-striped Boolean false デフォルトは false です。true に設定すると、背景がテーブルの各行はグレーと白で表示されます。 #sortName data-sort-name String unknown どの列の値をソートするかを定義します。データ フィールドのカスタム名を書き込みます。定義されていない場合、デフォルトでソートされません。以下と同じです。sortOrder と組み合わせて使用します。そうでない場合は、書き込むと、列はデフォルトで増分されます (asc) sortOrder data-sort-order String asc 上記と組み合わせて使用すると、デフォルトは増加 (asc) ですが、減少 (desc) に設定することもできます。 sortStable data-sort -stable Boolean false (読み間違えないでください。sortStable です。sortable は以下にあります) true に設定されている場合、デフォルトは false です。ソート部分と同じですが、異なる点は次のとおりです。ソート処理中、等しい要素がある場合、元の順序は変わりません。元のテキストには別の文があります: (この属性を true に設定した場合) この行に '_position' 属性を追加します iconsPrefix data- icons-prefix String glyphicon フォント ライブラリ (FontAwesome の場合は「Glyphicon」または「fa」) を定義します。「fa」を使用する場合は、FontAwesome を参照する必要がありますicon 属性と連携して効果を実現します。
Glyphicon は Bootstrap に統合されており、無料で使用できます iconSize data-icon-size String unknown 定義されたアイコン サイズ:
- 未定義 =>デフォルトはデフォルトのボタン サイズを示します (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',
paginationSwitchUp: 'glyphicon-collapse-up icon-chevron-up',
更新: 'glyphicon-refresh icon-refresh',
- 説明する方法はありません。初心者向けチュートリアルのアイコンを参照してください:
トグル: 'glyphicon-list-alt アイコン-リスト-alt',
列: 'glyphicon-th icon-th',
詳細開く: 'glyphicon-plus アイコン-プラス',
DetailClose: 'glyphicon-minus icon-minus'
}
ツールバー、ページング、および詳細ビューで使用されるアイコンを定義しますBootstrap font icon ##columns- -Array [] デフォルトの空の配列は JS で定義され、field はデータフィールド、title は各列のヘッダー名などです。
- Bootstrap-table の使用方法を確認する
#dataArray ## を参照してください。 #[ ]ロードされたデータ。 - つまり、サーバーから取得されるデータは、「data.date/data.anything」などの「.」演算子を介して取得され、その後にサーバーによって送信されたフィールド名が続きます dataField data-data-fieldString rows - 名前には、定義された各列のフィールド名を記述します。自分自身、つまりキーによって、Key を介して行の列に値を割り当てることができます。 - 元のテキスト: データ json の各行のキーを取得します。 - 例: {"name":"zz","age":20}、要求された場合、名前と年齢がキーになります。サーバー JSON から取得したものであり、各列で定義されているフィールドとは異なる場合がありますが、すべて一意です data-ajax
ajax Function unknown - jQuery の ajax メソッドに似た 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 に挿入された文字列をスキップし、特殊文字 (次の記号にはカンマは含まれません) を置き換えます: &、<、>、" ,`,' ##search data-search Boolean false デフォルトの false では、テーブルの右上隅に検索ボックスを表示します。true に設定できます。検索ボックスに内容を入力する限り、検索が開始されます。 searchOnEnterKey #strictSearchdata-search-on-enter-key Boolean false デフォルトの false は有効になっていません。有効にするには true に設定します。関数上記と比較するには、検索ボックスに内容を入力して Enter キーを押して検索を開始します searchTextdata-strict-search Boolean false 正確な検索を有効にするには true に設定します searchTimeOutdata-search-text String "" 前提条件: search が true に設定されており、検索機能が有効になっています。 - 検索ボックスに最初に表示されるコンテンツ、デフォルトの空の文字列 data-search-time-out Number 500 前提条件: 検索が設定されているtrue に設定すると、検索機能が有効になります。 ・検索ファイルのタイムアウトを設定する(原文:Set timeout for search fire、書き方が間違っているのか、知識が狭すぎるのかわかりません。「search fire」とはどういう意味ですか?公式APIが間違っているのでしょうか?)ご苦労様です)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-unique-idString 未定義 は、各行が一意であることを示します。 cardView## の識別子 detailView#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 ›」と表示され、ページ数を選択します。デフォルトは、以下と同じ一番左の記号です。 #paginationNextText #clickToSelectdata-pagination-next-text String › 上記項目を参照 data-click -to-select Boolean false デフォルトの false は応答しません。true に設定すると、この行のどこかをクリックすると、この行のチェックボックス (チェックボックス) またはラジオボックス (ラジオボタン) が自動的に選択されます。 #singleSelect data-single-select Boolean #false デフォルトは false ですが、チェック ボックスで 1 行のみ選択できるようにするには 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: { "フォントの太さ": "太字" }
};
}
##名前 属性 タイプ デフォルト値 関数の説明 radio data-radio Boolean false デフォルトの false では、ラジオ (ラジオ ボタン) が表示されません。 true に設定 表示、無線幅は固定です checkbox data-checkbox Boolean #false デフォルトの false はチェックボックス (チェックボックス) を表示しません。表示するには true に設定します。チェックボックスの各列の幅は固定されていますfield data-field String 未定義 は各列のフィールド名であり、テーブル ヘッダーに表示される名前ではありません。このフィールドを使用して値を割り当てることができます。 name はキーに相当し、テーブル内で一意です title data-title String 未定義 これはヘッダーに表示される名前であり、一意ではありません。必要に応じて、すべてのヘッダーを同じ名前に設定できます titleTooltip data-title-tooltip String unknown コントロールの上にマウスを置くと、プロンプトが表示されます - 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 データの各グリッドの配置には次が含まれます: 上 (上)、中央 (中央) )、下 (下) #width data-width 数値 (単位: px または %) 未定義 各列の幅。 - カスタム幅がない場合、幅はコンテンツの幅に応じて調整されます。
- テーブルが応答性のままであるか、設定された幅がコンテンツの幅より小さい場合でも、幅は適応されます (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 (インデックス) インデックス
footerFormatter data-footer-formatter Function 未定義 この列を必要とするオブジェクト。 特定のグリッドのデータ変換関数にはパラメータが 1 つ必要です:
-data: すべての行データの配列
この関数は、フッターの特定のセルに表示される文字列の形式を返す必要があり、コンテンツ events data- も含める必要があります。 events オブジェクト 未定義 特定のグリッドがフォーマッタ関数を使用すると、イベント リスナーが応答し、次の 4 つのパラメータが必要になります。
—event: jQuery イベント (参照)イベントへ)。
-値: フィールド名
-行: 行データ
- インデックス: この行の行、例:
& lt; th .. data -events = "operateEvent" & gt; var operateEvents = {'click .like': function (e, value, row,index) {}};sorter data-sorter Function 未定義 カスタム並べ替え関数でローカル並べ替えを実装するには、次の 2 つのパラメーターが必要です:
フィールド名sortName data-sort-name String undependent ヘッダーを除く デフォルトの並べ替え名または列のフィールド名を指定することもできます。カスタマイズされたsort-name を使用しますが、使用する列のフィールド名。 HTML コード内のコンテンツは次のように配置されます: abc ## cellStyledata-cell-style trueFunction unknown 特定のセルでディスプレイスタイル(スタイル)を変更するには、3つの機能が必要です。####
クラスと CSS をサポートしており、使用法は次のとおりです。 function cellStyle(value, row,index, field) {
戻る {
クラス: 'text-nowrap another-class',
css: {"カラー": "ブルー", "フォントサイズ": "50px"}
};
}
searchable
data-searchable
Boolean trueデフォルトは true、この列がdata クエリ可能 searchFormatter data-search-formatter Boolean falseデフォルトは true 、フォーマットされたデータクエリを使用できます escape data-escape Boolean Jump By HTML に文字列を挿入する場合は、特殊文字 (&、<、>、"、`、' ) を置き換えます。 定义事件的格式:
$(’#table’).bootstrapTable({
onEventName: function (arg1, arg2, …) {
// …
} });
$(’#table’).on(‘event-name.bs.table’, function (e, arg1, arg2, …) {
// …
});
事件名 定义在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 要素 onUncheck uncheck.bs.table row, $element この行が選択されていない (チェックを外されている) 場合にトリガーされ、必要なパラメーターは次のとおりです: - row : フィールド選択解除された行の名前
- $element: この行の DOM 要素 onCheckAll check-all.bs.table rowsすべての行が選択されるとトリガーされ、必要なパラメーターは次のとおりです: onUncheckAlluncheck-all.bs.table rows すべての行が選択されていないときにトリガーされ、必要なパラメーターは次のとおりです:以前または以前に選択された行のフィールド名の配列
onCheckSome#特定の行(複数行、行)が選択されたときにトリガーされます(チェック)、必要なパラメーターは次のとおりです。 uncheck-some.bs.table rows 一部の行のチェックを外す場合 (複数の行、行の場合にトリガーされます)、必要なパラメーターは次のとおりです:
- rows: 前に選択した行のフィールド名の配列onLoadSuccess ‐ ‐ ‐ ‐ Load-success.bs.table # #dataすべてのデータがロードされるときにトリガーされます onLoadError load-error.bs.table status, res データのロード中にエラーが発生したときにトリガーされます onColumnSwitch column-switch.bs.table フィールド、チェック済み 列の表示ステータスが変更されたときにトリガーされます onColumnSearch column-search.bs.table field, text 列がクエリされたときにトリガーされます onPageChange page-change.bs.table number, size このページに表示されるデータ項目の数が変更されたとき、またはページ番号が変更されたときにトリガーされます onSearch search.bs.table text このテーブルをクエリするときにトリガーされます onToggle toggle.bs.table cardView 起動されますテーブルのビューが変更されたとき onPreBody のコンテンツが表示される前にトリガーしますpre-body.bs.table data When < tbody> ; onPostBody のコンテンツがロードされるか、使用している DOM で定義されるとトリガーされますpost-body.bs.table data onPostHeader post -header.bs.table none のコンテンツが読み込まれるか、使用している DOM に定義されるとトリガーされます onExpandRow expand-row.bs.table index, row, $detail 詳細ビューを表示する場合 (クリックして詳細アイコンを表示) onCollapseRow collapse-row.bs.table index、row は、詳細が閉じられたときにトリガーされます。 ビューのときにトリガーされます (アイコンをクリックして詳細を再度表示します) onRefreshOptions refresh-options.bs.table options 更新後にトリガーされます項目、またはテーブルの初期化前 (破棄と再初期化を含む) #onResetView onrefresh reset-view.bs.table
##テーブルのビューがリセットされるときに発生します REFRESH.TABLE Params リフレッシュボタンをクリックすると(ブラウザではなく、テーブル 更新ボタンの後にトリガーされます) $('#table').bootstrapTable(' メソッド', パラメータ);
#メソッド名 パラメータ 説明 例 getOptions none 各項目のオブジェクトを返します $table.bootstrapTable('getOptions'); - チェックしてください:
getOptions getSelections none 選択された行を返します。行が選択されていない場合は、空の配列が返されます (ただし、これは未定義または null ではなく、長さ。0 の空の配列なので、行が選択されているかどうかを判断するために長さが 0 より大きいかどうかを判断できます) $table.bootstrapTable('getSelections'); - チェックしてください:
getSelections getAllSelections none 選択されたすべての行を返します (元のテキストでは、検索またはフィルターが含まれています)実際には選択したフィルタリングされたデータです)、行が選択されていない場合は、空の配列が返されます $table.bootstrapTable('getAllSelections'); - 参照してください:
getAllSelections showAllColumns none すべての列を表示 $table.bootstrapTable('showAllColumns'); - ただすべての列を表示し、何も表示しない Sayable hideAllColumns none すべての列を非表示 $table.bootstrapTable('hideAllColumns') ; - すべての列を非表示にします。 getData useCurrentPage use を設定した場合、ロードされたテーブルのデータを取得します。現在のページ データ (useCurrentPage) を取得し、現在のページのデータを返します $table.bootstrapTable('getData'); - チェックしてください:
getData getRowByUniqueId id 必要な行のデータを取得します (行の ID を設定します) $table.bootstrapTable( 'getRowByUniqueId', 1) ;次の 1 は必要な行の ID です - 確認してください:
getRowByUniqueIdload # #data データをテーブルにロードします。元のデータは削除されます #$table.bootstrapTable('load', data);- 参照してください: load append data 最後の行の後にデータを追加 $ table.bootstrapTable('append', data);data は配列にすることができます
- 確認してください: appendprepend data 最初の行の直前にも追加されます $table.bootstrapTable('prepend', data);data は配列にすることもできます
- 確認してください: prepend remove params 選択した 1 行以上のデータを削除します $table.bootstrapTable(' Remove', {field: 'id', value: ids});
- id: 削除する必要がある行のフィールド (行、1 つ以上の行)
- 値: 削除する行削除された
の配列 - ご覧ください: removeremoveAll - テーブル内のすべてのデータを削除 $table.bootstrapTable('removeAll');
- 以下を参照してください: removeAll#removeByUniqueId - データの特定の行を削除します (特定の行の ID を設定します) $table.bootstrapTable('removeByUniqueId', 1);次の 1 は削除する行の ID です - 確認してください:
removeByUniqueIdinsertRow params 新しい行を追加します。必要なパラメータは次のとおりです。以下: - インデックス: どこに挿入しますか (その気になれば、どこにでも挿入できます。誰でも挿入できます) $table.bootstrapTable(' insertRow', {index: 1, row: row});
- 行: 挿入するデータ -
insertRow#updateRow## を参照してください。 updateByUniqueId#params 行データを更新します。必要なパラメータは次のとおりです: - インデックス: 更新する行のインデックス - 行: 変更する新しいデータ - 確認してください:
$table .bootstrapTable('updateRow', {index: 1, row: row}); updateRow
## を参照してください。 #paramsparams データ行を更新します。必要なパラメータは次のとおりです: - id: 何をするか更新しますか? 行の ID (一意)、(変更したい方を変更してください) - 行: 変更する新しいデータ -
$ table.bootstrapTable('updateByUniqueId', {id: 3, row: row}); updateByUniqueId ##showRow特定の行を表示します。必須パラメータには、次の少なくとも 1 つが含まれます。 - id: 表示される行のインデックス - uniqueId: その行の ID $table.bootstrapTable('showRow ', {index:1});
- ご覧ください:
showRow/hideRow params
##hideRow特定の行を非表示にします。必須パラメータには、次の少なくとも 1 つが含まれます: - id: 非表示にする行のインデックス - uniqueId: その行の ID ##$table.bootstrapTable('hideRow', {index:1}); - チェックしてください:
showRow/hideRowgetRowsHidden ##mergeCellsboolean 非表示の行を取得します (正式な用語はたくさんありますが、実際には前の文が要約です) $table.bootstrapTable( 'getRowsHidden'); - インデックス: 結合するセルが存在する行のインデックス (index) options Merge~ (複数のセルを 1 つにマージ)、必要なパラメータは次のとおりです。フォロー:### can ## $ $ table.bootstraptable( 'mergecells'、{index:1、field: 'name'、colspan:2、rowspan:3}); -閲覧:
mergeCellsupdateCell データの特定のセルを更新します。必要なパラメータは次のとおりです:
params - フィールド: 列のフィールド名 秘密裏に (<_<) に設定できます - 値: 置換される新しいデータ {reinit を設定することもできます:false} テーブルの再初期化を無効にする $table.bootstrapTable('updateCell',{index:index,field:'id',value:value});
#refresh
params サーバー データを更新します: - {silent:true} を 更新 -
{url:newUrl,pageNumber:pageNumber, pageSize:pageSize} を設定して、要求されたアドレス、ページ番号、各ページに表示されるアイテムの数を変更します - {query:{foo:'bar' を設定できます}} 特定のパラメータを増やすには #$table.bootstrapTable('refresh'); -
refresh
##refreshOptions## を参照してください。
#options例を見てみましょう
- ご覧ください: refreshOptionsresetSearch # #text 検索テキスト (テキスト) をリセットします - resetSearch ##showLoading を参照してください。なし 読み込み中の表示... - チェックしてください: showLoading/hideLoading hideLoading なし 読み込みを非表示... - チェックしてください: showLoading/hideLoading checkAll なし 現在のページのすべての行を選択します $table.bootstrapTable('checkAll'); - チェックしてください: checkAll/uncheckAll uncheckAll none 現在のページのすべての行の選択を解除します $table.bootstrapTable('uncheckAll');
- お願いしますcheck: checkAll/uncheckAll##checkInvert indexnone 逆選択、理解するのは難しくありません $ table.bootstrapTable('checkInvert');
check行を選択します。インデックスは 0 # から始まります # #$table.bootstrapTable('check', 1);- チェックしてください: チェック/チェック解除 チェックを外してください index 行の選択を解除します。インデックスは 0 から始まります $table.bootstrapTable('uncheck', 1);
- チェックしてください: check/uncheckcheckBy params 配列を介して行を選択します。必要なパラメーターは次のとおりです:
- フィールド: 選択するフィールドの名前
- 値: 値 (配列) 公式ではありません、ああ、例があります:
- $("#table").bootstrapTable("checkBy", { field:"field_name", value:["value1" ,"value2"," value3"]});
- チェックしてください: checkBy/uncheckByuncheckBy params 配列を渡す 行を選択するには、必要なパラメータは次のとおりです:
- フィールド: 選択を解除するフィールド名
- 値: 選択を解除する値 (配列) $("#table") .bootstrapTable("uncheckBy", { field:"field_name", value:["value1","value2","value3"]});
- 確認してください: checkBy/uncheckByresetView params テーブルの高さの変更など、テーブルのスタイルを変更します $table.bootstrapTable('resetView ');
- チェックしてください: resetViewresetWidth none ヘッダーとフッター (フィートに変換され、任意) の幅を各列の幅に合わせて自動的に変更します $table.bootstrapTable('resetWidth'); #destroy none フォーム A を破壊してください!て!て!ああ! C!き! $table.bootstrapTable('destroy'); - ご覧ください:
destroyshowColumn field 特定の列を表示 ##$table.bootstrapTable('showColumn', 'name'); - チェックしてください: showColumn/hideCoulumn #hideColumnfield 特定の列を非表示にする $table.bootstrapTable('hideColumn', 'name'); - 以下を確認してください。 showColumn/hideCoulumn getHiddenColumns- すべての非表示列を取得 $ table.bootstrapTable( 'getHiddenColumns'); getVisibleColumns - 表示されているすべての列を取得 $table.bootstrapTable ('getVisibleColumns') ; scrollTo value スクロール...どの位置まで、単位は「px」です。「bottom」に設定されている場合、シューッという音です。おめでとうございます。テーブルの最後に到達しました。 $table.bootstrapTable('scrollTo', 0); - チェックしてください: scrollTo getScrollPositionnone 現在のスクロール位置を取得します。単位は 'px' $table.bootstrapTable('getScrollPosition'); filterBy none は、クライアント側 (サーバー側を基準としたクライアント側) でのみ使用でき、 table 例: - 年齢 10 のデータのみを表示するように {age:10} を設定できます。- 1人だけでなく、ペア、または複数人で飛行することもできます。{年齢: 10、髪の色: ["青"、"赤"、"緑"]}を設定すると、10歳のグループになります。 -青、赤、緑の髪の色を持つ老人...data$table.bootstrapTable('filterBy', {
ID: [1、2、3]
});
- チェックしてください: filterBy##selectPage page 特定のページにジャンプします $table.bootstrapTable('selectPage', 1); - ご覧ください:
selectPage/prevPage/nextPageprevPage none 前のページにジャンプします $table.bootstrapTable('prevPage'); - チェックしてください:
selectPage/prevPage/nextPagenextPage none 次のページにジャンプ $table.bootstrapTable('nextPage'); - お願いしますcheck:
selectPage/prevPage/nextPagetogglePagination none 言葉が足りない場合は、例を参照してください。用紙 $table.bootstrapTable('togglePagination'); - ご覧ください:
togglePaginationtoggleView # # ExpandRowなし Change View $table.bootstrapTable('toggleView'); - ご覧ください:
toggleView collapseRowindex 使用可能な条件: 詳細ビューが true に設定されている場合、ビュー関数は使用できず、役に立ちません。 - この列の詳細ビューを展開します。パラメータindex expandRow-collapseRow
- チェックしてください: 新しいバージョン (当初は「expandAllRow」) に変更があり、以下と同じですindex 利用可能な条件:詳細ビューの設定 true にするためには - パラメータ Index を使用してこの列の詳細ビューを閉じます # - 次を参照してください:
expandRow-collapseRowexpandAllRows Thanks @zhq449681061 使用可能な条件: 詳細ビューは true に設定されます
is subtable - すべての列を展開します詳細ビュー $table.bootstrapTable('expandAllRows');
- 上記の例を参照してください。上記は展開 (折りたたみ) のビューです。特定の行、これはすべての行のビューです collapseAllRowsis subtable 使用可能な条件: 詳細ビューが true に設定されている - すべての列の詳細ビューを閉じる $table.bootstrapTable ('collapseAllRows');
- 上記を参照してください<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'});
名称
参数
默认
说明
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'
“列”