Question

我正在开发一个带有上下文菜单插件的Jstree，但是几乎没有问题。

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

enter image description here

但我想让我的jstree像这样 http://jsfiddle.net/govi20/cnbsfkx8/1/
chromeDev控制台和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">

请注意网址开头缺少“r” - 这是一个错字。

但请记住，像这样的hotlinking不赞成 - 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在浏览器中无法正确呈现

2 个答案: