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カルーセルの実装について

推薦する

Linuxはscpコマンドを使用してファイルをローカルコンピュータにコピーし、ローカルファイルをリモートサーバーにコピーします。

以下のように表示されます。リモート サーバーのファイルをローカルにコピーします。 scp -r -P...

JavaScriptを使って動的にテーブルを生成するケースの詳しい説明

目次序文実装のアイデア実装コード成果を達成する序文これは、テーブルを動的に追加する例です。[追加] ...

MySQLインデックスの簡単な分析

データベース インデックスは、テーブル操作の速度を向上させることを目的としたデータ構造です。高速なラ...

uni-appがNFC読み取り機能を実装

この記事では、参考までに、NFC読み取り機能を実装するためのuni-appの具体的なコードを紹介しま...

TeamCenter12 にログインする際の 404/503 問題の解決方法

TeamCenter12はアカウントのパスワードを入力し、ログインをクリックすると、404または50...

Vue コンポーネント ライブラリ ElementUI はテーブル読み込みツリー データのチュートリアルを実装します

ElementUIは、参考のためにテーブルツリーリストの読み込みチュートリアルを実装しています。具体...

WindowsX Hyper-V ベースの CentOS システムをインストールする

現在、Linux を使用するほとんどの人は、クラウド サーバーを使用するか、Windows 上に仮想...

マウスを傾けた状態でのフリップナビゲーションの問題に関する研究

この記事では、マウス フリップナビゲーションの制作についてまだ疑問を持っている友人の役に立つことを期...

MySQLのデフォルトのソートルールに基づく落とし穴

MySQL のデフォルトの varchar 型は大文字と小文字を区別しません (insensitiv...

LinuxベースのSelenium環境を構成し、操作を実装する

1. Linux で Selenium を使用する1. Chromeをインストールする次のコマンドを...

nginx をプロキシ キャッシュとして使用する方法

キャッシュを使用する目的は、バックエンドの負荷を軽減し、Web サイトの同時実行性を向上させることで...

Mysql テーブルコメントフィールド取得操作

余計なことは言わないで、コードだけ見てみましょう〜 -- テーブル内のフィールドコメントを表示および...

Vueカスタムカプセル化ボタンコンポーネント

Vueボタンコンポーネントのカスタムカプセル化コードは参考用です。具体的な内容は次のとおりです。ボタ...

Vue 初心者ガイド: 最初の Vue-cli スキャフォールディング プログラムの作成

1. Vue - 最初の vue-cli プログラムVueの開発はNodeJSに基づいています。実際...

サブセットかどうかを判断するためのMySQLメソッドの手順

目次1. 問題2. 解決策オプション1:オプション2: 1. 問題この話は、エラーと脱落率を照会する...