如何将 ui 个网格单元格合并到 AngularJs 中的一列？

Question

我想像这样在 UI 网格中显示数据，将多个单元格合并到 AngularJs 中的一列中。 UI-Grid 是否可行？答案将不胜感激。

Answer 1

是的，我找到了解决方案。我们可以只在 ui-grid 中添加一个字段并将 HTML table 分配给该字段的 cellTemplate，因为我们可以轻松地合并 html [=28= 中的行和列]s 根据条件。下面是需要合并单元格的 ui-grid 的 columnDef。这个解决方案肯定有效。

要分配给 Ui-Grid 的数据：

 [{
  "days":
  {
    "2020-10-05":
    {
      "projects": [
        { "hours": 2, "task": "cc", "name": "project_name" }
      ],
      "date": "2020-10-05"
    },
    "2020-10-06":
    {
      "projects": [
        { "hours": 2, "task": "c", "name": "project_name" }
      ],
      "date": "2020-10-06"
    },
    "2020-09-20":
    {
      "projects": [
        { "hours": 1, "task": "aa", "name": "project_name" }
      ],
      "date": "2020-09-20"
    },
  }, "employeeId": 10, "employeeName": "ABC"
}]

columnDefs:

        [
          {
            name: "Employee Name",
            field: "employeeName",
            width: "20%"
          },
          {
            field: "other",
            headerCellTemplate: '<div><table width="100%"><tr><th width="15%" class="alignC pb40">Date</th><th width="20%" class="alignC pb40">Project</th><th width="10%" class="alignC pb40">Hours</th><th class="alignC pb40">Task</th></tr></table></div>',
            cellTemplate: '<div ng-repeat= "day in row.entity.days"><table width="100%"><tr ng-repeat= "project in day.projects"><td rowspan="{{day.projects.length}}" ng-if="grid.appScope.vm.date != day.date" width="15%">{{day.date ? (grid.appScope.vm.date= day.date) : day.date}}</td><td width="20%">{{project.name}}</td><td width="10%">{{project.hours}}</td><td>{{project.task}}</td></tr></table></div><span ng-show = false>{{grid.appScope.vm.date="abc"}}</span>'
          }
] ]

取 vm.date= 任何东西只是为了匹配条件，即如果员工出现相同的日期，则不会生成另一行，只会进一步划分项目行。

如何将 ui 个网格单元格合并到 AngularJs 中的一列？

How can I merge ui grid cells into one column in AngularJs?

angularjs

bootstrap-4

angular-ui-grid