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

推薦する

Vue+Spring Bootで検証コード機能を実現

この記事では、検証コード機能を実装するためのvue+spring bootの具体的なコードを例として...

W3C チュートリアル (9): W3C XPath アクティビティ

XPath は、XML ドキュメントの一部を選択するための言語です。 XPath は、XSLT、XQ...

MySQL 文字列分割操作 (区切り文字を含む文字列のインターセプション)

区切り文字なしの文字列抽出質問の要件データベース内のフィールド値:実装効果: 1行のデータを複数行に...

Virtualbox に Centos7 仮想マシンをインストールする詳細なグラフィック チュートリアル

1. Centos7をダウンロードするダウンロードアドレス: https://mirrors.tun...

vue+elementui+vuex+sessionStorage を使用して履歴タグ メニューを実装するためのサンプル コード

一般的には、左側にメニューがあった後、ページの上部に履歴タブ メニューを追加する必要があります。他の...

JavaScript のクロージャによって発生する問題を回避する

閉鎖による問題を回避するためのletについてオブジェクト指向の考え方を使用して、購入者情報の削除機能...

CSS3で実装された水平ヘッダーメニュー

結果:実装コードhtml <nav class="dropdownmenu"...

JDBC を使用して Mysql データベースに接続する際に発生する可能性のある問題の概要

まず、いくつかの概念を明確にします。 JDBC: Javaデータベース接続、Oricalによって規定...

Vue3.0 でページング コンポーネントを手動でカプセル化する方法

この記事では、vue3.0の手動カプセル化ページングコンポーネントの具体的なコードを参考までに紹介し...

ウェブページを作成するために最もよく使用されるHTMLタグ

1. よく使われるHTMLタグの最適化HTML は Web 編集者にとって基本的なスキルであるべきで...

Macシステムをインストールした後にVMWareがフルスクリーンで表示できない問題を解決する

システム: VMTOOLs ダウンロード:リンク: https://pan.baidu.com/s/...

CMD で MySQL データベースを操作するときに中国語の文字化けが発生する問題の解決方法

Baiduで検索しました。 。 chcp コマンドを使用して、cmd の文字エンコーディングを 65...

シンプルなCSSアニメーションのtransition属性の詳しい説明

1. 遷移属性の理解1. transition 属性は、次の 4 つの遷移プロパティを設定するために...

CSS マルチレベルメニュー実装コード

これは、Web ページを Windows のスタート メニューなどのデスクトップ プログラムのように...

CentOS プラットフォーム上で LAMP 環境を素早く構築する方法

この記事では、例を使用して、CentOS プラットフォーム上で LAMP 環境を迅速に構築する方法に...