TreeGrid
Grid Component

編集可能なツリー構造グリッド、Excel ライクな操作性、高速なデータ処理をあなたの Web アプリケーションに。

オンラインデモを見る
TreeGrid UI

TreeGrid は、ピュア JavaScript で実装された高機能 HTML グリッドコンポーネントです。
Ajax を駆使した高速なデータ操作、Excel ライクな編集機能、ツリー表示、計算式など、業務アプリケーションに必要な機能を網羅しています。

TreeGrid の主な機能

データ入力・表示に革命を起こす多彩な機能

編集と操作

  • Excelライクなセル編集 (F2キー、直接入力)
  • 複数行・列の選択と一括操作 (コピー、貼り付け、削除)
  • 行の追加、削除、移動 (ドラッグ＆ドロップ)
  • 編集内容の取り消し (Undo) とやり直し (Redo)
  • 入力値のバリデーションとエラー表示

ツリーとグループ化

  • 無制限の深さを持つツリー構造の表示
  • 列の値に基づく自動グループ化 (ドラッグ＆ドロップで設定可)
  • マスター/詳細表示 (ネストされたグリッド)
  • ピボットテーブルによる2次元集計
  • 行の展開・折りたたみ状態の保存

計算と数式

  • Excel互換の計算式エンジン搭載
  • 400以上の組み込み関数
  • セル間の複雑な依存関係の自動解決
  • 列全体または行全体の集計計算
  • JavaScriptによるカスタム関数の定義

フィルタとソート

  • 複数列による多重ソート
  • Excelライクなフィルタメニュー
  • 条件式による高度なフィルタリング
  • 全文検索機能
  • サーバーサイドでのフィルタ・ソート処理のサポート

技術仕様とカスタマイズ

データ連携

JSON または XML 形式でのデータ入出力に対応。Ajax 通信により、サーバー側のバックエンド（PHP, ASP.NET, Java, Node.js等）とシームレスに同期します。

ページングとパフォーマンス

クライアントサイドおよびサーバーサイドのページング（Paging）に対応。数万行〜数百万行の大規模データでも、スマートレンダリングにより高速に表示します。

エクスポート

グリッドの内容を Excel (.xlsx), CSV, HTML 形式でエクスポート可能。見た目を維持したまま PDF への出力や印刷もサポートしています。

動作環境

IE/Edge
Microsoft Edge / IE

Edge (Chromium)
IE 6 - 11

Chrome
Google Chrome

Latest Versions
Android Chrome

Firefox
Mozilla Firefox

Latest Versions

Safari
Apple Safari

macOS / iOS

対応フレームワーク

Angular, React, Vue, Svelte など、あらゆる JavaScript フレームワークと組み合わせて利用できます。TypeScript 定義ファイルも提供しています。

サーバーサイド

PHP, ASP.NET (C#), Java (JSP), NodeJS など、任意のサーバーサイド技術と容易に統合できます。データは標準的な JSON または XML でやり取りします。

ページトップへ