jsTree の AJAX による URL指定の描画は、わざわざ Webサイトを立てないと
確認できません。
↑のGIF画像になってしまいます。
サーバを立てなくても描画させるのに、
Python の eel パッケージを使って、手元のWindows PC上で、HTML と JS + Pythonスクリプトで確かめます。
WebContent というフォルダに、HTML (develop.html) と読込ませるJSONファイル(tree.json)と jsTree描画に必要なJSやCSSを
中に配置します。
develop.html
<!DOCTYPE html> <html> <head> <meta charset="UTF-8"> <title>develop.html</title> <link href="jstree/themes/default/style.min.css" rel="stylesheet" type="text/css"/> <link href="css/develop.css" rel="stylesheet" type="text/css"/> <script src="js/jquery-3.3.1.min.js" type="text/javascript"></script> <script src="jstree/jstree-3.3.6.min.js" type="text/javascript"></script> <script src="js/develop.js" type="text/javascript"></script> </head> <body> <div class="container-fluid"> <div class="develop"> <ul> <li> <div class="tree-container"> <div id="tree" class="tree-div"></div> </div> </li> <li></li> </ul> </div> </div> </body> </html>
develop.js の コード
$(function(){ $.jstree.defaults.core.themes.variant = "large"; $.jstree.defaults.core.themes.responsive = true; $('#tree').jstree({ 'core':{ 'data':{ "url":"./tree.json", "dataType":"json" } } }).on('loaded.jstree', function(){ $(this).jstree('open_all'); }); });
[ { "id":1, "text":"フォルダ", "children":[ { "id":11, "icon":"jstree-file","text":"ノート" } ] } ]
WebContent と同じ階層に、Python スクリプト(develop.py )を置きます。
develop.py
# -*- coding: utf-8 -*- import eel web_app_options = { 'mode': "chrome-app", #or "chrome" 'port': 8080, 'chromeFlags': ["--start-fullscreen", "--browser-startup-dialog"] } eel.init("WebContent") eel.start("develop.html", options=web_app_options)
8000 ポートでなくて、8080 ポートで起動します。Windows PCで手元でよく利用するからです。
CSSの方は、
@charset "UTF-8"; /** * develop.css */ .develop ul{ margin: 0; padding: 0; } .develop ul::after{ content: ""; display: block; clear: both; } .develop li{ list-style-type: none; padding: 2px 10px; float: left; } .develop li:nth-child(1){ width: 50%; } .tree-container{ overflow-y: auto; } /* ツリー図エリア背景色 */ .tree-div{ background-color: #ffffff; }
です。
予め、eel は pip install でインストールしておきます
develop.py をクリックして起動すると、
無事、サーバ立てなくても jsTree を url 指定で描画できます。
WebContent の直下にtree.json を置くから、URL指定 "./tree.json" になります。