12個のJavascriptテーブルコントロール(DataGrid)が整理されています

12個のJavascriptテーブルコントロール(DataGrid)が整理されています
DataGrid コントロールの DataSource プロパティがデザイン時に設定されている場合、コントロールにはデータ ソースからのレコードセットが自動的に設定され、その列ヘッダーが自動的に設定されます。その後、グリッドの列を編集して、列ヘッダーを削除、並べ替え、追加したり、列の幅を調整したりできます。

1. フレキシグリッド

Flexigrid

Flexigrid は Ext Grid に似たグリッドですが、jQuery に基づいて開発されています。調整可能な列幅、列ヘッダーの結合、ページング、並べ替え、テーブルの表示/非表示などの機能があります。 Flexigrid によって表示されるデータは、Ajax 経由で取得することも、通常のテーブルから変換することもできます。

2. Yahoo! UI ライブラリ: DataTable (デモ リンク)

Yahoo! UI Library: DataTable

DataTable コントロールによって提供される機能には、並べ替え、列幅の調整、ページング、インライン編集、行の選択などがあります。

3. jqグリッド

jqGrid

jqGrid は Ajax 化された jQuery グリッド プラグインです。ページング機能、テーブル内のレコードの追加、編集、削除、検索を提供し、XML、JSON、配列などの複数のデータ型入力、複数行の選択、サブテーブルのサポート、統合された日付選択コントロールなどをサポートします。

4. tableFormSynch (デモアドレス)

tableFormSynch は、テーブルとフォームのデータを相互に更新する jQuery プラグインです。提供される機能には、フォーム内のデータに基づいて新しい行を追加する機能が含まれます。選択した行を削除し、フォーム内のすべてのデータをクリアします。 tableFormSynchは、チェックボックス、ラジオボタン、選択など、すべてのフォームコントロールをサポートします。

5. データテーブル

DataTables

DataTables は、HTML テーブルでページング、フィルタリング、複数列の並べ替えを簡単に実装できる jQuery プラグインです。 DataTables では独自の CSS スタイルを使用できますが、必要に応じて CSS スタイルをカスタマイズすることもできます。以下の機能があります:

  • 適応列幅
  • テーブルの状態を保存できます
  • 非表示の列
  • 動的にテーブルを作成する
  • Ajaxによるデータの自動読み込み
  • 豊富なページングタイプ
  • 複数列の並べ替えと強調表示

6. オムニグリッド

OmniGrid

OmniGrid は、Mootools1.2 を使用して開発されたテーブル コントロールであり、FlexGrid jQuery や SortableTable に似ています。ページング、ソート、Ajax データの読み込み、テーブル データの追加/変更/削除機能などを備えています。

7. moodgets Grid (デモアドレス)

moodgets Grid

moodgets Grid は、Mootools フレームワークに基づいて開発された、使いやすく拡張可能なテーブル コントロールです。ドラッグして表の列幅を調整したり、並べ替えたり、複数行または単一行を選択したり、表のセルをクリックして編集したり、ページングしたり、Ajax 経由でデータをロードしたりできます。

8. MyTableGrid (デモアドレス)

MyTableGrid

MyTableGrid は、Prototype フレームワークに基づいて開発された DataGrid コントロールであり、データをより簡単に参照でき、より柔軟な方法で表示するために使用されます。 Ajax 対応の高速ページング機能やデータソート機能を提供し、データ列の幅をドラッグして調整したり、表示する必要のない列を非表示にしたりすることができます。

9. GTグリッド

GT-Grid

国内企業は、GT-Grid を世界クラスのリスト コンポーネントとして構築し、さまざまなアプリケーションをサポートすることを目指しています。純粋なクライアント アプリケーションにすることも、組み込みの JAVA サーバーをクライアントとして選択することもできます。

10. obout v3 ASP.NET 用グリッド

obout v3 Grid for ASP.NET

より高速な Asp.net グリッド。その優れた点は、わずか1秒で数百万のデータレコードを読み込むことです。

11. テーブルウィジェット(デモアドレス)

Table widget

このコントロールは、通常の HTML テーブルを固定ヘッダーを持つ並べ替え可能なテーブルに変換できます。

12. jExpand(デモアドレス)

jExpand

jExpand はテーブルをスケーラブルにする jQuery プラグインです。この機能を使用すると、テーブルをより適切に整理し、画像、リスト、グラフ、その他の要素など、より多くの情報をテーブルに含めることができるようになります。

<<:  UnityはMySQLに接続し、テーブルデータの実装コードを読み取ります

>>:  JavaScriptカルーセルの実装について

推薦する

JavaScript プロトタイプとプロトタイプチェーンの深い理解

目次1. プロトタイプとは何ですか? 2. プロトタイプ__プロト__ 4. コンストラクター5. ...

ES6スプレッド演算子の使用例

目次スプレッド演算子とレスト演算子とは何ですか?配列スプレッド演算子残り演算子(コレクション関数)ス...

easycomモードでUNI-APPコンポーネントを呼び出す際に習得する必要がある実践的なスキル

この記事は議論の出発点となることを目的としています。詳細なドキュメントと easycom の仕様につ...

Vue要素ツリーコントロールに点線を追加する詳細な説明

目次1. 成果を達成する2. 実装コード3. その他の実装要約する1. 成果を達成する 2. 実装コ...

静的ページと動的ページの実行メカニズムの説明

1. 静的ページとは、Web ページ内に HTML タグのみが含まれるページです。WEB 開発者がこ...

MySQL が UNION を使用して 2 つのクエリを接続できない理由の詳細な説明

概要連合接続データセットキーワードは、2つのクエリ結果セットを1つに連結し、同一のレコードを除外する...

シンプルなカルーセルの最も完全なコード分析を実装するJavaScript(ES6オブジェクト指向)

この記事では、シンプルなカルーセルを実装するためのJavaScriptの具体的なコードを参考までに紹...

Vueコンポーネントが相互に値を転送する方法の詳細な説明

目次概要1. 親コンポーネントが子コンポーネントに値を渡す2. 子コンポーネントが親コンポーネントに...

iviewは動的なフォームとカスタム検証期間の重複を実装します

フォーム項目を動的に追加するiview の動的なフォーム追加は非常に簡単です。フォーム項目を配列に設...

CSSを使用してAndroidシステムの読み込みアニメーションを実装する

Web には一般的な読み込みアイコンが 2 つあります。1 つは iOS の「菊」、もう 1 つは ...

MySQL 8.0の落とし穴の詳細な説明

本日、MySQL 8.0 をアップデートしました。最初の問題: Navicatがデータベースに接続で...

忘れられたボタンタグ

注:この記事は他の人によって翻訳されていますが、考えるべき点が多く、理解しにくい点もあると感じていま...

MySQL 8.0.18 のインストールと設定方法のグラフィックチュートリアル (Windows 10 版)

この記事は、参考のためにMySQL 8.0.18のインストールと設定のグラフィックチュートリアルを記...

Tomcat 実行時の JVM エンコーディングの問題を修正

質問:最近、プロジェクトを展開すると文字化けしたデータが出てきました。確認したところ、プロジェクトは...