Bootstrapは非常にメジャーで、Webを検索すると、たくさんの有用なライブラリがたくさんあります。
その中で、今回はツリービューを使ってみました。

家の中のネットワーク構成要素が増えてきて、どこに何があるか忘れてしまうので、それを管理するためのWebページを作ろうとしたことがきっかけです。

ツリービューのライブラリ

今回採用したライブラリです。

jonmiles/bootstrap-treeview
　https://github.com/jonmiles/bootstrap-treeview

私自身が、まだBootstrap v4に移行できてなく、v3.4.1を使っていて、どちらにも対応しているようでした。

ツリーの配置

HTMLに以下を記載します。

<linkrel="stylesheet"href="dist/css/bootstrap-treeview.min.css"><script src="dist/js/bootstrap-treeview.min.js"></script><divid="tree"></div>

ツリーの構築

こんな感じの配列を要します。

ノード = 
{
  text: “表示したい文字列”,
  nodes: [
    別のノード,
  ]
}

textを持ったオブジェクトを数珠つなぎするだけです。
nodesに、配下に持たせるオブジェクトを置くことで数珠つなぎになります。配下がない場合はnodesは無しで良いです。
ツリーの構築は、それを指定するだけです。

$('#tree').treeview({data:[ノード]});

今回のネットワーク管理の場合、このノードに自己利用の情報を持たせたかったので以下のようにしました。

functionmake_node(target){return{text:target.name,icon:target.icon,uuid:target.uuid,parent_uuid:target.parent_uuid,};}

uuidとparent_uuidは、ネットワーク管理で保持したい情報でして、bootstrap-treeviewに一緒に保持してもらっています。
textは先ほど説明しました。
iconは、CSSでアイコン名を指定すると、ツリーに表示してくれます。bootstra-treeviewの機能です。Bootstrap標準のglyphsに対応しているので、例えば、「glyphicon glyphicon-asterisk」と指定すれば、アスタリスクのアイコンが表示されます。また、もっとアイコンを増やすために、Font Awesomeのアイコンも追加しました。

Font Awesome
　https://fontawesome.com/

上記サイトにユーザ登録するとURLが指定されるのでそれをHTMLに含めるようにします。

<script src="https://kit.fontawesome.com/XXXXX.js"crossorigin="anonymous"></script>

XXXXは各自に合わせてください。
そうすることで、glyphsの代わりに、fas fa-desktop などが指定できるようになります。

ツリーのノード選択時のイベントトリガ

ツリーのノードを選択したときに、ちょっとした処理を追加したい場合があります。
そのために、bootstra-treeviewにはイベントトリガーの機能がついています。
以下を追記します。

$('#tree').on('nodeSelected',this.node_selected);

これで、いずれかのノードが選択されると、上記の場合、「this.node_selected(event, data)」が呼び出されます。(ツリーを構築するたびに上記の設定が必要です。)
手動でノードを選択する場合は、以下を呼び出します。

$('#tree').treeview('selectNode',[node]);$('#tree').treeview('revealNode',node);

ただし、すでに選択されている状態で同じノードを選択した場合は、トリガーされないので、注意が必要です。
revealNodeは選択したノードが見えるようにツリーを展開するためのものです。必須ではありません。

さて、上記のselectNodeででてきたnodeというオブジェクトはどこから取得するのでしょうか。
それは、this.node_selected(event, data)で返ってきたdata がそれです。ちょっとわかりにくいですが。

選択しないとnodeを取得できないのは厳しいので、ほかのやり方を模索します。
text検索ではsearchを使う方法があるのですが、別の基準で検索したい場合は、ちょっと強引ですが以下のやり方をとっています。

// UUIDからツリーのノードを検索search_node_uuid:function(uuid){vardata=$('#tree').treeview('getNode',0);returnsearch_tree_node(data,uuid);},functionsearch_tree_node(data,uuid){if(data.uuid==uuid)returndata;for(vari=0;i<data.nodes.length;i++){varnode=search_tree_node(data.nodes[i],uuid);if(node!=null)returnnode;}returnnull;}

nodeの指定方法として、nodeIdでも指定ができます。
で、ノード生成時に指定した配列の一番最初のnodeオブジェクトのnodeIdは0になるようです。
ということで、まずは、0番のnodeオブジェクトを取得します。
そうすると、そのnodeオブジェクトだけでなくその配下のnodeオブジェクトもnodesに配列で保持されているのでそれをたどることで、searchと同様のことができます。
今回のネットワーク管理では、nodeオブジェクトに保持しておいたuuidで検索しています。

ツリーにノード検索機能を付ける

先ほど、searchの方法があると述べましたが、その具体例です。

HTMLに以下を配置します。

<divclass="input-group input-group-sm"><inputtype="text"class="form-control"v-on:change="do_search"v-model="search_name"><spanclass="input-group-addon"v-on:click="do_search">検索</span><spanclass="input-group-addon"v-on:click="do_search_clear">クリア</span></div><br>

v-on:clickに対応する実装です。

do_search:function(){varret=$('#tree').treeview('search',[this.search_name]);if(ret.length>0)this.select_node(ret[0]);},do_search_clear:function(){this.search_name='';$('#tree').treeview('clearSearch');},

これで、エディットボックスに文字列を入力してEnterを押下するとサーチが実行され、見つかるとノードが赤色になります。クリアボタンを押すと、選択状態が解除されます。

サンプルアプリ：ネットワーク管理

こんな感じのネットワーク管理アプリを作ります。

ノードを追加したり、ツリー構成を変更したりできます。
IPアドレスの範囲指定ではなく、物理的な配線をイメージできるようにしました。
また、アイコン画像を指定できたり、サーバPCが公開しているWebページのURL(エンドポイント)を保持できるようにしています。
管理するネットワーク情報は、サーバ側にファイルとして保持しています。（かなり手を抜いた実装ですので、個人用と考えてください）

細かいことは、以下のGitHubにアップしておきましたので、ご興味のある方は見てみてください。

poruruba/network_manager
　https://github.com/poruruba/network_manager

セットアップ方法は以下の通りです。
・unzip network_manager.zip
・cd network_manager
・npm install
・mkdir data
・node app.js

以上