Question

我在为Angular ui-grid指定行设置颜色时遇到问题我知道我可以使用行模板如下但是“row.sequence”没有生效有人可以在这里粘贴代码，告诉我如何根据行索引设置指定行的颜色吗？

var rowtpl='<div ng-class="{\'blue\':row.sequence==1}"><div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell></div></div>';
  // Danfer change: end
  this.gridOptions={
        appScopeProvider: this,
        headerTemplate:'./src/main/layout/modules/user/partials/headerTemplate.html',
        rowTemplate:rowtpl,
        enableSorting:true,
        enableHorizontalScrollbar :1,
        minRowsToShow: 10,
        multiSelect : true,
        enableRowSelection: true,
        enableSelectAll: true,
        enableVerticalScrollbar :1,
        enableColumnMenus:false,
        enableFiltering: true,
        paginationPageSizes: [50, 60, 70, 80],
        paginationPageSize: 50,
        onRegisterApi: function( gridApi ) { 
              lcl.gridApi = gridApi;

        }
  };

Answer 1

使用“grid.renderContainers.body.visibleRowCache.indexOf（row）”，这是有效的。

var rowtpl ='';

Answer 2

There is another problem. By setting row template, I can't update row color dynamically.

Here, 5 is static number pre-defined. It is working. The following row template can change row 5 to to blue color.
************************
var rowtpl='<div ng-class="{\'blue\':grid.renderContainers.body.visibleRowCache.indexOf(row)==5}"><div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell></div></div>';

************************

But I want to to like this:
When I loop the grid data, if meet some condition, I mark the row index. Then use this row index to set the row color. If I pass the "rowIndex" to "rowtpl", it is not working.
*************************
...
var rowtpl='<div ng-class="{\'blue\':grid.renderContainers.body.visibleRowCache.indexOf(row)==this.rowIndex}"><div ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ng-class="{ \'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell></div></div>';

this.gridOptions={ appScopeProvider: this, headerTemplate:'./src/main/layout/modules/user/partials/headerTemplate.html', rowTemplate:rowtpl, enableSorting:true, enableHorizontalScrollbar :1, minRowsToShow: 10, multiSelect : true, enableRowSelection: true, enableSelectAll: true, enableVerticalScrollbar :1, enableColumnMenus:false, enableFiltering: true, paginationPageSizes: [50, 60, 70, 80], paginationPageSize: 50, onRegisterApi: function( gridApi ) { lcl.gridApi = gridApi; 
...
this.notifyService.getMsg('GridDataLoaded', function(_event,_data){
    lcl.myData = _data;
    lcl.gridOptions.data = lcl.myData;
    for(let i=0; i< lcl.gridOptions.data.length; i++){
    if(lcl.userGridService.oldDefaulPortfolio.portfolioId === lcl.gridOptions.data[i].portfolioId){
        lcl.rowIndex = i;
        break;
     }
    }
    lcl.init();
});

*********************

AngularJS，ui-grid，如何为指定的行设置颜色

2 个答案: