复杂的动态表结构HTML

Question

我正在尝试创建一个这样的表：

我在html中创建此表的问题如下：

1. 必须是动态的，因为数据来自数据库
2. 日期范围可以更改，最多为61天，因为范围期间由用户定义

想在AngularJS 1x或Jquery

中完成

以下是JSON中的简化数据输入：

{"lastname":"Joseph","firstname":"Gremaud","holidayTotal":20,"holidays":[{"id":1,"date":"2017-01-05"},{"id":2,"date":"2017-01-06"}]}

Answer 1

＆＃13;

＆＃13;

angular.module('app', [])
.controller('MyController', ['$scope', function($scope) {
    $scope.items = [
      {"lastname":"Joseph","firstname":"Gremaud","holidayTotal":20,"holidays":[{"id":1,"date":"2017-01-05"},{"id":2,"date":"2017-02-06"}]},
      {"lastname":"Smith","firstname":"Tom","holidayTotal":10,"holidays":[{"id":1,"date":"2017-01-15"},{"id":2,"date":"2017-02-16"}]}
    ]    
        
    $scope.months = [];      
    for(var array of $scope.items){
      for(var item of array.holidays){
        var date = moment(item.date, "YYYY-MM-DD");
        var month = {name: date.format('MMMM'), n:date.format('MM'), days: new Array(date.daysInMonth())};
        if($scope.months.filter(x => x.name == month.name).length == 0)
          $scope.months.push(month);
      }
    }      
    
    $scope.days = [];    
    for(var month of $scope.months)  {
      var i = 0;
      for(var day of month.days)
        $scope.days.push({n:++i, month:month.name, m:month.n});
    }
    
    $scope.exists = function(items, day){
      return items.filter(function(item){
        var date = moment(item.date, "YYYY-MM-DD");
        return date.format('MM') == day.m && date.format('D') == day.n;
      }).length > 0;
    }
}])

＆＃13;

table, th, td {
    border: 1px solid black;
    border-collapse: collapse;
}
td{
  text-align:center;
}

＆＃13;

<script data-require="moment.js@*" data-semver="2.14.1" src="https://npmcdn.com/moment@2.14.1"></script>
<script src="//code.angularjs.org/snapshot/angular.min.js"></script>

<div ng-app='app' ng-controller="MyController">
    <table>
      <tbody>
        <tr style='background-color:#5ca224'>
          <td rowspan='2'>First name</td>
          <td rowspan='2'>Last name</td>
          <td rowspan='2'>Holiday total in day</td>
          <td ng-repeat='month in months | orderBy : "n"' colspan='{{month.days.length}}'>{{month.name}}</td>
        </tr>
        <tr style='background-color:#5ee25e'>
            <td ng-repeat='day in days | orderBy : ["m", "n"]'>{{day.n}}</td>
        </tr>
        <tr ng-repeat='item in items track by $index'>
          <td>{{item.firstname}}</td>
          <td>{{item.lastname}}</td>
          <td>{{item.holidayTotal}}</td>
          <td ng-repeat='day in days | orderBy : ["m", "n"]'>{{exists(item.holidays, day) ? 'x' : ''}}</td>
        </tr>
      </tbody>
    </table>
</div>

＆＃13;

＆＃13;

＆＃13;