如何将 ui 个网格单元格合并到 AngularJs 中的一列?
How can I merge ui grid cells into one column in AngularJs?
我想像这样在 UI 网格中显示数据,将多个单元格合并到 AngularJs 中的一列中。 UI-Grid 是否可行?答案将不胜感激。
是的,我找到了解决方案。我们可以只在 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 中的一列中。 UI-Grid 是否可行?答案将不胜感激。
是的,我找到了解决方案。我们可以只在 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= 任何东西只是为了匹配条件,即如果员工出现相同的日期,则不会生成另一行,只会进一步划分项目行。