ブートストラップテーブルシリーズ：
JSテーブルコンポーネントアーティファクトブートストラップテーブルの詳細な説明（基本バージョン）
JSコンポーネントシリーズのブートストラップテーブルコンポーネントアーティファクト[終了章]
JSコンポーネントシリーズのブートストラップテーブルコンポーネントアーティファクト[2。親子テーブルと列列注文]
ブートストラップテーブルは、テーブル形式で表示される軽量で機能が豊富なデータであり、単一の選択、チェックボックス、ソート、ページング、ディスプレイ列、固定されたタイトルスクロールテーブル、レスポンシブデザイン、AJAXのロードJSONデータ、カードの視聴をクリックします。
1。エフェクトディスプレイ
1。テーブルロウスタイル
たとえば、注文ページを表示するための要件があり、図に示すように、さまざまなステータスの注文が異なる色を示しています。
2。フォーム行内で編集します
最初の記事では、公園の友人がブロガーに業界内で編集の効果をサポートできるかどうか尋ねました。答えはイエスでした。効果を見てみましょう：
編集前
セルデータをクリックします
編集後、完了します
3。テーブルの行と列の組み合わせ
ブロガーは、特にページレポートを作成する場合、ランクアンドランクの合併には非常に一般的であると考えています。効果を見てみましょう：
現在のページは不完全です。クリックして入力して見てみましょう。それはどうですか？効果はかなり良いです。
4。テーブルデータのエクスポート
テーブルデータのエクスポートに関して、Bootstrap Tableは、Basic、All、Selectedの3つのモードのエクスポートをサポートします。つまり、現在のページのデータエクスポート、すべてのデータエクスポート、および選択されたデータエクスポートです。また、Common Excel、XML、JSON、その他の形式など、さまざまな種類のファイルのエクスポートをサポートしています。
現在のページをExcelにエクスポートします
テーブル内のすべてのデータをエクスポートします
選択した行データをエクスポートします
他のタイプのファイルのエクスポートについては、基本的にExcelと同じであるため、効果は表示されません。
2。テーブルロウスタイルコードの例
テーブル行のスタイル設定に関して、他の機能が最も基本的な関数です。なぜそれを3番目の記事に入れたのですか？ブロガーは、この関数がどこでも使用されると考えているためです。もちろん、効果は難しくありません。また、jQueryを使用してTRの背景色を達成することもできますが、ブロガーは、ブートストラップテーブルが行の背景色を設定するメカニズムを提供するため、組み込みのAPIを使用してみませんかと考えています。それを実装する方法を見てみましょう。
テーブルを初期化するとき
// table $（ '＃tb_order'）。bootstraptable（{url： '/tablested/get -order'、// request url（*）メソッド： 'get'、// request method（*）// toolbar： '#toolbar'、// toolbar '、// toolbar spriped by the tool cachこのプロパティを設定する（*）ページネーション：true、//ページングを表示するかどうか（*）sortable：false、// sortorder： "asc"、//メソッドqueryparams：otableinit.queryparams、// pagination parameters（*）サイドページネーション： "server"、// pagination：client pagination、pagination（最初のページ、デフォルトの最初のページページサイズ：//ページあたりのレコード行数（*）ページリスト：[10、25、50、100]、//選択する（*）検索：true、//この検索はクライアント検索であり、サーバーに入ることはありませんか？ showrefresh：true、//更新ボタンは最小コントコラムを表示しますか：2、//列の最小数はclicktoselectを許可しました：//クリックする場所の高さを選択できます。詳細な表示とリストビューのトグルボタンcardview：//詳細ビュー詳細ビュー：false、// parent-child table rowstyle：function（row、index）{//ここには5 ['active'、 'success'、 'info'、 'warning'、 'and']; var strclass = " 'success'; //アクティブ} else} else if（row.order_status == "削除"）{strclass = 'danger';} elter {return {classes：strclass}}、columns：[{checkbox：true}、{field： 'order_no'、pitter： 'ord' oder oder '、' oder type '}、{field：' order_status '、title：' order status '}、{field：' arem '、title：' remarks '}、]}）;実際、このパラメーターに焦点が当てられています。
rowStyle：function（row、index）{//ここには5 ['active'、 'info'、 'allange'、 'danger']; var strclass = ""; if（row.order_status == "をスケジュールする"）{strclcrass = 'success'; 'danger';} else {return {};} return {classes：strclass}}、ブートストラップテーブルは、5のテーブルの行の背景色、つまり「アクティブ」、「成功」、「情報」、「警告」、「危険」をサポートしています。対応する背景色ごとに、コードを実行することで表示できます。この方法の返品値に関して、ブロガーは彼が最初にそれを使用したときに長い間それを研究しました。ブートストラップテーブルのルールによると、{classes：strclass}などのJSON形式のオブジェクトタイプを返す必要があります。
3。フォームラインの編集コードの例
テーブル編集に関しては、ブートストラップテーブルを使用して拡張する必要があるいくつかのJSファイル。
1.追加のJSファイルを紹介します
<link rel = "styleSheet" href = "// rawgit.com/vitalets/x-editable/master/dist/bootstrap3-edable/css/boottrap-editable.css"> <script src = "// rawgit.com/vitalets/x-editable/master/dist/bootstrap3-editable/js/bootstrap-editabutiation.js"></script> <script> <script src =/content/bootstrap-table/extensions/editable/boottrap-table-editable.js"> </script>
2。CSHTMLページでテーブルを定義するときは、2つの属性を追加します
<表ID = "TB_DEPARTMENTS"> <thead> <tr> <th data-field = "name" data-editable = "true">部門名</th> <th Data-field = "ParentName">優れた部門</th> <th Data-field = "level" data-editable = "true"> th> <th Data-field = "desc" "desc" "desc" " data-editable = "true"> descriptor </th> </tr> </tead> </table>
JSで初期化されている場合、ライティング方法は次のとおりです。
{field： "name"、title： "name"、editable：true}3. JSのテーブルを初期化するときにイベントを編集および保存します
$（ '＃tb_departments'）。bootstraptable（{url： '/editable/getdepartment'、// request url（*）メソッド： 'get'、// request method（*）toolbar： '#toolbar'、//ツールによって縞模様が縞模様になっているのはtrueです。このプロパティを設定する（*）ページネーション：true、//ページングを表示するかどうか（*）sortable：false、// sortorder： "asc"、//メソッドqueryparams：otableinit.queryparams、// passingパラメーター（*）サイドページネーション： "server"、// pagiange：firter paging、page paging（デフォルトのファーストページページサイズ：//ページあたりのレコード数（*）oneditablesave：function（field、row、oldvalue、$ el）{type： "post"、url： "/editable/edit"、data：{strjson：json.Stringify（row）}、{ed = int "alert"）成功 "）;}}、error：function（）{alert（" error "）;}、complete：function（）{}}）;}}）;重要なポイントは、このイベントの取り扱いを見ることです
oneditablesave：function（field、row、oldvalue、$ el）{$ .ajax（{type： "post"、url： "/editable/edit"、data：{strjson：json.stringify（row）}、cusces {alert（ "error"）;}、complete：function（）{}}）;}対応する方法は、保存されたロジックを自分で処理する必要があります。 4つのパラメーターフィールド、行、oldValue、および$ elは、現在の列の名前、現在の行のデータオブジェクト、更新前の値、および編集された現在のセルのjQueryオブジェクトに対応しています。
4。テーブルの行と列のマージコードの例
テーブルの行合併関数は、他のJSファイルへの参照を必要としません。 CSHTMLページでTable ColspanとRowspanを使用するだけで、それを実現する必要があります。
1。CSHTMLページ
<表ID = "TB_REPORT"> <THEAD> <TR> <TH COLSPAN = "4" DATA-VALIGN = "MIDDER" DATA-ALIGN = "CENTER"> Q1 </TH COLSPAN = "4" DATA-VALIGN = "DATA-ALIGN =" CENTER "> QUARTION </TH COLSPAN =" 4 "DATA-VALIGN = data-field = "totalcount" rowspan = "2" data-valign = "middle" data-align = "center">年次概要</th> </tr> <tr> <th data-field = "jancount" data-align = "center"> jan </th> <th data-field = "febcount" data-align = "febcount < data-align = "center"> 3月</th> <th data-field = "firstquarter" data-align = "center"> firstquarter </th data-field = "aprcount" data-align = "center"> 4月</th> <th data-field = "maycount" data-align = ">" data-align = "center"> jun </th> <th data-field = "secondquarter" data-align = "center"> quarter </th data-field = "data-align =" center "> 7月</th> <th data-field =" agucount data-align = "center" 8月< data-align = "center"> sep </th> <th data-field = "thirdquarter" data-align = "center"> Quarter 3 </th data-field = "octcount" data-align = "center"> 10月</th> <th data-field = "novcount" novcount "novcount" data-align = "center"> 11月< data-align = "center"> 12月</th> <th data-field = "forthquarter" data-align = "center">四半期4 </th> </tr> </thead> </table>
2。特別なJS初期化はありません
$（ '＃tb_report'）。bootstraptable（{url： '/groupColumns/getReport'、// request url（*）メソッド： 'get'、// request method（*）toolbar： '#toolbar'、// toolbarによってストライプされたコンテナは、trueで真っ直ぐかどうか、//このプロパティを設定する必要があります（*）ページネーション：true、//ページネーションを表示するかどうか（*）ソートを表示するかどうか： "asc"、//メソッドqueryparams：otableinit.queryparams、// passingパラメーター（*）サイドページネーション： "server"、//ページング方法：クライアントクライアントページング、サーバーページング（ //ページあたりのレコード行の数（*）Pagelist：[10、25、50、100]、//ページあたりの行数（*）}）;それはどうですか、それは簡単ですか？もちろん、一部の人々は、テーブル属性を使用して、JS初期化を使用せずにCSHTMLでURL、ページネーション、その他の情報を設定できると言っています。実際、そのAPIを見ると、初期化する各属性がテーブルの属性に対応することがわかります。 asを入力します
フォームに特別なイベントを処理する必要がない場合、まったく問題ありません。
5。テーブルデータエクスポートコードの例
テーブルデータのエクスポート関数には、JSサポートが拡張されたものも必要です。
1.追加のJSファイルを紹介します
<Script src = "〜/content/bootstrap-table/extensions/export/bootstrap-table-export.js"> </script> <script src = "// rawgit.com/hhurz/tablexport.jquery.plugin/master/tablexport.js"> </script
2。JSが初期化されている場合
$（ '＃tb_departments'）。bootstraptable（{url： '/export/getdepartment'、// request url（*）メソッド： 'get'、// request method（*）toolbar： '#toolbar'、//ツールボタンによってストライプされたコンテナがtrueであるかどうか、//このプロパティを設定する（*）ページネーション：true、//ページングを表示するかどうか（*）sortable：false、// sortorder： "asc"、//メソッドqueryparams：otableinit.queryparams、// passing parameters（*）didepagination： "client"などロード、デフォルトの最初のページページサイズ：//ページあたりのレコード行の数（*）ページリスト：[10、25、50、100]、//ページあたりの行数を選択する（*）clickToselect：true、showexport：true、//はexportdatatype表示されます：「基本」、//基本的な '、すべて' {exected'。 'name'、title： 'department name'}、{field： 'parentname'、title： 'superior Department'}、{field： 'level'、title： 'department level'}、{field： 'desc'、title： 'description'}、]}）;重要なポイントを見てみましょう：これら2つの属性
showexport：true、// exportdatatypeを表示するかどうか： "basic"、// basic '、' all '、' selected'.showexportは、エクスポートボタンを表示するかどうかを意味します。ExportDatatypeは、エクスポートモードが現在のページ、すべてのデータ、または選択したデータであるかどうかを意味します。
6。概要
上記は、それを実装するための関数と単純なコードの効果です。ブロガーは、解決すべきいくつかの問題があることを発見しました。
1.インライン編集の機能は、各セルをバックグラウンドに送信することです。これにより、データベースの頻繁な操作が発生し、不適切であると感じます。各行を背景に提出するより良い方法があるかどうかはわかりません。
2。エクスポート機能は非常に便利ですが、残念ながらIEブラウザーによってサポートされていません。ブロガーは公式ウェブサイトでこの例を試しましたが、IEはそれをエクスポートできないようです。検証されます。
上記は、編集者が紹介したJSコンポーネントシリーズのブートストラップテーブルコンポーネントアーティファクト[終了章]の関連コンテンツです。私はそれが誰にでも役立つことを願っています！