利用するライブラリ
jsTree というライブラリを利用します。
他のライブラリも検討したのですが、意外に？デファクトスタンダードというものが無く、これを採用しました。
ライセンスはMITとのことです。
ここでは他に bootstrap5, jquery 3.5.1 を利用しています。
難しかった点
サンプルを見ればツリー表示自体は難しくないのですが、むしろ「自分が表示したいデータを jsTreeのデータ形式に変換する」のが面倒でしたのでここにメモしておきます。
Code
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>jstree-example</title>
<!-- jQuery 3.5.1 -->
<script src="https://code.jquery.com/jquery-3.5.1.js"
integrity="sha256-QWo7LDvxbWT2tbbQ97B53yJnYU3WhH/C8ycbRAkjPDc="
crossorigin="anonymous"></script>
<!-- bootstrap 5 -->
<link
href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
rel="stylesheet"
integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC"
crossorigin="anonymous">
<!-- jstree -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<script type="text/javascript" class="init">
// データ変換
function parseTree(jstree,ptr,node){
if(node.children != null && node.children.length > 0){
var cc = new Array();
if(node != null && node.children != null && node.children.length>0){
for(var n=0;n<node.children.length;n++){
var c = new Object();
c.id = node.children[n].id;
c.text = node.children[n].text;
cc.push(c);
// 再起呼び出し
parseTree(jstree,c,node.children[n]);
}
}
ptr.children = cc;
}
}
// データ変換
function toJsTreeNode(tree){
var jstree = new Array();
for(var n=0;n<tree.length;n++){
var c = new Object();
c.id = tree[n].id;
c.text = tree[n].text;
jstree.push(c);
parseTree(jstree,c,tree[n]);
}
return jstree;
}
// 選択されたとき
function nodeSelected(event,data){
console.log(data.node.id);
}
// 元のデータの例
var originalData = [
{
id:"1",
text:"aaa",
children:[
{id:"1-1",text:"bbb"},
{id:"1-2",text:"ccc",
children:[{id:"1-2-1",text:"ddd"},{id:"1-2-2",text:"eee"}]
},
],
},
{
id:"2",
text:"fff",
children:[
{id:"2-1",text:"ggg"},
{id:"2-2",text:"hhh"},
],
}
];
$(document).ready(function() {
// 初期化
$.jstree.defaults.core.themes.variant = "large";
$.jstree.defaults.core.themes.responsive = true;
// データ変換
var jstreeNode = toJsTreeNode(originalData);
// 表示
$('#jstree')
// listen for event
.on('select_node.jstree', nodeSelected)
// create the instance
.jstree({"core":{"multiple":false,"data":jstreeNode }});
} // end of function
); // end of .ready
</script>
</head>
<body class="m-3">
<div class="row">
<div class="col-12">
<div id="jstree"><!-- ここにツリー表示 --></div>
</div>
</div>
</body>
</html>
実行結果
表示できました！
ひとこと
toJsTreeNode() と parseTree() はもうちょっとシンプルに書けそうな気がしています。
以上。