ブートストラップテーブル使用の概要
Bootstrap-Tableは、データを表示するために特別に使用されるBootstrap-Tableに基づいて書かれたテーブルプラグインです。 BootstrapはTwitterのもので、現在最も人気のあるフロントエンドフレームワークです。 BootstrapはHTML、CSS、およびJavaScriptに基づいており、シンプルで柔軟なフロントエンド開発の利点があります。ここではブートストラップと同じことは説明しません。この記事では、私のプロジェクトでBootstrap-Tableを使用することとそれを学ぶ方法についての私の理解のいくつかを説明することに焦点を当てます。
まず、JQuery、Bootstrap、およびBootstrap-Tableの関係を説明しましょう。ブートストラップコードの多くの部分にはjQueryが含まれます。つまり、ブートストラップはjQueryに依存し、使用するブートストラップテーブルはブートストラップに基づいて作成されるため、ブートストラップテーブルを使用する前に、jqueryとbootstrapの関連JSおよびCSSファイルを参照する必要があります。
次に、ブートストラップテーブルの特性：jQuery-ui、jqgrid、およびその他のテーブルディスプレイプラグインを使用すると、ブートストラップテーブルはフラットで軽量です。軽量のデータディスプレイには十分であり、父と息子のテーブルなどのサポートも非常に優れています。最も重要なことは、他のブートストラップタグとシームレスに組み合わせることができることです。
さて、それはすべて紹介のためです。コードとレンダリングを直接アップロードしてから、さらに議論します。
<！doctype html public " - // w3c // dtd xhtml 1.0 strict // en" "http://www.w3.org/tr/xhtml1/dtd/xhtml1-sttrict.dtd"> <head> <title> content = "text/html; charset = utf-8"/> <meta name = "description" content = ""/> <meta name = "keywords" content = ""/> <script type = "text/javascript" src = "./ js/jquery-2.2.1.js"> </> <script = "テキスト/javascript" "" "" " src = "./ bootstrap/js/bootstrap.min.js"> </script> <script type = "text/javascript" src = "./ bootstrap-table/bootstrap-table-all.js"> </script> <script type = "text/javascript" " src = "./ bootstrap-table/locale/bootstrap-table-zh-cn.js"> </script> <link rel = "styleSheet" type = "text/css" href = "./ css/bootstrap.min.css"> <link rel = "TypeLesheet href = "./ bootstrap-table/bootstrap-table.min.css"> </head> <script language = "javascript"> </script> <body> <div> <div> <div> div> <h3>追加教師アカウント</h3> </div> <div> <div = "TIMEBAR aria-hidden = "true"> </span> modify </button> <button id = "btn_delete" type = "button"> <span aria-hidden = "true"> </span> delete </button> </div> <table id = "teacher_table" data-toggle = "table" dataurl = "。 data-toolbar = "＃toolbar" data-pagination = "true" data-search = "true" data-show-refresh = "true" data-show-toggle = "true" data-page-size = "5"> <tr> <th data-field = "name">ユーザーアカウント</th <th data-field < data-field = "t_name">教師名</th> </tr> </table> </div> </div> </div> </body>
複製画像：
次に、上記のコードの意味を手順で分析しましょう。
1.まず、対応するJQuery Bootstrap Bootstrap-Tableパッケージをダウンロードする必要があります。オンラインでチュートリアルがあり、ここでダウンロードする方法については説明しません。
上記の<head>タグのJSおよびCSSファイル名への参照から、これらのファイルを導入する必要があることがわかります。
ブートストラップに注意してください。コンパイルされた圧縮パッケージには3つのフォルダーのみがあります。
1.jquery-2.2.1.js ---最新のjQueryファイル
2.bootstrap.min.js ---最新のbootstrap.min.jsブートストラップ/jsの圧縮ファイル
3.bootstrap.min.css ---最新のbootstrap.min.cssは、Bootstrap/cssの圧縮ファイルです
4.BootStrap-Table-All.js --- Bootstrap-Tableの下の最新のJSファイル
5.BootStrap-Table-Zh-Cn.js --- Bootstrap-Table/Localeの下の最新の中国の初期ファイル
6.bootstrap-table.min.css ---ブートストラップテーブルの下の最新のCSS圧縮ファイル
これらの6つを構成する必要があり、その中にBootstrap-Table-Zh-Cn.jsは中国語をサポートするJSファイルです。このファイルがロードされた場合にのみ、テーブル表示情報の一部が中国語に設定されます。
Bootstrap-Table-Zh-Cn.jsを削除した後、ディスプレイ効果を試してみましょう。
もちろん、ディスプレイ情報を他の言語に設定することもできます。BootStrap-Table-Zh-Cn.jsを他の言語のJSファイルに置き換えるだけです。ブートストラップテーブルパッケージにはサポートがあります。
このファイルのソースコードを見ることもできます。見てみましょう。このファイルが何をするかを知ることができます。
/** * BOOTSTRAPテーブル中国語翻訳 *著者：Zhixin wen <[email protected]> */（function（$）{'strict'; $ .fn.bootstraptable.locales ['zh-cn'] = {formatloadingmessmessage：fultid 'hard' hard 'forms forms forms formad：' force furty（）{formatloadingmessage（） （PageNumber） 'Per PageNumber +' Record}、formatshownows：function ' + pagefrom +' + pageto + 'record、' totalRows + 'curtione' {No Matching Record}、Function（）{formatresh：function（）{return 'repress（）{return' switch '; 'REFREST'、formattoggle（）{return 'switch';
JSファイルを引用した後、ロードすると、初期化効果を祈ることがわかります。表示された情報を対応する中程度のコンテンツに変換します。
2。次に、関連するHTMLコードについて説明しましょう。実際、これはBootstrap-Tableに関連するHTMLコードの唯一の部分です。
<表ID = "Teacher_table" data-toggle = "table" data-url = "./ data.php" data-method = "post" data-query-params = "queryparams" data-toolbar = "＃toolbar" data-pagination = "true" data search = "data-show-reresh =" true "frue" shoh "" shoh " data-page-size = "5"> <thead> <tr> <th data-field = "name"> userアカウント</th> <th data-field = "pwd">ユーザーパスワード</th> <th data-field = "t_name">教師名</th> </tr> </thead> </table>
はい、テーブルタグは1つだけに加えて、多くのパラメーターがあり、これらのパラメーターを使用してテーブルの形式が実装されています。どんなスタイルと機能があるかを知っておく必要があります。それらをリストするだけで、それは間違いなくバケツのドロップになります。人々に釣り方を教えるよりも、人々に釣り方を教える方が良いです。これらのカテゴリを見つける場所を教えてください。クラスの意味。 Bootstrap-Tableの専門的なWebサイトにアクセスして、使用しているリンクを見つけることができます。クリックしてリンクを開きます。無効な場合は、http://bootstrap-table.wenzhixin.net.cn/documentationを直接入力できます
もちろん、この例でもいくつかの例を見ることができます
対応するパラメーターの意味をどのように確認しますか？上の写真が表示されている場合、右側はいくつかのオプションです。テーブル属性、行属性、および設定できるバインディングイベントを選択できます。
テーブル属性テーブルオプションをクリックして、次の図を表示します。まず、タイトル名がJSにテーブルを作成するために使用され、属性がHTMLに使用されてテーブルを作成することがわかります。
いくつかの例を示すために、上記のコードにはいくつかのパラメーターがあります。彼らが意味するのは：
Data-URL：データを要求するためのURL。
データメソッド：リクエスト方法。
データハイト：テーブルの高さを設定します
data-query-params = "queryparams"：設定
data-toolbar = "＃toolbar"：ボタンがIDであるコンテナを設定します。
data-pagination = "true"：ページ番号を表示するかどうかを設定します
data-search = "true"：検索ボックスを設定します
data-show-refresh = "true"：更新ボタンを設定します
data-show-toggle = "true"：データ表示形式を設定します
今、あなたはそれをチェックする方法を理解する必要があります！
次のコードがコアであり、<tr>はグリッドを連続して表し、data-field = "name"はグリッドのデータ名を連続して表すことに注意してください。バックグラウンドから送信されたデータは、データフィールドに基づいて区別され、誰に送信されるため、データフィールドとしてIDとして理解できます。
<tr> <th data-field = "name">ユーザーアカウント</th> <th data-field = "pwd">ユーザーパスワード</th> <th data-field = "t_name">教師名</th> </tr> </thead>
HTML静的生成を使用したくない場合は、JSを使用して動的生成を生成することもできます。コードデモを指定するには、関連するパラメーターを設定するには、名前：上記のオプションを使用する必要があります。たとえば、htmlでデータ要求の宛先ファイルdata-urlを設定します： "./data.php" "in jsで、url：" ./data.php "を宣言するだけです
$（ '＃table'）。bootstraptable（{columns：[{field： 'id'、title： 'item id'}、{field： 'name'、title： 'item name'}、{field： 'fird'、 'アイテム価格'}]、データ：[{id：1、name 1、 'item 1'、 '$ 1'}、 '$ 1：' $ 1： '$ 1'} }]}）;3。このようにして、他のコードは何をするのか、コードの一部はブーストラップのパネルをフォーマットに使用します。つまり、パネルにテーブルを埋め込みます。削除されたパネルコード後のブートストラップテーブルの効果はこのようなものです
パネルがないというだけです。
4.データ送信の形式、Bootstrap-Tableが受信したデータはデフォルトでJSON形式のものです
あなたは上記で要求された背景アドレスが「./data.php」であることを見ることができます、そのコンテンツを見てみましょう
<？php $ results [0] = array（ "name" => "aoze"、 "pwd" => "20132588"、 "t_name" => "Zhang San"）; $ results [1] = array（ "name" => "lisi"、 "pwd" => "1234"、 "t_name" => "li si"）; $ results [2] = array（ "name" => "wangwu"、 "pwd" => "44455"、 "t_name" => "wang wu"）; echo json_encode（$ results）;？>
とても簡単です！もちろん、これは私が手作業で書いたテストデータにすぎません。もちろん、プロジェクトのデータベースから見つかります。
5。もちろん、データを表示するだけでは不十分です。削除機能や変更機能など、テーブルと対話する必要があります。現時点では、ブートストラップテーブルのイベントを使用する必要があります。上記の場合、図に示すように、テーブルに2つのボタンコンポーネントを埋め込みました
このモザイクを実装する方法は、テーブルのプロパティにこのようなラインデータツールバー= "＃ツールバー"を追加することです。
これは、ツールバーのラインにIDを備えたラベルをツールバーに追加することを意味します。
このプロジェクトの実装では、これらの2つのボタンを使用して、テーブル内の選択した行で対応する操作を実行する必要があります。
対応するイベントを作成し、最初に選択したトリガーイベントをテーブルにバインドしてから、GetSeLectrow関数を介して選択した行のデータを取得します。
$（ '＃Teacher_table'）。 function getSelectedRow（）{var index = $（ '＃teacher_table'）。find（ 'tr.success'）。data（ 'index'）; //選択した行のreturn $（ '＃teacher_table'）。それでも詳細に勉強したい場合は、ここをクリックして3つのエキサイティングなトピックを勉強して添付できます。
ブートストラップ学習チュートリアル
ブートストラップ実用的なチュートリアル
ブートストラップテーブルの使用チュートリアル
ブートストラッププラグインの使用チュートリアル
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。