我试图在 ng-grid 的最后一行显示一些聚合值(如总计)。最后一行的样式和 css 类需要与该列中的其他单元格不同。如何实现这一目标?
列定义中的 cellTemplate 适用于该列中的所有单元格,但在我的情况下,我需要为该列中的最后一行设置不同的样式。谁能给我建议一个解决方案。
谢谢苏迪普塔
我试图在 ng-grid 的最后一行显示一些聚合值(如总计)。最后一行的样式和 css 类需要与该列中的其他单元格不同。如何实现这一目标?
列定义中的 cellTemplate 适用于该列中的所有单元格,但在我的情况下,我需要为该列中的最后一行设置不同的样式。谁能给我建议一个解决方案。
谢谢苏迪普塔
我能够通过插件将一个类添加到最后一行:
function ngGridAddClassToLastRow(className) {
var self = this;
self.grid = null;
self.scope = null;
self.init = function (scope, grid, services) {
self.domUtilityService = services.DomUtilityService;
self.grid = grid;
self.scope = scope;
var addClass = function () {
var lastRow = self.scope.renderedRows[self.scope.renderedRows.length - 1];
lastRow.elm[0].className = lastRow.elm[0].className + ' ' + className;
};
self.scope.$watch(grid.config.data, addClass);
};
}
并将其添加到gridOptions
:
...
plugins: [new ngGridAddClassToLastRow('<some class name>'),
...
当然添加一些CSS,例如在我的情况下:
.lastRow {
border-bottom: 0px;
}
这对我有用。我不能肯定地说这是要走的路,不用说,我是 Angular 和 ngGrid 的菜鸟。我已经从灵活高度插件构建了插件。
您可以设置应在最后一行显示的项目的特殊属性“isLast”(或您喜欢的名称)。该项目可以通过 访问row.entity.isLast
。
...在您的控制器中的某个地方....
$scope.getRowClass = function(row) {
return row.entity.isLast === true ? 'lastRow' : '';
}
... gridOptions 内的某个地方 ...
rowTemplate: '<div ng-style="{ \'cursor\': row.cursor }" ng-repeat="col in renderedColumns" ng-class="[col.colIndex(), getRowClass(row)]" class="ngCell {{col.cellClass}}">....</div>'
基于.lastRow
该类,您可以为最后一个网格行定义自定义样式。