如何從對象數組創建樹視圖表 - Javascript
[英]How to create tree view table from array of objects - Javascript
問題描述
我想在樹視圖中生成html表。
為此，我有以下對象數組：
var data = [{
"Column01": "1",
"Column02": null,
"Column03": null,
"Column04": "25.00"
},{
"Column01": "1",
"Column02": "Alabama",
"Column03": null,
"Column04": "25.00"
},{
"Column01": "1",
"Column02": "Alabama",
"Column03": " Birmingham",
"Column04": "25.00"
},{
"Column01": "2",
"Column02": null,
"Column03": null,
"Column04": "75.00"
},{
"Column01": "2",
"Column02": "Alaska",
"Column03": null,
"Column04": "75.00"
},{
"Column01": "2",
"Column02": "Alaska",
"Column03": " Fairbanks",
"Column04": "75.00"
},{
"Column01": "3",
"Column02": null,
"Column03": null,
"Column04": "50.00"
},{
"Column01": "3",
"Column02": "California",
"Column03": null,
"Column04": "50.00"
},{
"Column01": "3",
"Column02": "California",
"Column03": " San Francisco",
"Column04": "50.00"
},{
"Column01": "4",
"Column02": null,
"Column03": null,
"Column04": "100.00"
},{
"Column01": "4",
"Column02": "Indiana",
"Column03": null,
"Column04": "100.00"
},{
"Column01": "4",
"Column02": "Indiana",
"Column03": "Indianapolis",
"Column04": "100.00"
}];
這是我在表視圖中的對象
如何修改我的對象（數據）以便能夠輕松生成樹視圖？
在小提琴中，你可以看到一個硬編碼表（這是我必須動態實現的結果）以及我提供的數組：
2 個解決方案
解決方案1
2 已采納 2019-07-09 09:10:01
如果您的數據按照您的方式排序，那么它將起作用。 否則，您必須處理您的數據。 希望，現在我理解這個問題，這就是解決方案。
var data = [{ "Column01": "1", "Column02": null, "Column03": null, "Column04": "25.00" }, { "Column01": "1", "Column02": "Alabama", "Column03": null, "Column04": "25.00" }, { "Column01": "1", "Column02": "Alabama", "Column03": " Birmingham", "Column04": "25.00" }, { "Column01": "2", "Column02": null, "Column03": null, "Column04": "75.00" }, { "Column01": "2", "Column02": "Alaska", "Column03": null, "Column04": "75.00" }, { "Column01": "2", "Column02": "Alaska", "Column03": " Fairbanks", "Column04": "75.00" }, { "Column01": "3", "Column02": null, "Column03": null, "Column04": "50.00" }, { "Column01": "3", "Column02": "California", "Column03": null, "Column04": "50.00" }, { "Column01": "3", "Column02": "California", "Column03": " San Francisco", "Column04": "50.00" }, { "Column01": "4", "Column02": null, "Column03": null, "Column04": "100.00" }, { "Column01": "4", "Column02": "Indiana", "Column03": null, "Column04": "100.00" }, { "Column01": "4", "Column02": "Indiana", "Column03": "Indianapolis", "Column04": "100.00" }]; var table = document.getElementById('mytable'); var str = ''; //Add values Object.keys(data).forEach(Element => { var arr = []; Object.keys(data[Element]).forEach(val => { arr.push(data[Element][val]); }); arr = arr.filter(function(el) { return el != null; }); var pad = (arr.length - 2) * 20; var style = "padding-left:" + pad; //console.log(style); str += '<tr><td style=' + style + 'px>'; if (arr.length == 2) str += 'State ' str += arr[arr.length - 2] + '</td>'; str += '<td>' + arr[arr.length - 1] + '</td></tr>'; }); table.innerHTML = str;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>treeview</title> </head> <body> <table id='mytable'> </table> </body> </html>
解決方案2
0 2019-07-05 12:27:26
我從數據對象中創建了一個基本表。這是我的代碼。
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <meta http-equiv="X-UA-Compatible" content="ie=edge"> <title>treeview</title> </head> <body> <table id='mytable' cellspacing="0" cellpadding="1" border="1"> </table> <script> var data = [{ "Column01": "1", "Column02": null, "Column03": null, "Column04": "25.00" }, { "Column01": "1", "Column02": "Alabama", "Column03": null, "Column04": "25.00" }, { "Column01": "1", "Column02": "Alabama", "Column03": " Birmingham", "Column04": "25.00" }, { "Column01": "2", "Column02": null, "Column03": null, "Column04": "75.00" }, { "Column01": "2", "Column02": "Alaska", "Column03": null, "Column04": "75.00" }, { "Column01": "2", "Column02": "Alaska", "Column03": " Fairbanks", "Column04": "75.00" }, { "Column01": "3", "Column02": null, "Column03": null, "Column04": "50.00" }, { "Column01": "3", "Column02": "California", "Column03": null, "Column04": "50.00" }, { "Column01": "3", "Column02": "California", "Column03": " San Francisco", "Column04": "50.00" }, { "Column01": "4", "Column02": null, "Column03": null, "Column04": "100.00" }, { "Column01": "4", "Column02": "Indiana", "Column03": null, "Column04": "100.00" }, { "Column01": "4", "Column02": "Indiana", "Column03": "Indianapolis", "Column04": "100.00" }]; var table = document.getElementById('mytable'); var str = ''; //add heading str += '<tr style="color:white;background-color:grey">' + '<td>' + 'index' + '</td>'; Object.keys(data[0]).forEach(val => { //console.log(data[Element][val]); str += '<td>' + val + '</td>' }); str += '</tr>' //Add values Object.keys(data).forEach(Element => { //console.log(data[Element]); str += '<tr>' + '<td>' + Element + '</td>'; Object.keys(data[Element]).forEach(val => { //console.log(data[Element][val]); str += '<td>' + data[Element][val] + '</td>'; }); str += '</tr>'; }) table.innerHTML = str; </script> </body> </html>
從有序的字符串數組創建父子樹狀對象數組及其在 JavaScript 中的關系
[英]Create parent-children tree-like array of objects from ordered array of strings with their relationship in JavaScript
如何從 Javascript 中的數組創建樹（父子）object
[英]How to create a tree (parent-child) object from Array in Javascript
Javascript-使用group by從對象數組創建樹結構以定義子級
[英]Javascript - Create tree structure from array of objects using a group by to define children
聲明:本站的技術帖子網頁，遵循CC BY-SA 4.0協議，如果您需要轉載，請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.