ブートストラップテーブルは、テーブル形式で表示される軽量で機能が豊富なデータであり、単一の選択、チェックボックス、ソート、ソート、ディスプレイ/非表示、固定されたタイトルスクロールテーブル、レスポンシブデザイン、AJAXのロードJSONデータ、並べ替えの列、カードビューなどをサポートしています。
ブートストラップテーブルシリーズ：
JSテーブルコンポーネントアーティファクトブートストラップテーブルの詳細な説明（基本バージョン）
JSコンポーネントシリーズのブートストラップテーブルコンポーネントアーティファクト[終了章]
JSコンポーネントシリーズのブートストラップテーブルコンポーネントアーティファクト[2。親子テーブルと列列注文]
1。エフェクトディスプレイ
今日は、次の方法をわずかに変更します。最初に実装効果を見てから、後でコードの実装と予防策を紹介します。さあ、レンダリングを送ってみましょう：
1。父と息子のテーブルレンダリング
2。行の注文
注文する前
行をドラッグして最初の行に並べ替えます
3。列の順序付け
注文する前
列のタイトルソートをドラッグします
注文後
2。父と息子のテーブルコードの詳細な説明
前の章では、Bootstrapテーブルの基本的な使用法を紹介しました。テーブルを初期化するとき、プロパティ「詳細ビュー」があります。それをtrueに設定すると、各行の前に「+」の形のアイコンを見ることができます。このアイコンをクリックすると、サブテーブルをロードするイベントがトリガーされます。これが一般原則です。コードを見てみましょう。実際には非常に簡単です。
1.テーブルを初期化し、行を登録してイベントを拡張します
$（ "＃tb_powerset"）。bootstraptable（{url： '/api/menuapi/getparentmenu'、method： 'get'、detailview：true、// parent and child table // sidepagination： "server"、pagesize：10、pageList：[10、25]、columns：[{field： 'nemame：' nemame： 'mename 'menu_url'、 'menu url'}、{field： 'parent_id'、 'field：' menu_level '、' men level '}、//サブテーブルをロードするイベント：indis eint.init;Subtable LoadingイベントOneXPandrowの対応するメソッド関数（index、row、$ detail）の3つのパラメーターを見てみましょう。
インデックス：親テーブルの現在の行の行インデックス。
行：json親テーブルの現在の行のJSONデータオブジェクト。
$の詳細：現在の行の下で作成された新しい行のTDオブジェクト。
3番目のパラメーターは、生成されたサブテーブルテーブルが$ detailオブジェクトにロードされているため、特に重要です。 Bootstrapテーブルは、$ Detailオブジェクトを生成し、必要なテーブルで埋めるだけです。
2。oinit.initsubtable（）の方法を見てみましょう
// subtable（wireless loop）oinit.initsubtable = function（index、row、$ detail）{var parentid = row.menu_id; var cur_table = $ detail.html（ '<table> </table>'）。 'get'、queryparams：{strparentid：parentid}、ajaxoptions：{strparentid：parentid}、clicktoselect：true、detailview：true、// parent-child table uniqueid： "menu_id"、pagesize：10、pageList：[10、25]、columns： 'mename name '}、{field：' menu_url '、title：' menu url '}、{field：' parent_id '、title：' parent menu '}、{field：' menu_level '、' menu_level '}、]、//ワイヤレスループ{oinit.initsubtable（index、row、$ subdetail）;}}）;};};このことから、サブテーブルを生成する原則は、テーブルオブジェクトcur_tableを作成し、このオブジェクトのテーブル初期化を登録することであることがわかります。とてもシンプルではありませんか~~
3.行順序コードの詳細な説明
行の順序付けコードはより簡単です。見てみましょう。
1.追加の2つの参照が必要です
<script src = "〜/content/jquery-ui-111.4.custom/external/jquery.tablednd.js"> </script> <Src = "〜/content/bootstrap-table/extensions/redory-rows/bootstrap-table-reord-rows.js"> </script>
2。CSHTMLページでテーブルを定義するときは、2つの属性を追加します
<表ID = "tb_order" data-use-row-attr-func = "true" data-reorderable-rows = "true"> </table>
次に、JSテーブルを初期化するときに変更を加える必要はなく、ロードされたテーブルは行の順序関数を実現できます。
4.列順序付けコードの詳細な説明
行順に似ています。列の順序は次のように使用されます。
1.いくつかの追加のJSおよびCSSを参照してください
<スクリプトsrc = "〜/content/bootstrap-table/extensions/reorder-columns/bootstrap-table-reorder-columns.js"> </scrip> <link rel = "styleSheet" href = "../ assets/emplyples.css"> <link rel = "styleSheet" " href = "https://rawgit.com/akottr/dragtable/master/dragtable.css"> <script src = "https://code.jquery.com/ui/1.11.4/jquery-ui.js"> </script src = "https://rawgit.com/akottr/dragtable/master/jquery.dragtable.js"> </scrip> <scrip src = "https://code.jquery.com/ui/1.11.4/jquery-ui.js"> </</<スクリプトsrc = "https://code.jquery.com/ui/1.11.4/jquery-ui.js"> </script>
2。CSHTMLページでテーブルを定義するときは、属性を追加します
<表ID = "tb_departments" data-reorderable-columns = "true"> </table>
他の場所では変更は必要ありません。ロードされたテーブルは、列の順序を実現できます。簡単ですか？
5。制御フィルタリング
もともと、この記事は終わろうとしていましたが、前の章に検索機能があったことを突然思い出しました。サーバーのページングが使用されたときに、検索機能を使用できなかったようです。それで、私は以前にCSの各列をフィルタリングするのと同様の関数があることを覚えていました。ブロガーは再び興味がありました。 Bootstrapテーブルには、この種の列がテーブルの各列をフィルタリングすることもあります。そのため、ドキュメントを確認しました。結果は満たされており、本当に何かがあります~~見てみましょう。
1。レンダリングの表示
2。コードの例
（1）追加のJSを導入します
<スクリプトsrc = "〜/content/bootstrap-table/extensions/filter-control/bootstrap-table-filter-control.js"> </script>
（2）テーブル属性とヘッダー属性を定義します
<表ID = "TB_ROLES" data-filter-control = "true"> <thead> <tr> <th data-field = "role_name" data-filter-control = "select">ロール名</thデータフィールド= "説明" Data-filter-control = "input">役割記述ページ</th> </tr> </tead> </table>
テーブルヘッダーの属性はここで定義されているため、JSを初期化するときに列を定義する必要はありません。
（3）JS初期化
$（ '＃tb_roles'）。bootstraptable（{url： '/role/getrole'、method： 'get'、toolbar： '＃toolbar'、striped：true、cache：false、striped：true、pagination：true、sortable：true、queryparams：function（param）{return parim;サイドパジネーション： "Server"、Pagesize：10、Pagelist：[10、25、50、100]、Search：true、showcolumns：true、showrefresh：true、minimutcountcolumns：2、clicktoselect：true、}）;最初は、ブロガーは、この種の検索はユーザークライアントにしかページングできないと考えていましたが、デバッグ後はそうではありませんでした。元の検索条件は、JSONを介してサーバーに渡すことができます。デバッグプロセスを見てみましょう
バックグラウンドでパラメーターを受信し、それらを脱上化します
このようにして、クエリ条件を背景に適切に渡すことができます。とても良くて強力です。これにより、テーブル検索機能を拡張する問題がなくなります~~
6。概要
上記は、ブートストラップテーブルのいくつかの拡張アプリケーションです。不完全ではない場合があり、行と列のマージ、行と列の凍結など、導入されていない高度な使用法がいくつかあります。
上記のコンテンツは、ブートストラップテーブルコンポーネントアーティファクトの関連する知識です[2。父と息子のテーブルと列と列の注文]編集者によって紹介されました。私はそれが誰にでも役立つことを願っています！