カテゴリ・ツリービューを表示するJavaScript jQueryのライブラリ

プログラミング
スポンサーリンク

カテゴリ・ツリービューを表示するJavaScript、jQueryのライブラリを探して、まとめてみました。

スポンサーリンク

jsTree　(サンプル、使い方、GitHub)

jsTreeは、ツリー構造をサポートするjQueryのプラグインです。

以下のような機能があります。

  • ドラッグ＆ドロップ
  • インラインでの編集、追加、削除
  • あいまい検索
  • キーボードナビゲーション
  • 3状態・トライステートのチェックボックス
  • カスタマイズ可能なノードタイプ

 

↓jsTreeの公式サイトはコチラ

・https://www.jstree.com/

 

↓jsTreeのサンプルデモサイト、使い方

・https://www.jstree.com/demo/

 

↓jsTreeのGitHubソース

・https://github.com/vakata/jstree

 

jsTreeは、ツリー表示をサポートするJavaScriptライブラリの中で、最も機能が豊富で、最も使われていると思われます。

どれを使うか悩んだ場合は、jsTreeを使うことをお勧めします。

 

jqTree (使い方、チェックボックス)

jqTreeは、HTMLでツリー構造をHTMLで表示するjQueryのウィジェットです。

JSONデータをサポートし、ajaxを使ってドラッグ＆ドロップを可能にします。

 

↓jqTreeの公式サイトはコチラ

・https://mbraak.github.io/jqTree/

 

↓jqTreeのGitHubソース

・https://github.com/mbraak/jqTree

 

jqTreeでもチェックボックスの表示は可能です。

以下にサンプルがあります。

・http://www.trirand.net/demo/javascript/jqtreeview/clientside_api/index.html

 

Fancytree (使い方、ダウンロード)

Fancytreeは、JavaSctiptのライブラリです。

 

↓Fancy treeの公式サイト、ダウンロードはコチラ

・https://github.com/mar10/fancytree

 

↓Fancytreeの使い方、サンプルはコチラ

・http://wwwendt.de/tech/fancytree/demo/

 

rc-tree (npm、サンプル)

rc-treeは、jQueryではなくて、React.jsのライブラリです。

 

↓rc-treeの公式サイトはコチラ

・https://www.npmjs.com/package/rc-tree

 

rc-treeは、npmでインストール可能です。

 

ツリービューを表示するJavaScript まとめ

JavaScriptでカテゴリ・ツリー表示をしたいなら、jsTreeを検討すべきです。

 

JavaScriptの関連記事

JavaScriptの関連記事をまとめてみました。

 

↓JavaScriptとPHPで変数を渡す方法

・https://urashita.com/archives/17619

 

↓JavaScriptでドラッグ＆ドロップしてサーバーへ送信

・https://urashita.com/archives/27739

 

スポンサーリンク