logo标签列表

如何从对象数组创建树形视图表格 - Javascript

javascriptarraysobjecthtml-tabletreeview
3
我希望能够生成树形视图的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"
}];

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

enter image description here

如何修改我的对象（数据）以便能够轻松生成树形视图？
在这个fiddle中，您可以看到一个硬编码的表格（这是我必须实现的结果，但是动态的），还有我提供的要使用的数组：

https://jsfiddle.net/t3jLfhme/

2个回答
2
如果您的数据按照您给出的排序方式，则可以正常工作。否则，您需要处理您的数据。 希望现在我理解了问题并提供了解决方案。原始答案被翻译为“最初的回答”。 

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！这就是我想要的结果。 - atvasilev
0
我从数据对象中制作了一个基本表格。以下是我的代码。 

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

你误解了问题。这是期望的结果：https://jsfiddle.net/t3jLfhme/，只不过不是硬编码，而是动态生成的。你已经渲染出了表格。 - nyagolova
你会尝试通过添加那些样式来动态构建表格吗？我已经动态地创建了这个表格。 - tuhin47
这不是风格问题，而是结构问题。看这里 - https://i.imgur.com/zGjEtVm.png 这应该是结果 -> 没有空值，没有重复值，按州分组。 - nyagolova
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接