如何从对象数组创建树视图表 - Javascript答案

【问题标题】：How to create tree view table from array of objects - Javascript如何从对象数组创建树视图表 - Javascript
【发布时间】：2018-05-15 07:29:29
【问题描述】：

我想在树视图中生成 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"
}];

这是我在表格视图中的对象

如何修改我的对象（数据）以便能够轻松生成树视图？

在小提琴中你可以看到一个硬编码的表（这是我必须动态实现的结果）以及我提供使用的数组：

https://jsfiddle.net/t3jLfhme/

【问题讨论】：

标签： javascript arrays object html-table treeview

【解决方案1】：

如果您的数据按照您给定的方式排序，那么它将起作用。否则，您必须处理您的数据。希望现在我明白了问题所在，这就是解决方案。

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>

【讨论】：

谢谢@tuhin47！这就是我想要的结果。

【解决方案2】：

我从数据对象制作了一个基本表格。这是我的代码。

<!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>

【讨论】：

你误解了这个问题。这是期望的结果：jsfiddle.net/t3jLfhme，只是不是硬编码的，而是动态的。您渲染的表格已经完成。
您会尝试通过添加这些样式来动态构建您的表格吗？我已经动态制作了表格。
这不是样式问题，而是结构问题。看这里 - i.imgur.com/zGjEtVm.png 这应该是结果 -> 没有空值，没有重复值，按状态分组。