Question

我有一个数据数组（lanes），它本身包含一个数组（timePeriods）：

lanes: [{
 lane: 'Lane 1',
    timePeriods: [{
        start: '08:00',
        end: '08:15',
        trays: Math.floor(Math.random() * 6) + 1
    }, {
        start: '08:15',
        end: '08:30',
        trays: Math.floor(Math.random() * 6) + 1
    }, {
        start: '08:30',
        end: '08:45',
        trays: Math.floor(Math.random() * 6) + 1
    }, {
        start: '08:45',
        end: '09:00',
        trays: Math.floor(Math.random() * 6) + 1
    }]
 },
 ...
 ]

我想要做的是以表格格式显示，但是我不确定如何正确排列列和行？我可能需要嵌套表吗？

enter image description here

我创建了一个jsfiddle，但只输出trays的静态数字，而不是trays的实际值，因为我不确定如何：http://jsfiddle.net/boe5u2sj/

Answer 1

您可以使用一个<table>来完成，只需在显示数据之前重新排列数据。

由于你要遍历每一行，所以如果你像这样的数据（例如），那就更容易了：

{
  "08:00-08:15": {
    "Lane 1": {
      "trays": 1
    },
    "Lane 2": {
      "trays": 6
    }
  },
  "08:15-08:30": {
    "Lane 1": {
      "trays": 4
    },
    "Lane 2": {
      "trays": 5
    }
  },
  ...

为了做到这一点，请使用以下内容：

vm.rep = {};
_.forEach(vm.report.lanes, function(lane) {
    _.forEach(lane.timePeriods, function(timePeriod) {
        var time = timePeriod.start + "-" + timePeriod.end;
        if (vm.rep[time] == null) {
            vm.rep[time] = {};
        }
        vm.rep[time][lane.lane] = { trays: timePeriod.trays };
    });
});

然后，在HTML上：

<table class="table">
  <thead>
     <tr>
         <th><!-- time periods --></th>
         <th ng-repeat="lane in vm.lanes">{{lane}}</th>
      </tr>
  </thead>
  <tbody>
    <tr ng-repeat="(time, lanes) in vm.rep">
        <td>{{time}}</td>
        <td ng-repeat="(key, lane) in lanes">{{lane.trays}}</td>
    </tr>
  </tbody>
</table>

<强> jsFiddle

Answer 2

单个表应该足够了，但代码可能相当混乱/乏味。如果放入该数组的数据是在某种循环中生成的，那可能会简单得多，因为您可以使用相同的循环将数据放入表中。 HTML需要这样的东西：

<table id="tbl"></table>

您的JavaScript需要访问该表：

var tabl, rows=[], data=[];  //extra variables used farther down
tabl=document.getElementById("tbl");

填充数组的循环需要创建表行和表数据元素，并在填充数组的同时半填充它们（假设索引变量“i”和“j”在这里）：

rows[i]=document.createElement("tr"); //table-row element
tabl.appendChild(rows[i]);
data[j]=document.createElement("td"); //table-data element
data[j].innerHTML="&nbsp;";  //top-left corner of table, blank/space, when i=0 and j=0
rows[i].appendChild(data[j]);

您将增加“j”并修改第一个表行中所需的每个数据项的innerHTML数据，从数组中获取数据（或者在将数据放入数组的同时将其应用于innerHTML数组，如果数组是在循环中生成的）。对于第二行，当i = 1时，您希望第一个数据项（j = 0）innerHTML是从数组中拉出的时间，连字符，以及从数组中拉出的另一个时间。第二个数据项的innerHTML将是您的“托盘”数字之一。等等。只需记住使用appendChild将每一行追加到“tabl”，并使用appendChild将数据项追加到当前行。（嗯......我可能会向后倾斜;你可能必须在将它附加到表格之前填写该行，以确保所有附加物实际上成为表格的一部分。）最后，只要有相同的一部分每行数据项的数量，当浏览器在网页上显示只有一个构造的表时，一切都应该合理地对齐。（如果需要，可以在将数据元素附加到行元素之前指定“样式”信息。）

如果不使用循环，则需要构造整个HTML表，为每个table-data元素分配唯一的“id”。然后，您的JavaScript必须为每个表数据元素执行getElementById（），并为其分配适当的innerHTML值。凌乱而乏味！

Angular：以表格格式显示2D数组

2 个答案: