Question

我正在使用jstree与Json。我的问题是我可以直接将Json提供给jsTree数据，但是当我将它作为变量传递时，它将打印整个Json字符串作为一个节点的标题。

下面的

是nodes.json

＆＃13;

{
  "id": "ajson1",
  "parent": "#",
  "text": "Simple root node"
}, {
  "id": "ajson2",
  "parent": "#",
  "text": "Root node 2"
}, {
  "id": "ajson3",
  "parent": "ajson2",
  "text": "Child 1"
}, {
  "id": "ajson4",
  "parent": "ajson2",
  "text": "Child 2"
},

＆＃13;

以下代码有效

＆＃13;

request = $.getJSON("nodes.json");
var data;
request.complete(function() {

  data = request.responseText;
  console.log(data);
  $.jstree.defaults.core.themes.responsive = true;
  $('#tree').jstree({
    plugins: ["checkbox", "sort", "types", "wholerow", "search"],
    "types": {
      "file": {
        "icon": "jstree-file"
      }
    },
    'core': {
      'data': [{
        "id": "ajson1",
        "parent": "#",
        "text": "Simple root node"
      }, {
        "id": "ajson2",
        "parent": "#",
        "text": "Root node 2"
      }, {
        "id": "ajson3",
        "parent": "ajson2",
        "text": "Child 1"
      }, {
        "id": "ajson4",
        "parent": "ajson2",
        "text": "Child 2"
      }, ]
    }
  });
});

＆＃13;

但是下面这个不起作用

＆＃13;

 request = $.getJSON("nodes.json");
 var data;
 request.complete(function() {

   data = request.responseText;
   console.log(data);
   $.jstree.defaults.core.themes.responsive = true;
   $('#tree').jstree({
     plugins: ["checkbox", "sort", "types", "wholerow", "search"],
     "types": {
       "file": {
         "icon": "jstree-file"
       }
     },
     'core': {
       'data': [data]
     }
   });
 });

＆＃13;

如果您希望看到代码执行，我将其托管在我的域上。 http://www.jordanmclemore.com/projects/jstree/test/visual/current.html

Answer 1

在您的原始问题data是一个字符串（因为您使用的是.responseText），为了使其作为变量工作，您应该使用JSON.parse将字符串转换为对象数组。

祝你好运，伊万

Answer 2

我知道你已经回答了自己的问题，但无论如何我想告诉它可能是什么原因。

在查看您提供给我们的nodes.json时，我不得不说它没有正确格式化为JSON。它显然是一个数组，但没有格式化。因此，您有多个根元素，这是无效的JSON。

如果您将nodes.json更改为：

[{
  "id": "ajson1",
  "parent": "#",
  "text": "Simple root node"
}, {
  "id": "ajson2",
  "parent": "#",
  "text": "Root node 2"
}, {
  "id": "ajson3",
  "parent": "ajson2",
  "text": "Child 1"
}, {
  "id": "ajson4",
  "parent": "ajson2",
  "text": "Child 2"
}]

在你的javascript中：

 request = $.getJSON("nodes.json");
 var data;
 request.complete(function() {

   data = request.responseText;
   console.log(data);
   $.jstree.defaults.core.themes.responsive = true;
   $('#tree').jstree({
     plugins: ["checkbox", "sort", "types", "wholerow", "search"],
     "types": {
       "file": {
         "icon": "jstree-file"
       }
     },
     'core': {
       'data': data
     }
   });
 });

我认为你的问题已经解决了。

由于你的'答案'没有修复JSON，我会说这是错误的答案，我建议你尝试我上面建议的事情。

顺便说一句，这是一个方便的工具，可以在将来验证您的JSON： http://jsonformatter.curiousconcept.com/

请注意，您可能会，也可能不必使用$.parseJSON(data);

Answer 3

$.jstree.defaults.core.themes.responsive = true;
$('#tree').jstree({
    plugins: ["checkbox", "types"],
    "types": {
        "file": {
            "icon": "jstree-file"
        }
    },
    'core': {
        'data': {
            'url': function(node) {
                return 'nodes.json'
            },
            'data': function(node) {
                return {
                    'id': node.id
                };
            }
        }
    }
});

我更紧密地关注了Ivan的JSTree API。他的API太棒了，紧跟其后会给你带来很多麻烦。另外，我的json有一个拖车逗号我相信并且无效，所以我也必须修复它。我使用json验证器进行了测试。

将Json作为变量加载到jsTree中

3 个答案: