我有一个ui网格,根据其中一个数据字段的值设置每行的背景颜色。其中一列是我希望显示为复选框的布尔值。除了第一列复选框外,行根据需要着色。
如果我删除了列celltemplate指令,它可以正常工作(单元格变色),所以我猜我的复选框模板不准确,或者它默认覆盖了rowtemplate。
我没有看到我的错误,或者我错过了一些额外的代码。
这是果汁。
var myrowTemplate= '<div ng-class="{\'stPending\':row.entity.xSTATUS==1, \'stConfirmed\':row.entity.xSTATUS==2, \'stFailed\':row.entity.xSTATUS==3, \'stDue\':row.entity.xSTATUS==4, \'stCanceled\':row.entity.xSTATUS==5, \'stPassed\':row.entity.xSTATUS==6 }">' +
'<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>';
var mycheckboxTemplate= '<div class="checkbox" style="text-align:center; margin-top:0px;" >' +
'<input type="checkbox" class="flat" ng-disabled="1" ng-model="row.entity.xACTIVE" >' +
'</div>';
$scope.gridOptions = {
data : $scope.options,
enableSorting: true,
enableFiltering: true,
paginationPageSizes: [16, 32, 64],
paginationPageSize: 16,
enablePaginationcontrols: true,
enableVerticalScrollbar: uiGridConstants.scrollbars.WHEN_NEEDED,
rowTemplate: myrowTemplate,
columnDefs: [
{ name: 'Active', field: 'xACTIVE', width: '7%', cellTemplate: mycheckboxTemplate},
{ name:'Location', field: 'xLOCATION'},
{ name:'Task', field: 'xTASK'},
{ name:'Section', field: 'xSECTION'},
{ name:'Name', field: 'xNAME'},
{ name:'Last Name', field: 'xLASTNAME'},
{ name:'Date', field: 'xDATE', width: '7%', type : 'date'},
],
onRegisterApi: function (gridApi) {
$scope.gridApi = gridApi;
gridApi.core.on.renderingComplete($scope, function () {
$timeout(function () {
var gridBodyElem = document.getElementById(gridApi.grid.id + '-grid-container');
gridBodyElem.addEventListener('mouseup', handleGridClick);
});
});
}
};
我的CSS中的自定义样式
.stConfirmed.ui-grid-cell-contents
{
background-color:red;
}
.stPending.ui-grid-cell-contents
{
background-color:green;
}
.stCancelled.ui-grid-cell-contents
{
background-color:transparent;
}
.stDue.ui-grid-cell-contents
{
background-color:yellow;
}
.stFailed.ui-grid-cell-contents
{
background-color:orange;
}
.stPassed.ui-grid-cell-contents
{
background-color:grey;
}
.gridUIOptions {
width: 100%;
height: 600px;
}
HTML以防万一
<div class="spacer col-md-12">
<div data-ui-grid="gridOptions" ui-grid-pagination ui-grid-selection class="gridUIOptions" ui-grid-auto-resize></div>
</div>
答案 0 :(得分:0)
因此,经过2天试图杀死自己,我发现了一个解决方法。虽然仍然不是我想要的100%。
我在cellTemplate中添加了带有颜色选项的ng-class。但在这里,我不得不用“ui-grid-cell-contents”标签编写新的自定义样式。所以基本上我把所有东西都重复了。
然而,造型并不精确,因为背景颜色不会填满整个细胞。
我还考虑过使用cellClass,但无法使其正常工作。
答案 1 :(得分:0)
好的,最后我开始工作了。
这里的关键是给cellTemplate提供完全相同的类“ui-grid-cell-contents”。如果没有,cellTemplate将采用其他类,如ui-grid-cell,因此它可以像rowTemplate一样工作。
var myrowTemplate= '<div ng-class="{\'stPending\':row.entity.xSTATUS==1, \'stConfirmed\':row.entity.xSTATUS==2, \'stFailed\':row.entity.xSTATUS==3, \'stDue\':row.entity.xSTATUS==4, \'stCanceled\':row.entity.xSTATUS==5, \'stPassed\':row.entity.xSTATUS==6 }">' +
'<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>';
var mycheckboxTemplate= '<div class="ui-grid-cell-contents" class="checkbox" style="text-align:center; margin-top:0px;" >' +
'<input type="checkbox" class="flat" ng-disabled="1" ng-model="row.entity.xACTIVE" >' +
'</div>';
我对此失去了健康,所以我希望阅读这篇文章可以帮助将来的某个人。