Javascript 动态生成jstree_Javascript_Jquery_Html_Jstree

Javascript 动态生成jstree

javascript jquery html

Javascript 动态生成jstree,javascript,jquery,html,jstree,Javascript,Jquery,Html,Jstree,我试图在点击按钮时动态生成jstree。我有一个jstree，用户将从该树中选择实体。我想在所选选项卡中以树格式显示该树所以，如果我按原样使用变量aka，下面的代码可以很好地工作。但是我只想显示这个字符串的名字，因为我正在用jstree json数据格式格式化它。那么它就不起作用了。但我尝试将生成的文本复制并粘贴到另一个jstree中，然后就可以了。这意味着它不会显示在移动中的新树中，而是显示在另一个页面上。如果我传递相同的字符串，它将显示该树这是我的密码 <html>

我试图在点击按钮时动态生成jstree。我有一个jstree，用户将从该树中选择实体。我想在所选选项卡中以树格式显示该树

所以，如果我按原样使用变量aka，下面的代码可以很好地工作。但是我只想显示这个字符串的名字，因为我正在用jstree json数据格式格式化它。那么它就不起作用了。但我尝试将生成的文本复制并粘贴到另一个jstree中，然后就可以了。这意味着它不会显示在移动中的新树中，而是显示在另一个页面上。如果我传递相同的字符串，它将显示该树

这是我的密码

<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>JSP Page</title>
        <style>
            html { margin:0; padding:0; font-size:62.5%; }
            body {  font-size:14px; font-size:1.4em; }
            h1 { font-size:1.8em; }
            .demo { overflow:auto; border:1px solid silver; min-height:100px;min-width: 400px;float: left }
            .demo1 { overflow:auto; border:1px solid silver; min-height:100px;min-width: 400px; float: right}
        </style>
        <link rel="stylesheet" href="style.min.css" />
    </head>

    <body><div id="frmt" class="demo"></div>
        <div id="frmt1" class="demo1"></div>
        <script>
            function callGraph(akn) {
                var c = akn + "";
                var spl = c.split("!");
                var dt = "[{\"text\":\"DC=test,DC=in\",\"children\":[";
                var cnt = spl.length - 1;
                for (q = 0; q < cnt; q++) {
                    if (spl[q].startsWith(","))
                        dt += "{\"text\":\"" + spl[q].split(",")[1] + "\"},";
                    else
                        dt += "{\"text\":\"" + spl[q].split(",")[0] + "\"},";
                }
                dt += "]}]";
                console.log(dt);

                $('#frmt1').jstree({
                    'core': {
                        'data': dt;
                    },
                    "checkbox": {
                        "whole_node": false,
                        "keep_selected_style": true,
                        "three_state": true,
                        "tie_selection": false
                    }, "search": {
                        "fuzzy": true
                    }, "plugins": ["checkbox", "search"]
                });
                $('#frmt1').jstree(true).settings.core.data = dt;
                $('#frmt1').jstree(true).refresh();
            }
        </script>  
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
        <script src="jstree.min.js"></script>
        <button>>></button>

        <script>
            $('#html').jstree();
            $('#frmt').jstree({
                'core': {
                    'data':<%= session.getAttribute("PATH")%>
                },
                "checkbox": {
                    "whole_node": false,
                    "keep_selected_style": true,
                    "three_state": true,
                    "tie_selection": false
                }, "search": {
                    "fuzzy": true
                }, "plugins": ["checkbox", "search"]
            });

            $('button').on('click', function () {
                a = $('#frmt').jstree("get_checked");
                callGraph(a);
                // window.location = "read.jsp?name="+a;
            });

        </script>

    </body>
</html>

您需要删除dt附近的双引号和反斜杠双引号。以下内容将对您有所帮助

  var dt = [{"text":"DC=test,DC=in","children":[;
                var cnt = spl.length - 1;
                for (q = 0; q < cnt; q++) {
                    if (spl[q].startsWith(","))
                        dt += {"text":" + spl[q].split(",")[1] + "},;
                    else
                        dt += {"text":" + spl[q].split(",")[0] + "},;
                }
                dt += ]}];