Treeview プラグイン | AdminLTE v3.2 ドキュメンテーション

Treeview プラグインは、ネストされたリストをサブメニューを展開できるツリービューに変換します。

使用方法

このプラグインは、jQuery プラグインとして、またはデータ API を使用してアクティベートできます。

データ API

プラグインをアクティベートするには、任意の ul または ol 要素に data-widget="treeview" を追加します。

<ul data-widget="treeview">
  <li><a href="#">One Level</a></li>
  <li class="nav-item">
    <a class="nav-link" href="#">Multilevel</a>
    <ul class="nav-treeview">
      <li><a href="#">Level 2</a></li>
    </ul>
  </li>
</ul>

jQuery

$('ul').Treeview(options)

オプション

名前	タイプ	デフォルト	説明
animationSpeed	数値	300	スライドダウン/アップアニメーションの速度（単位はミリ秒）。
accordion	ブール値	TRUE	別のメニューを展開すると、開いているメニューが折りたたまれるかどうか。
trigger	文字列	`[data-widget="treeview"] .nav-link`	クリックに対応して兄弟のサブメニューを展開または折りたたむ要素のセレクター。
expandSidebar	ブール値	FALSE	サブメニューのオープン時にサイドバーを展開するかどうか。
sidebarButtonSelector	文字列	`[data-widget="pushmenu"]`	サイドバーボタンのセレクター。

ヒント!

データ属性を通じてオプションを使用できます。例：
<ul data-widget="treeview" data-accordion="false">...</ul>

重要事項!

メインサイドバーツリービューの横に複数のツリービューを使用する場合は、すべてのツリービューに ID タグを追加する必要があります。
<ul data-widget="treeview" id="someIdNameOrSo" data-accordion="false">...</ul>

イベント

イベントタイプ	説明
expanded.lte.treeview	サブメニューが展開された後にトリガーされます。
collapsed.lte.treeview	サブメニューが折りたたまれた後にトリガーされます。
load.lte.treeview	データ API を介してプラグインが初期化された後にトリガーされます。

例: $('ul').on('expanded.lte.treeview', handleExpandedEvent)