Python eelで jsTree の AJAX load を確かめる

Python jQuery

jsTree　の AJAX による URL指定の描画は、わざわざ Webサイトを立てないと
確認できません。
f:id:posturan:20181115121149j:plain
↑の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');
   });
});

読込ませる JSON（tree.json）

[
   { "id":1, "text":"フォルダ",
      "children":[
         { "id":11, "icon":"jstree-file","text":"ノート" }
      ]
   }
]

WebContent と同じ階層に、Python スクリプト（develop.py ）を置きます。
f:id:posturan:20181115121622j:plain
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 ＰＣで手元でよく利用するからです。
ＣＳＳの方は、

@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 をクリックして起動すると、
f:id:posturan:20181115122631j:plain

無事、サーバ立てなくても jsTree を url 指定で描画できます。
WebContent の直下にtree.json を置くから、ＵＲＬ指定　 "./tree.json"　になります。