如何从对象数组创建树视图表 - 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.