Question

我想显示如下表格

Order  Name  Id 
1      aaa  1001
1.1    aab  1002
1.1.1  abb  1003
2      bbb  1004
2.1    bba  1005

上面的订单栏只是相同类型的子项目的深度。

数据形状为

var data = [{
    id : "1001",
    name: "aaa", 
    children : [{
      id : "1002",
      name: "aab", 
      children : [
           {
             id : "1003",
             name: "abb", 
             children : []
           }  
      ]}

    ]},
    {
    id : "1004",
    name: "bbb", 
    children : [{
      id : "1005",
      name: "bba", 
      children : []
      }

    ]}
]

这里我想使用重复行的单个表。

请提供angularjs或普通javascript的解决方案

提前致谢

Answer 1

我使用递归方法创建了一个解决方案：

    var data = [{
    id : "1001",
    name: "aaa", 
    children : [{
      id : "1002",
      name: "aab", 
      children : [
           {
             id : "1003",
             name: "abb", 
             children : []
           }  
      ]}

    ]},
    {
    id : "1004",
    name: "bbb", 
    children : [{
      id : "1005",
      name: "bba", 
      children : []
      }

    ]}
]

tr = [];

function createTable(data) {
    for(var i = 0; i <= data.length; i++) {
        obj = {};
        for(var item in data[i]) {   
            if(  !Array.isArray( data[i][item] ) ) {
                obj[item] = data[i][item];
            }
            else {
                tr.push(obj);
                createTable(data[i][item])
            }
        }
    }    
}

createTable(data);

var table = '<table><tr><th>id</th><th>name</th></tr>';

for(var i=0; i<= tr.length; i++) {
    table += '<tr>';
    for(var item in tr[i]) {
        table += '<td>' + tr[i][item] + '</td>';    
    }    
    table += '</tr>';
}

table += '</table>';

在这种情况下，table将为：<table><tr><td>1001</td><td>aaa</td></tr><tr><td>1002</td><td>aab</td></tr><tr><td>1003</td><td>abb</td></tr><tr><td>1004</td><td>bbb</td></tr><tr><td>1005</td><td>bba</td></tr><tr></tr></table>

将它放入html文件中会显示如下表格：

  id    name
1001    aaa
1002    aab
1003    abb
1004    bbb
1005    bba

希望有所帮助：）

Answer 2

您可以使用此功能创建一个包含所需三个＆＃34;列的数组＆＃34; （实际上：对象属性）。然后，这是一个简单的操作，输出为HTML表体内容：

＆＃13;

function generateRows(data, order = '') {
    return data.reduce( (rows, data, i) => {
        let obj = {
            order: order + (order.length ? '.' : '') + (i+1),
            name: data.name,
            id: data.id
        };
        return rows.concat([obj], generateRows(data.children, obj.order));
    }, []);
}

// sample data
var data = [{
  id : "1001", name: "aaa", 
  children : [{
    id : "1002", name: "aab", 
    children : [{ id : "1003", name: "abb",
      children : [] }]
  }]
}, {
  id : "1004", name: "bbb", 
  children : [{ id : "1005", name: "bba",
     children : [] }]
}];

// convert
result = generateRows(data);

// Place table in document
document.querySelector('tbody').innerHTML = 
    result.reduce( (html, row) =>
        html + '<tr><td>' + row.order 
             + '</td><td>' + row.name
             + '</td><td>' + row.id + '</td></tr>',
        '');

＆＃13;

<table border=1>
    <thead>
        <tr><th>Order</th><th>Name</th><th>Id</th></tr>
    </thead>
    <tbody>
        <!-- generated content comes here -->
    </tbody>
</table>

＆＃13;

对于info：在作为表输出之前创建的数组是：

[
  { "order": "1",     "name": "aaa", "id": "1001" },
  { "order": "1.1",   "name": "aab", "id": "1002" },
  { "order": "1.1.1", "name": "abb", "id": "1003" },
  { "order": "2",     "name": "bbb", "id": "1004" },
  { "order": "2.1",   "name": "bba", "id": "1005" }
]

要从中生成表格内容很简单，如代码中所示。

ES5版本

以下是不具备某些必需ES6功能的浏览器的相同代码段，例如function parameter defaults或arrow functions：

＆＃13;

function generateRows(data, order) {
  return data.reduce( function(rows, data, i) {
    var obj = {
      order: order + (order.length ? '.' : '') + (i+1),
      name: data.name,
      id: data.id
    };
    return rows.concat([obj], generateRows(data.children, obj.order));
  }, []);
}

// sample data
var data = [{
  id : "1001",
  name: "aaa", 
  children : [{
    id : "1002",
    name: "aab", 
    children : [{
        id : "1003",
        name: "abb", 
        children : []
      }]
  }]
}, {
  id : "1004",
  name: "bbb", 
  children : [{
    id : "1005",
    name: "bba", 
    children : []
  }]
}];

// convert
result = generateRows(data, '');

// optionally output object structure to console. Commented out here
// to leave room to see the table:
//console.log(result);

// Place table in document
document.querySelector('tbody').innerHTML = 
  result.reduce( function(html, row) {
    return html + '<tr><td>' + row.order 
                + '</td><td>' + row.name
                + '</td><td>' + row.id + '</td></tr>';
  }, '');

＆＃13;

<table border=1>
  <thead>
    <tr><th>Order</th><th>Name</th><th>Id</th></tr>
  </thead>
  <tbody>
    <!-- generated content comes here -->
  </tbody>
</table>

＆＃13;

Answer 3

泛型tableMaker函数接受一个对象数组并生成一个表。每个对象指定一行，其中数组属性成为表头（如果第二个参数设置为true），它们的值将成为表格单元格。在这种特殊情况下，为了形成要发送到tableMaker函数的数据，我们有一个名为getTableData的辅助函数。我想以下是你需要的......

function tableMaker(o,h){
  var keys = Object.keys(o[0]),
  rowMaker = (a,t) => a.reduce((p,c,i,a) => p + (i === a.length-1 ? "<" + t + ">" + c + "</" + t + "></tr>"
                                                                  : "<" + t + ">" + c + "</" + t + ">"),"<tr>"),
      rows = o.reduce((r,c) => r + rowMaker(keys.reduce((v,k) => v.concat(c[k]),[]),"td"),h ? rowMaker(keys,"th") : []);
  return "<table>" + rows + "</table>";
}

function getTableData(data,init){
  return data.reduce((p,c,i,a) => {c.children = c.children.length > 0 ? getTableData(c.children,p) : "N/A";
                                   return tableMaker(a,true)},init);
}

var data = [{
    id : "1001",
    name: "aaa", 
    children : [{
      id : "1002",
      name: "aab", 
      children : [
           {
             id : "1003",
             name: "abb", 
             children : []
           }  
      ]}

    ]},
    {
    id : "1004",
    name: "bbb", 
    children : [{
      id : "1005",
      name: "bba", 
      children : []
      }
    ]}
];
myTable.innerHTML = getTableData(data,"");

<div id="myTable"></div>

如何使用树对象创建具有嵌套行的表

3 个答案:

ES5版本