javascript - 如何将我的数组对象中的数据获取到我的jstree？

Question

您好，我想知道如何将我的数组对象的数据获取到我的 jstree..

例如我有这个数组对象(这是我的控制台中的响应，用于在我的保管箱中列出文件夹)

    0:Object
       .tag:"folder"
        id:"id:dEOW7ElDHUgAAAAAAAAABw"
        name:"Yahoo! Mail"
        path_display:"/Yahoo! Mail"
        path_lower:"/yahoo! mail"
  1:Object
       .tag:"folder"
        id:"id:dEOW7ElDHUgAAAAAAAAAJg"
        name:"Sample Folder"
        path_display:"/Sample Folder"
        path_lower:"/sample folder"

  2:Object
       .tag:"folder"
        id:"id:dEOW7ElDHUgAAAAAAAAAJw"
        name:"Sample Folder 1"
        path_display:"/Sample Folder 1"
        path_lower:"/sample folder 1"

我试过这段代码，但没有显示文件夹我试着控制它，响应是顶部的 3 个对象

          $("#people").jstree({
                        // generating tree from json data
                        "json_data" : {
                            "data" : [{
                                    "data": response.entries,

                                }]

                        },
                        // plugins used for this tree
                        "plugins" : [ "json_data", "ui", "types" ]
                    })

Answer 1

您只需要按照 jstree 标准映射数据。这是一个基于给定数据的基本示例:

var response = {
  "entries": [{
    "tag": "folder",
    "id": "id:dEOW7ElDHUgAAAAAAAAABw",
    "name": "Yahoo! Mail",
    "path_display": "/Yahoo! Mail",
    "path_lower": "/yahoo! mail"
  }, {
    "tag": "folder",
    "id": "id:dEOW7ElDHUgAAAAAAAAAJg",
    "name": "Sample Folder",
    "path_display": "/Sample Folder",
    "path_lower": "/sample folder"
  }, {
    "tag": "folder",
    "id": "id:dEOW7ElDHUgAAAAAAAAAJw",
    "name": "Sample Folder 1",
    "path_display": "/Sample Folder 1",
    "path_lower": "/sample folder 1"
  }]
}

// map data to jstree standard
response.entries.forEach(function(entry) {
	if (entry.tag == 'folder') {
  	entry.parent = '#'
  }
  entry.text = entry.name
})

$('#jstree').jstree({
  'core': {
    'data': response.entries
  }
});

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.12.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>

<div id="jstree"></div>