使用json生成樹視圖

我想使用jQuery和JSON生成樹視圖。使用json生成樹視圖

我的JSON（單個文件夾）：

[{"id":"076ac97d","path":"\/test\/undefined","name":"undefined","parentDirName":"test","parentDirId":"70b77ddd-6c15"}, .... ]

當文件夾是在根，parentDirId鍵具有空值：「」，如果是在產品目錄中，有一個父ID。

我想生成ul li列表樹。

你有一個想法如何迭代在這個JSON和追加ul列表到HTML？

我有一個AJAX：

$.ajax({ 
    type: "GET", 
    url: ajaxUrl, 
    dataType: "json", 
    contentType: "application/json", 

    success: function(response){ 
    //code 
    }

如何生成目錄樹？首先將dirs添加到具有parentID的dirs。

來源

2017-05-19 Dominik

你可以添加示例輸入和輸出？ – Tezra

我猜你的意思是這樣

function listItem(obj) { 
 
    var html = "<ul>" 
 
    jQuery.each(obj, function(key, value) { 
 
    html += "<li>" + key + ':' 
 
    if (typeof value !== "object") 
 
     html += value 
 
    else 
 
     html += listItem(value) 
 
    html += "</li>" 
 
    }) 
 
    return html + "</ul>" 
 
} 
 

 
var obj = { 
 
    "id": "076ac97d", 
 
    "rawr": { 
 
    "mew": 2 
 
    }, 
 
    "path": "\/test\/", 
 
    "name ": "undefined", 
 
    "parentDirName ": "test", 
 
    "parentDirId ": "70 b77ddd " 
 
}; 
 
document.write(listItem(obj));

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

來源

2017-05-19 19:06:24 Tezra

我無法編輯JSON到「rawr」：{「mew」：2} :(我有一個想法：追加所有項目與parentDir「」並添加類ID，在第二步中追加dirs哪些相同的父路徑作爲附加項目你有什麼想法嗎 – Dominik

@Dominik「rawr」只是用來顯示如何處理嵌套對象，理論上這應該適用於傳遞給它的任何對象 – Tezra

我編輯了我的問題，你能看到嗎？ – Dominik

你可以使用下面的功能。它首先創建一個由id加密的新對象結構，該對象結構允許快速查找每個節點的父節點。同時，它爲每個元素創建一個LI元素以及一個空的UL元素。最後，所有這些LI和UL元素根據親子關係聯繫在一起：

function populateUL($ul, data) { 
 
    // Register the given UL element as the root in a new data structure 
 
    var hash = { 
 
     "": { $ul: $ul } 
 
    }; 
 
    // Key the objects by their id, and create individual LI elements for them, 
 
    // and an empty UL container for their potential child elements 
 
    data.forEach(function (o) { 
 
     var $ul = $("<ul>"); 
 
     hash[o.id] = { 
 
      $ul: $ul, 
 
      $li: $("<li>").text(o.name).append($ul) 
 
     }; 
 
    }); 
 
    // Append each LI element to the correct parent UL element 
 
    data.forEach(function (o) { 
 
     hash[o.parentDirId].$ul.append(hash[o.id].$li); 
 
    }); 
 
} 
 

 
// Sample response object 
 
var response = [{ 
 
    "id":"70b77ddd-6c15", 
 
    "path":"/test", 
 
    "name":"test", 
 
    "parentDirName":"", 
 
    "parentDirId":"" 
 
}, { 
 
    "id":"076ac97d", 
 
    "path":"/test/chess", 
 
    "name":"chess", 
 
    "parentDirName":"test", 
 
    "parentDirId":"70b77ddd-6c15" 
 
}, { 
 
    "id":"076ac97e", 
 
    "path":"/test/bingo", 
 
    "name":"bingo", 
 
    "parentDirName":"test", 
 
    "parentDirId":"70b77ddd-6c15" 
 
}, { 
 
    "id":"076ac97f", 
 
    "path":"/test/chess/major pieces", 
 
    "name":"major pieces", 
 
    "parentDirName":"chess", 
 
    "parentDirId":"076ac97d" 
 
}, { 
 
    "id":"076ac97g", 
 
    "path":"/test/chess/major pieces/rook", 
 
    "name":"rook", 
 
    "parentDirName":"major pieces", 
 
    "parentDirId":"076ac97f" 
 
}, { 
 
    "id":"076ac97h", 
 
    "path":"/test/chess/major pieces/queen", 
 
    "name":"queen", 
 
    "parentDirName":"major pieces", 
 
    "parentDirId":"076ac97f" 
 
}, { 
 
    "id":"076b0000", 
 
    "path":"/test/chess/minor pieces", 
 
    "name":"minor pieces", 
 
    "parentDirName":"chess", 
 
    "parentDirId":"076ac97d" 
 
}, { 
 
    "id":"076b0001", 
 
    "path":"/test/chess/minor pieces/knight", 
 
    "name":"knight", 
 
    "parentDirName":"minor pieces", 
 
    "parentDirId":"076b0000" 
 
}, { 
 
    "id":"076b0002", 
 
    "path":"/test/chess/minor pieces/bishop", 
 
    "name":"bishop", 
 
    "parentDirName":"minor pieces", 
 
    "parentDirId":"076b0000" 
 
}]; 
 

 
// Inject response data into document 
 
populateUL($("#root"), response);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<ul id="root"></ul>

對於這項工作，根元素必須被用於一個空字符串引用parentDirId。

注意，性能路徑和parentDirName沒有該算法中使用，因爲它們包含冗餘信息。

來源

2017-05-20 09:05:51 trincot

使用json生成樹視圖

回答

相關問題