如何处理固定列中的可变列行 table

Question

我的 table 看起来像这样：

<table>
<thead>
    <tr>
        <th>Entry</th>
        <th>1</th>
        <th>2</th>
        <th>3</th>
    </tr>    
</thead>
<tbody>
    <tr>
        <td>Cooper</td>
        <td>Vikings</td>
        <td>Giants</td>
        <td>Rams</td>
    </tr>
    <tr>
        <td>Jon Doe</td>
        <td>Bears</td>
        <td></td> 
        <td>Seahawks</td>
    </tr>
</tbody>

我的数据将是这样的：

{
 "name" : "Cooper",
 "picks" [{"w1": "vikings"}, {"w2" : "Giants"}, {"w3" : "Rams"}]
},
{
 "name" : "Jon Doe",
 "picks" [{"w1": "Bears"}, {"w3" : "Seahawks"}]
}

我正在寻找有关如何最好地创建输出的建议。这只是一个简单的示例，我的真实模型将有 30 列，因此我可能会根据星期几隐藏其中的一些列。选秀权将按顺序进行，但我不能确定所有周都会有代表。在我上面的示例中，Jon Doe 忘记为第 2 周进行选择。

谢谢

Answer 1

此解决方案要求您的数据结构从数组切换到包含每周键的对象。它不会要求您将虚拟记录或未定义的记录插入到数组中，尽管我认为该解决方案不一定那么糟糕。

下面的代码片段显示了可以解决您的问题的指令。请注意，在指令（tbody 元素）的 html 中，我已将 max-columns 设置为 3 以匹配您的数据。

angular.module("app", [])
  .controller("pickersCtrl", ['$scope',
    function($scope) {
      $scope.data = [{
        "name": "Cooper",
        "picks": {
          "w1": "Vikings",
          "w2": "Giants",
          "w3": "Rams"
        }
      }, {
        "name": "Jon Doe",
        "picks": {
          "w1": "Bears",
          "w3": "Seahawks"
        }
      }];
    }
  ])
  .directive("pickersRepeat", [
    function() {
      return {
        restrict: 'EA',
        scope: {
          pickers: '=',
          maxColumns: '@'
        },
        link: function(scope, element, attrs) {
          scope.$watch("pickers", function(pickers) {
            if (!pickers) {
              return;
            }
            var maxColumns = +scope.maxColumns;
            for (var i = 0; i < pickers.length; i++) {
              var picker = pickers[i];
              var row = angular.element('<tr/>');
              element.append(row);
              var nameColumn = angular.element('<td/>').text(picker.name); // append user name to Entry row
              row.append(nameColumn);
              var picks = picker.picks; // get user picks
              
              for (var j = 0; j < maxColumns; j++) {
                var column = angular.element('<td/>');
                row.append(column);
                var pick = picks["w" + (j + 1)]; // since the wX seem to start with 1 instead of 0 we add 1 here
                if (pick) {
                  // user made a pick for week j
                  column.text(pick); // put the text in column j
                }
              }
            }
          });
        }
      };
    }
  ]);

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <table ng-controller="pickersCtrl">
    <thead>
      <tr>
        <th>Entry</th>
        <th>1</th>
        <th>2</th>
        <th>3</th>
      </tr>
    </thead>
    <tbody pickers-repeat pickers="data" , max-columns="3">
    </tbody>
  </table>
</div>

如何处理固定列中的可变列行 table

How to handle variable columns rows in a fixed column table

javascript

angularjs

breeze