angular ui 基于条件的网格行模板颜色
angular ui grid row template color based on condition
我需要根据某些条件更改 angular ui 网格的行颜色。
目标在 ng-grid 中实现,如图所示
rowTemplate: '<div style="height: 100%" ng-class="{red: row.getProperty(\'viewed\') < 1}"><div ng-style="{ \'cursor\': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell ">' +
'<div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }"> </div>' +
'<div ng-cell></div>' +
'</div></div>',
如何在 angular ui 网格中实现同样的效果
我认为在 ng-grid 和 ui-grid 中,你都可以使用
cellTemplate: '<div style="height: 100%" ng-class="{red: row.getProperty(\'viewed\') < 1}"><div ng-style="{\'cursor\': row.cursor}" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell ">' +
'<div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ngVerticalBarVisible: !$last}"> </div>' +
'<div ng-cell></div>' +
'</div></div>',
根据 ui-网格 api:http://ui-grid.info/docs/#/api/ui.grid.class:GridRow,我不认为 "viewed" 是行的 属性。
但是,如果您想评估对象中的 属性(假设您的数据是一个对象数组),它看起来像这样。
您需要在 css 中使用它来覆盖默认的行着色
.ui-grid-row .ui-grid-cell {
background-color: inherit !important;
}
您的风格:
.my-style-1 {
background-color: #ff0000 !important;
}
.my-style-2 {
background-color: #ffffff !important;
}
.my-style-3 {
background-color: #0000ff !important;
}
行模板:
rowTemplate: '<div ng-class="{\'my-style-1\':row.entity.Field1===1, \'my-style-2\':row.entity.Field1===2, \'my-style-2\':row.entity.Field1===3}" <div ng-repeat="col in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ui-grid-cell></div></div>'
//example data
data:[{'Field1': 1, 'Field2': 'abc', 'Field3': 'def'},
{'Field1': 2, 'Field2': 'hij', 'Field3': 'klm'},
{'Field1': 3, 'Field2': 'nop', 'Field3': 'qrs'}];
代替其他答案中提到的cellTemplate
,您也可以使用cellClass
:
cellClass: function (grid, row) {
return row.entity.age < 18 ? 'young' : 'old';
};
对于我的 UI-Grid,我在 $scope.gridOptions 对象中使用以下行模板创建了条件格式:
rowTemplate: '<div ng-class="{\'recruiter-row-active\':row.entity.activePositions!=0, ' +
'\'recruiter-row-passive\':(row.entity.activePositions==0 && row.entity.passivePositions !=0),' +
'\'recruiter-row-free\':(row.entity.activePositions==0 && row.entity.passivePositions==0)}">' +
'<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>'
classes 看起来像这样:
.ui-grid-row .recruiter-row-active {
background-color: #ff816b !important;
}
.ui-grid-row .recruiter-row-passive {
background-color: #fcff9d !important;
}
.ui-grid-row .recruiter-row-free {
background-color: #70cc79 !important;
}
有问题的 html 行的 class 是 "ui-grid-row" 和 "ng-scope" 并且父元素有 class "ui-grid-canvas"
当我还实现了
时,我的条件格式也能正常工作
.ui-grid-row .ui-grid-cell {
background-color: inherit !important;
}
但是我不想影响我的网络应用程序中的其他网格。
如何让我的条件行格式覆盖默认值?
我需要根据某些条件更改 angular ui 网格的行颜色。 目标在 ng-grid 中实现,如图所示
rowTemplate: '<div style="height: 100%" ng-class="{red: row.getProperty(\'viewed\') < 1}"><div ng-style="{ \'cursor\': row.cursor }" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell ">' +
'<div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ ngVerticalBarVisible: !$last }"> </div>' +
'<div ng-cell></div>' +
'</div></div>',
如何在 angular ui 网格中实现同样的效果
我认为在 ng-grid 和 ui-grid 中,你都可以使用
cellTemplate: '<div style="height: 100%" ng-class="{red: row.getProperty(\'viewed\') < 1}"><div ng-style="{\'cursor\': row.cursor}" ng-repeat="col in renderedColumns" ng-class="col.colIndex()" class="ngCell ">' +
'<div class="ngVerticalBar" ng-style="{height: rowHeight}" ng-class="{ngVerticalBarVisible: !$last}"> </div>' +
'<div ng-cell></div>' +
'</div></div>',
根据 ui-网格 api:http://ui-grid.info/docs/#/api/ui.grid.class:GridRow,我不认为 "viewed" 是行的 属性。 但是,如果您想评估对象中的 属性(假设您的数据是一个对象数组),它看起来像这样。
您需要在 css 中使用它来覆盖默认的行着色
.ui-grid-row .ui-grid-cell {
background-color: inherit !important;
}
您的风格:
.my-style-1 {
background-color: #ff0000 !important;
}
.my-style-2 {
background-color: #ffffff !important;
}
.my-style-3 {
background-color: #0000ff !important;
}
行模板:
rowTemplate: '<div ng-class="{\'my-style-1\':row.entity.Field1===1, \'my-style-2\':row.entity.Field1===2, \'my-style-2\':row.entity.Field1===3}" <div ng-repeat="col in colContainer.renderedColumns track by col.colDef.name" class="ui-grid-cell" ui-grid-cell></div></div>'
//example data
data:[{'Field1': 1, 'Field2': 'abc', 'Field3': 'def'},
{'Field1': 2, 'Field2': 'hij', 'Field3': 'klm'},
{'Field1': 3, 'Field2': 'nop', 'Field3': 'qrs'}];
代替其他答案中提到的cellTemplate
,您也可以使用cellClass
:
cellClass: function (grid, row) {
return row.entity.age < 18 ? 'young' : 'old';
};
对于我的 UI-Grid,我在 $scope.gridOptions 对象中使用以下行模板创建了条件格式:
rowTemplate: '<div ng-class="{\'recruiter-row-active\':row.entity.activePositions!=0, ' +
'\'recruiter-row-passive\':(row.entity.activePositions==0 && row.entity.passivePositions !=0),' +
'\'recruiter-row-free\':(row.entity.activePositions==0 && row.entity.passivePositions==0)}">' +
'<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>'
classes 看起来像这样:
.ui-grid-row .recruiter-row-active {
background-color: #ff816b !important;
}
.ui-grid-row .recruiter-row-passive {
background-color: #fcff9d !important;
}
.ui-grid-row .recruiter-row-free {
background-color: #70cc79 !important;
}
有问题的 html 行的 class 是 "ui-grid-row" 和 "ng-scope" 并且父元素有 class "ui-grid-canvas"
当我还实现了
时,我的条件格式也能正常工作.ui-grid-row .ui-grid-cell {
background-color: inherit !important;
}
但是我不想影响我的网络应用程序中的其他网格。
如何让我的条件行格式覆盖默认值?