Question

我试图在ng-grid的最后一行显示一些聚合值（如total）。最后一行的样式和css类需要与该列中的其他单元格不同。如何实现这个目标？

列定义中的cellTemplate适用于该列中的所有单元格，但在我的情况下，我需要为该列中的最后一行设置不同的样式。任何人都可以建议我一个解决方案。

由于 Sudipta

Answer 1

我能够通过插件在最后一行添加一个类：

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的菜鸟。我从flexible height plugin构建了插件。

Answer 2

您可以设置应在最后一行显示的项目的特殊属性“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类，您可以为最后一个网格行定义自定义样式。

ng-grid如何为最后一行设置单独的样式

2 个答案: