为什么我无法使用 JSON 数据在 JS 函数调用上构建树

Question

这是我正在尝试的示例代码，用于在 javascript 函数调用上构建 jsTree，但由于某种原因它没有这样做。

如果我正常加载它，它会毫无问题地构建树。谁能告诉我哪里出了问题。

function build_tree(tree_data) {
  $('#container').jstree({
    'core': {
      'data': tree_data
    }
  });
}


$("#gen_tree").click(function() {
  var tree_data = "[{ 'id' : 'cases_root', 'parent' : '#', 'text' : 'Cases [0,1,2]', 'case_id' : '0' },{ 'id' : 'my_cases', 'parent' : 'cases_root', 'text' : 'My Cases', 'case_id' : '0' },{ 'id' : 'active', 'parent' : 'my_cases', 'text' : 'active [0,1,2]', 'case_id' : '0' },{ 'id' : '2', 'parent' : 'active', 'text' : 'AXA Investment Managers [0,1,0]', 'case_id' : '0' },{ 'id' : '107157', 'parent' : '2', 'text' : 'Miani, Antonio [13]', 'case_id' : '107157' },{ 'id' : '98', 'parent' : 'active', 'text' : 'Graff Diamonds [0,0,1]', 'case_id' : '0' },{ 'id' : '106560', 'parent' : '98', 'text' : 'HEE JIN, Gong [18]', 'case_id' : '106560' },{ 'id' : '84', 'parent' : 'active', 'text' : 'Optiver Services BV [0,0,1]', 'case_id' : '0' },{ 'id' : '106608', 'parent' : '84', 'text' : 'SAVILUOTO, Antti [24]', 'case_id' : '106608' },]";
  build_tree(tree_data);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://static.jstree.com/latest/assets/dist/themes/default/style.min.css" rel="stylesheet" />
<script src="https://static.jstree.com/latest/assets/dist/jstree.min.js"></script>

<div id="container"></div>
<input id='gen_tree' type='button' value='Generate Tree' />

Answer 1

您的问题是因为您将 data 作为字符串提供，但它无效 JSON，因此无法被 jsTree 库反序列化。

要解决此问题，请更正 JSON 格式，或者更简单地提供数据作为对象。试试这个：

function build_tree(tree_data) {
  $('#container').jstree({
    'core': {
      'data': tree_data
    }
  });
}

$("#gen_tree").click(function() {
  var tree_data = [{
    'id': 'cases_root',
    'parent': '#',
    'text': 'Cases [0,1,2]',
    'case_id': '0'
  }, {
    'id': 'my_cases',
    'parent': 'cases_root',
    'text': 'My Cases',
    'case_id': '0'
  }, {
    'id': 'active',
    'parent': 'my_cases',
    'text': 'active [0,1,2]',
    'case_id': '0'
  }, {
    'id': '2',
    'parent': 'active',
    'text': 'AXA Investment Managers [0,1,0]',
    'case_id': '0'
  }, {
    'id': '107157',
    'parent': '2',
    'text': 'Miani, Antonio [13]',
    'case_id': '107157'
  }, {
    'id': '98',
    'parent': 'active',
    'text': 'Graff Diamonds [0,0,1]',
    'case_id': '0'
  }, {
    'id': '106560',
    'parent': '98',
    'text': 'HEE JIN, Gong [18]',
    'case_id': '106560'
  }, {
    'id': '84',
    'parent': 'active',
    'text': 'Optiver Services BV [0,0,1]',
    'case_id': '0'
  }, {
    'id': '106608',
    'parent': '84',
    'text': 'SAVILUOTO, Antti [24]',
    'case_id': '106608'
  }];
  build_tree(tree_data);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://static.jstree.com/latest/assets/dist/themes/default/style.min.css" rel="stylesheet" />
<script src="https://static.jstree.com/latest/assets/dist/jstree.min.js"></script>

<div id="container"></div>
<input id='gen_tree' type='button' value='Generate Tree' />

为什么我无法使用 JSON 数据在 JS 函数调用上构建树

Why I am not able to build tree on JS function call using JSON data

javascript

jquery

json

jstree