カテゴリ・ツリービューを表示する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