概要と依存関係
Bootstrap Treeview は、jQuery および Bootstrap フレームワーク上で動作するツリー構造表示プラグインです。階層データを視覚的に表現するために使用されます。動作させるためには、以下のライブラリバージョン以上が必要となります。
- Bootstrap: v3.0.0 以上（推奨 v3.3.4）
- jQuery: v1.9.0 以上（推奨 v2.1.3）
インストール方法
パッケージマネージャーを使用してプロジェクトに追加するのが推奨されます。Bower または npm を利用できます。
$ bower install bootstrap-treeviewあるいは npm を使用する場合：
$ npm install bootstrap-treeview基本的な実装
プラグインを機能させるには、必要な stylesheet と javascript ファイルを HTML に読み込ませる必要があります。
<!-- 必須スタイルシート -->
<link href="bootstrap.css" rel="stylesheet">
<!-- 必須スクリプト -->
<script src="jquery.js"></script>
<script src="bootstrap-treeview.js"></script>ツリーを表示するための DOM 要素を準備します。
<div id="nav-tree"></div>JavaScript 側でプラグインを初期化し、データバインディングを行います。
$(document).ready(function() {
function generateNodeData() {
// ツリー構造データを生成または取得する処理
return hierarchyData;
}
$('#nav-tree').treeview({
data: generateNodeData()
});
});データ構造の定義
ツリーの階層を表現するには、ネストされた JavaScript オブジェクトの配列を渡す必要があります。最下層のノードは単純なオブジェクトで構成され、最低限 text プロパティが必要です。
var hierarchyData = [
{
text: "Main Section",
nodes: [
{
text: "Sub Item A",
nodes: [
{ text: "Detail A-1" },
{ text: "Detail A-2" }
]
},
{
text: "Sub Item B"
}
]
},
{
text: "Secondary Section"
}
];各ノードオブジェクトには、表示制御や状態管理のための追加プロパティを定義できます。
{
text: "Node Label",
icon: "glyphicon glyphicon-folder-close",
selectedIcon: "glyphicon glyphicon-folder-open",
color: "#333333",
backColor: "#ffffff",
href: "#link-target",
selectable: true,
state: {
checked: false,
disabled: false,
expanded: true,
selected: false
},
tags: ['new'],
nodes: []
}また、アプリケーション固有のデータ（例：権限 ID や URL など）をオブジェクト内に含めておくことで、イベント発生時に参照することが可能です。
ノードプロパティの詳細
- text (必須): ノードに表示されるテキスト。
- icon (任意): テキスト左側に表示するアイコンクラス。
- selectedIcon (任意): 選択時に表示するアイコンクラス。
- color (任意): テキスト色（グローバル設定を上書き）。
- backColor (任意): 背景色（グローバル設定を上書き）。
- href (任意): ノードクリック時のリンク URL。
- selectable (任意): 選択可能かどうか（false の見出し専用ノードなど）。
- state (任意): 初期状態（checked, disabled, expanded, selected）。
- tags (任意): ノード右側に表示するバッジ情報。
設定オプション
初期化時にオプションオブジェクトを渡すことで、ツリー全体の見た目や挙動をカスタマイズできます。
$('#nav-tree').treeview({
data: hierarchyData,
levels: 3,
backColor: '#e8f4f8',
borderColor: '#cccccc'
});主要なオプション設定は以下の通りです。
- data: ツリー構造データ（必須）。
- levels: 初期展開する階層数（デフォルト: 2）。
- backColor: 全体の背景色。
- borderColor: コンポーネントの枠線色。
- enableLinks: ノードテキストをリンクとして扱うか。
- multiSelect: 複数選択を許可するか。
- showCheckbox: チェックボックスを表示するか。
- showTags: タグ（バッジ）を表示するか。
- highlightSelected: 選択ノードを強調表示するか。
- expandIcon / collapseIcon: 展開・折りたたみアイコンのクラス名。
API メソッド
プラグインインスタンスに対してメソッドを呼び出すことで、プログラムからツリー操作を行います。呼び出し方は主に 2 通りあります。
1. プラグインのラッパー経由：
$('#nav-tree').treeview('methodName', args);2. インスタンス直接取得：
$('#nav-tree').data('treeview').methodName(args);主要メソッド一覧
- expandAll(options): 全ノードを展開。
- collapseAll(options): 全ノードを折りたたみ。
- expandNode(nodeId, options): 指定ノードを展開。
- selectNode(nodeId, options): 指定ノードを選択。
- checkNode(nodeId, options): 指定ノードをチェック。
- disableNode(nodeId, options): 指定ノードを無効化。
- search(pattern, options): 文字列検索およびハイライト。
- getSelected(): 選択中のノード配列を取得。
- getExpanded(): 展開中のノード配列を取得。
- remove(): ツリービューを削除。
多くのメソッドは silent: true オプションを受け取り、イベント発火を抑制できます。
$('#nav-tree').treeview('expandAll', { levels: 2, silent: true });イベント処理
ツリーの状態変化を検知するためにイベントが用意されています。初期化オプションのコールバック、または jQuery の .on() メソッドでリスナーを登録可能です。
オプションコールバック例：
$('#nav-tree').treeview({
onNodeSelected: function(event, data) {
console.log('Node selected:', data.text);
}
});jQuery イベントバインディング例：
$('#nav-tree').on('nodeSelected', function(event, data) {
// 選択時の処理
});利用可能なイベント
nodeSelected: ノード選択時nodeUnselected: 選択解除時nodeExpanded: ノード展開時nodeCollapsed: ノード折りたたみ時nodeChecked: チェックオン時nodeUnchecked: チェックオフ時searchComplete: 検索完了時