Javascript 如何在angular-ui-grid中为特定值的行着色？
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/26362666/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
How to color row on specific value in angular-ui-grid?
提问by tebanep
I'm trying to color a row depending on it's value in the new angular-ui-grid 3.0 rc12 but I haven't been able to. The following code used to work in the previous version (ngGrid):
我正在尝试根据它在新的 angular-ui-grid 3.0 rc12 中的值为一行着色，但我没能做到。以下代码用于在以前的版本 (ngGrid) 中工作：
$scope.gridOptions =
data: 'data.sites'
tabIndex: -1
enableSorting: true
noTabInterference: true
enableColumnResizing: true
enableCellSelection: true
columnDefs: [
{field: 'sv_name', displayName: 'Nombre'}
{field: 'sv_code', displayName: 'Placa'}
{field: 'count', displayName: 'Cuenta'}
]
rowTemplate: """<div ng-class="{green: true, blue: row.getProperty('count') === 1}"
ng-repeat="col in colContainer.renderedColumns track by col.colDef.name"
class="ui-grid-cell"
ui-grid-cell></div>"""
and the corresponding css:
和相应的css：
.grid {
width: 100%;
height: 250px;
}
.green {
background-color: #2dff07;
color: #006400;
}
.blue {
background-color: #1fe0f0;
color: #153ff0;
}
The problem here is that the expression:
这里的问题是表达式：
row.getProperty('count') === 1
Doesn't work anymore as it did in ngGrid. Any guesses of how to achive the same in angular-ui-grid (ui-grid.info)
不再像在 ngGrid 中那样工作。关于如何在 angular-ui-grid ( ui-grid.info) 中实现相同的任何猜测
Thanks a lot!
非常感谢！
回答by mainguy
The new ui-grid has a special property for the cellClass:
新的 ui-grid 对 cellClass 有一个特殊的属性：
$scope.gridOptions = {
enableSorting: true,
data:'myData',
columnDefs: [
{ field: 'sv_name', displayName: 'Nombre'},
{field: 'sv_code', displayName: 'Placa'},
{ field: 'count', displayName: 'Cuenta',
cellClass: function(grid, row, col, rowRenderIndex, colRenderIndex) {
if (grid.getCellValue(row,col) == 1) {
return 'blue';
}
return 'green';
}
}
]
};
Look at his Plunker
看看他的Plunker
Note that I made the color for class greenin redbecause it's better to see and to stir maximal confusion:-)
请注意，我为类的颜色绿中红，因为它是更好地看到和搅拌最大的困惑:-)
Update:
更新：
Here is the solution for row coloring.
这是行着色的解决方案。
Write your rowTemplate like this:
像这样写你的 rowTemplate：
var rowtpl='<div ng-class="{\'green\':true, \'blue\':row.entity.count==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>';
Here is the forked Plunker
Note that background-color is overwritten by cell backgrounds. Find a way around this by yourself:-)
请注意，背景颜色会被单元格背景覆盖。自己想办法解决这个问题:-)
Sorry for the initial misread of your question. I leave the cellClass part in this answer in case anyone may need it.
很抱歉最初误读了您的问题。我将 cellClass 部分留在这个答案中，以防有人需要它。
回答by Gabriel Dinant
Note that background-color is overwritten by cell backgrounds. Find a way around this by yourself:-)
请注意，背景颜色会被单元格背景覆盖。自己想办法解决这个问题:-)
Based on the previous answer, if you want to override the background-color at a row level you can use this:
根据上一个答案，如果您想在行级别覆盖背景颜色，您可以使用：
.ui-grid-row .ui-grid-cell {
background-color: inherit !important;
}
回答by Patrik Bego
You can simply just use specific css class
您可以简单地使用特定的 css 类
.invalidated {
background-color: #f2dede !important;
}
and add ng-class on row template div with 'invalidated' field or call a function (example is in plnkr):
并在带有“无效”字段的行模板 div 上添加 ng-class 或调用函数（示例在 plnkr 中）：
<div ng-class="{invalidated: row.entity.invalidated}"
Here is the plunkr http://plnkr.co/edit/syuRZorj0nGq3B9p3U1h?p=preview
这是 plunkr http://plnkr.co/edit/syuRZorj0nGq3B9p3U1h?p=preview
Hope that helps.
希望有帮助。
回答by Naushad KM
Please try thissee the code herehttp://plnkr.co/edit/WiIo7Dddxh52uloTtWTW?p=info.
I have covered many scenario based cell colors like.
请试试这个see the code herehttp://plnkr.co/edit/WiIo7Dddxh52uloTtWTW?p=info。
我已经涵盖了许多基于场景的单元格颜色，例如。
- Negative values cell will show in RED
- Dirty cells will be YELLOW.
- Editable cells will be WHITE
- NonEditable cells will be GREY
- Total value cells will be DARKGREYED
- 负值单元格将以红色显示
- 脏的单元格将是黄色的。
- 可编辑单元格将为白色
- 不可编辑的单元格将是灰色的
- 总价值单元格将是深灰色
Give it a try. May be you can grab some knowledge/idea from there.
试一试。也许你可以从那里获取一些知识/想法。
回答by Rajush
@Naushad KM and if anybody have to do real time cell validation after a $http call.
@Naushad KM 以及是否有人在 $http 调用后必须进行实时单元验证。
This is what it's doing:
这是它在做什么：
- Input a value in editable row.
- On focus loose (blur), makes an $http call.
- Validates the input value with returned data.
- Valid value will be GREEN, invalid will be RED.
- 在可编辑行中输入一个值。
- 在焦点松散（模糊）时，进行 $http 调用。
- 使用返回的数据验证输入值。
- 有效值为绿色，无效值为红色。
Example: Plunker
Example:普朗克
