如何将我的数组对象中的数据提供给我的jstree?

时间:2017-02-20 04:25:41

标签: javascript jquery arrays jstree

您好我想知道如何将我的数组对象的数据提供给我的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" ]
                    })

1 个答案:

答案 0 :(得分: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>
&#13;
&#13;
&#13;