Jstree - 如何正确放置在模板上答案

【问题标题】：Jstree - How to properly place on templateJstree - 如何正确放置在模板上
【发布时间】：2018-07-10 16:20:02
【问题描述】：

如何在模板上正确居中 jsTree？我试图只使用

，但我得到了这样的东西

如图所示，很难看出哪个节点是子/父节点。我喜欢它在https://www.jstree.com/（右侧的方块）上的制作方式。

模板代码（我觉得不需要）：

<html>

<head>
    <title>XLS</title>
    <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/themes/default/style.min.css" />
</head>

<body onload="PathInit()">
    <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
    <script src="//cdnjs.cloudflare.com/ajax/libs/jstree/3.3.5/jstree.min.js"></script>
    <br><br><br><br>
    <center>
        <br><b>Select a directory.<br></b></center><br><br>
    <script>
        function PathInit() {
            $.get("/xls/path/", {
                path: ""
            });
        }

    </script>
    <center>
        <div id="container" name="container">
            //Way to many
            <ul>'s and
                <li>'s
        </div>
        <script>
            function myf(a) {
                return a.instance.get_selected(true)[0].text;
            }
            var tree = $('#container')
                .jstree();
            $('#container')
                .on("changed.jstree", function(e, data) {
                    var elo = window.myf(data);
                    console.log(elo);
                    $.get("/xls/path/", {
                        path: elo
                    });
                });

        </script>


        <center><br>
            <form method="post">

                <br><br><b>Select source language:
                    <br>
                    <select name="source" id="source" option selected>
                        {% for o in data %}
                        <option value="{{o.name}}">{{o.full}}</option>

                        {% endfor %}
                    </select>

                    <br>
                    <br>Select destionation languages:<br></b>
                (hold ctrl to add more items)<br>
                <select multiple name="args[]" id="args" size="10">
                    {% for o in data %}
                    <option value="{{o.name}}">{{o.full}}</option>
                    {% endfor %}
                </select>

                <br><br><br>


                <input type="submit" value="Send"><br><br></form>
            <a href="/index/">Back</a>
        </center>
</body>

</html>

【问题讨论】：

在不知道用于创建树的数据的情况下，很难指出问题。如果您没有覆盖 jstree 样式，则问题可能是用于创建树的数据结构不正确。
每次调用模板的 url（使用 python、flask）时，我都会创建 html structutre (
- ...
)。它代表目录树。
你能分享一个Python处理你的模板后的html结构示例吗？
- C:\Users\EminEm\Desktop\Program\root\test
  
  C:\Users\EminEm\Desktop\Program\root\test\1
  
  C:\Users\EminEm\Desktop\Program\root\test\1\base
  
  C:\Users\EminEm\Desktop\Program\root\test\1\base\PSD
不知道你对jstree的认知度有多高：
列出节点