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

<<:  MySQL 入門 - SQL 実行プロセス

>>:  JavaScript関数の詳細な紹介

推薦する

Win10 + Ubuntu20.04 LTS デュアルシステムブートインターフェースの美化

エフェクト表示組み込みのブートインターフェースがあまりにも醜いので、テーマをダウンロードして美しくし...

CSS3 での 2D および 3D 変換の実装

CSS3 は、要素の 2D 平面変換と視覚的な 3D 空間変換を実装します。2D 変換はより頻繁に使...

CSS3のボックスサイズプロパティの興味深いボックスモデルについての簡単な説明

誰もがボックス モデルの構成を、内側から外側まで、コンテンツ、パディング、境界線、マージンについて知...

Vueのログインとログアウトの詳細な説明

目次ログインビジネスプロセスログイン機能の実装要約するまず、エフェクトの実装プロセスを見てみましょう...

Dockerコンテナの中国語言語パックの設定の問題を解決する

Dockerでdocker search centosを使用する場合docker pull dock...

概要ページでのフロートとクリアフロート

1. フロート: 主な目的は、テキストを画像の周囲に折り返す効果を実現することです。また、複数列レイ...

CSS でフロートをクリアするための完全ガイド (要約)

1. 親divは疑似クラスafterとzoomを定義します <スタイル タイプ="...

MySQL フィールドで NOT NULL を使用する必要があるのはなぜですか?

私は最近新しい会社に入社したのですが、データベース設計にいくつか小さな問題があることに気付きました。...

jQuery でダイナミックなパーティクル効果を実現

この記事では、動的なパーティクル効果を実現するためのjQueryの具体的なコードを参考までに紹介しま...

Centos7 で NIS を構成する詳細な手順

目次原理ネットワーク環境の準備インストール前の準備NIS サーバー操作NIS クライアント操作原理N...

MySQL グラフィカル管理ツール Navicat のインストール手順

目次序文1. 全員にインストールパッケージを用意する2. Navicatをインストールし、Navic...

JavaScript 関数の高度な説明

目次関数定義方法関数呼び出し(6種類)これは問題を指摘している厳密モード高階関数閉鎖再帰: 自分自身...

MySQLインデックスを正しく作成する方法

インデックス作成は大学図書館の書誌インデックスの構築に似ており、データ検索の効率を向上させ、データベ...

JavaScript の setTimeout と setTimeinterval の使用例の説明

どちらの方法も、一定時間後に JavaScript コードを実行するために使用できますが、それぞれに...