ブートストラップでテーブルを操作する方法

今回はBootstrapでテーブルを操作する方法と、Bootstrapでテーブルを操作する際の注意事項を紹介します。

bootstrap-table は bootstrap-table に基づいて書かれており、データを表示するために特別に使用されるテーブル プラグインです。そしてブートストラップの由来は Twitter は現在最も人気のあるフロントエンド フレームワークです。 Bootstrap は HTML、CSS、JAVASCRIPT に基づいており、シンプルさ、柔軟性、迅速なフロントエンド開発という利点があります。ここではブートストラップとブートストラップについては説明しません。この記事では、プロジェクトでの bootstrap-table の使用とその学習方法についての私の理解の一部を説明することに重点を置きます。

まず、jquery、bootstrap、bootstrap-table について説明します。 三人の関係。ブートストラップ コードの多くの部分には jquery が含まれます。 Bootstrap は jquery に依存しており、使用したい bootstrap-table は bootstrap に基づいて作成されるため、bootstrap-table を使用する前に、jquery と bootstrap に関連する js ファイルと css ファイルを参照する必要があります。

次に、bootstrap-table の特徴ですが、 jquery-ui や jqgrid などのテーブル表示プラグインと比較すると、 bootstrap-table はフラットで軽量です。 一部の軽量なデータ表示には十分ですが、親子テーブルの場合は十分です。サポートも非常に優れており、最も重要なことは、他のブートストラップ タグとシームレスに組み合わせることができることです。

1. jsとcssを導入します

<!--css样式-->
<link href="css/bootstrap/bootstrap.min.css" rel="stylesheet">
<link href="css/bootstrap/bootstrap-table.css" rel="stylesheet">
<!--js-->
<script src="js/bootstrap/jquery-1.12.0.min.js" type="text/javascript"></script>
<script src="js/bootstrap/bootstrap.min.js"></script>
<script src="js/bootstrap/bootstrap-table.js"></script>
<script src="js/bootstrap/bootstrap-table-zh-CN.js"></script>

2. テーブルデータの入力

bootStrap テーブルからデータを取得するには、テーブルの data-url 属性でデータ ソースを指定する方法と、JavaScript でテーブルを初期化するときに URL を指定してデータを取得する方法があります。 2 番目の方法は、複雑なデータを処理する際に 1 番目の方法よりも柔軟です。一般に、2 番目の方法はテーブル データを埋めるために使用されます。

フィールド field は、データを表示するためにサーバーから返されたフィールドに対応している必要があります。

3. バックグラウンドでデータを取得します

a. サーブレットがデータを取得します

b. springMvc コントローラーでデータを取得するための対応するメソッド

<table data-toggle="table">
 <thead>
 ...
 </thead>
</table>
 ...

この記事の事例を読んだ後は、このメソッドを習得したと思います。さらに興味深い情報については、PHP 中国語 Web サイトの他の関連記事に注目してください。

推奨読書:

以上がブートストラップでテーブルを操作する方法の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。