2017-02-20 68 views
2

您好我想知道我怎麼可以在我的數組對象的數據得到我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" 

我想這個代碼,但沒有顯示的文件夾我試圖安慰它和響應是在頂部

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

           }] 

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

你嘗試過什麼? Dropbox HTTP API'list_folder'返回一個JSON。所以你只需要將API響應映射到與jstree兼容的格式,如https://www.jstree.com/docs/json/ –

+0

中所解釋的。我編輯了我的代碼,response.entries來自保存箱中的響應API – VLR

回答

1

的3個對象,您只需要數據如下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) { 
 
\t if (entry.tag == 'folder') { 
 
    \t 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>

相關問題