JQuery JsTree：jstree 无法在浏览器中正确呈现

Question

我正在使用上下文菜单插件开发 Jstree，但几乎没有问题。

这就是我的树在浏览器中呈现的方式（在 chrome 和 mozilla 中测试）。

但我希望我的jstree是这样的 http://jsfiddle.net/govi20/cnbsfkx8/1/
在 chrome 开发控制台和 firebug 控制台上都没有一个错误。

HTML加价

<link href="http://medialize.github.io/jQuery-contextMenu/src/jquery.contextMenu.css">
  <link href="rhttp://static.jstree.com/3.0.8/assets/dist/themes/default/style.min.css">
  <link href="http://static.jstree.com/3.0.8/assets/bootstrap/css/bootstrap.min.css">
</head>
<body>
    <div id="jstree1">

    </div>
</body>

    <script type="text/javascript">

        function demo_create() {
            var ref = $('#jstree1').jstree(true),
                sel = ref.get_selected();
            if(!sel.length) { return false; }
            sel = sel[0];
            sel = ref.create_node(sel, {"type":"file"});
            if(sel) {
                ref.edit(sel);
            }
        };
        function demo_rename() {
            var ref = $('#jstree1').jstree(true),
                sel = ref.get_selected();
            if(!sel.length) { return false; }
            sel = sel[0];
            ref.edit(sel);
        };
        function demo_delete() {
            var ref = $('#jstree1').jstree(true),
                sel = ref.get_selected();
            if(!sel.length) { return false; }
            ref.delete_node(sel);
        };
        function getJSON()  {
        //    var v = $('#data').jstree(true).get_json('#', {flat:true});
            var v = $('#jstree1').jstree(true).get_json('#', { 'flat': true });
            var mytext = JSON.stringify(v);
            console.log("tree=> "+mytext);
         }

        $(document).ready(function(){
          $('#jstree1').jstree({
                "core" : {
                    "check_callback" : true,
                    "themes": {
                      "name": "default-dark",
                      "dots": true,
                      "icons": true
                  },
                  "themes" : {
                      "theme" : "apple"
                },
                    'data' : [
                            'Simple root node',
                            {
                                'id' : 'node_2',
                                'text' : 'Root node with options',
                                'state' : { 'opened' : true, 'selected' : true },
                                'children' : [ { 'text' : 'Child 1' }, 'Child 2']
                            }
                        ]
                },
                "plugins" : [ "themes","contextmenu","dnd" ]
            });
      });
    </script>

  <script src="http://code.jquery.com/jquery-1.11.0.js"></script>
        <script src="http://static.jstree.com/3.0.8/assets/dist/jstree.min.js"></script>
      <script src="http://medialize.github.io/jQuery-contextMenu/src/jquery.contextMenu.js"></script>

    <script type="text/javascript">

        function demo_create() {
            var ref = $('#jstree1').jstree(true),
                sel = ref.get_selected();
            if(!sel.length) { return false; }
            sel = sel[0];
            sel = ref.create_node(sel, {"type":"file"});
            if(sel) {
                ref.edit(sel);
            }
        };
        function demo_rename() {
            var ref = $('#jstree1').jstree(true),
                sel = ref.get_selected();
            if(!sel.length) { return false; }
            sel = sel[0];
            ref.edit(sel);
        };
        function demo_delete() {
            var ref = $('#jstree1').jstree(true),
                sel = ref.get_selected();
            if(!sel.length) { return false; }
            ref.delete_node(sel);
        };
        function getJSON()  {
        //    var v = $('#data').jstree(true).get_json('#', {flat:true});
            var v = $('#jstree1').jstree(true).get_json('#', { 'flat': true });
            var mytext = JSON.stringify(v);
            console.log("tree=> "+mytext);
         }

        $(document).ready(function(){
          $('#jstree1').jstree({
                "core" : {
                    "check_callback" : true,
                    "themes": {
                      "name": "default-dark",
                      "dots": true,
                      "icons": true
                  },
                  "themes" : {
                      "theme" : "apple"
                },
                    'data' : [
                            'Simple root node',
                            {
                                'id' : 'node_2',
                                'text' : 'Root node with options',
                                'state' : { 'opened' : true, 'selected' : true },
                                'children' : [ { 'text' : 'Child 1' }, 'Child 2']
                            }
                        ]
                },
                "plugins" : [ "themes","contextmenu","dnd" ]
            });
      });
    </script>

请建议我修改。

Answer 1

而不是这个：

<link href="rhttp://static.jstree.com/3.0.8/assets/dist/themes/default/style.min.css">

使用这个：

<link rel="stylesheet" href="http://static.jstree.com/3.0.8/assets/dist/themes/default/style.min.css">

请注意 URL 开头缺少的 "r" - 这是一个拼写错误。

但请记住，这样的热链接是不受欢迎的 - jstree.com 不是 CDN，您可以使用真正的 CDN：

http://cdnjs.cloudflare.com/ajax/libs/jstree/3.0.8/themes/default/style.min.css
http://cdnjs.cloudflare.com/ajax/libs/jstree/3.0.8/jstree.min.js

我什至会推荐您使用 3.1.1，它完全向后兼容 3.0.8，但有很多错误修复。

Answer 2

替换此行：

<link
 href="rhttp://static.jstree.com/3.0.8/assets/dist/themes/default/style.min.css">

这一行：

<link href="http://static.jstree.com/3.0.8/assets/dist/themes/default/style.min.css">

JQuery JsTree：jstree 无法在浏览器中正确呈现

JQuery JsTree: jstree is not rendering properly in browser

html

javascript

css

jquery

jstree