Question

我有一个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>

Answer 1

因此，经过2天试图杀死自己，我发现了一个解决方法。虽然仍然不是我想要的100％。

我在cellTemplate中添加了带有颜色选项的ng-class。但在这里，我不得不用“ui-grid-cell-contents”标签编写新的自定义样式。所以基本上我把所有东西都重复了。

然而，造型并不精确，因为背景颜色不会填满整个细胞。

我还考虑过使用cellClass，但无法使其正常工作。

Answer 2

好的，最后我开始工作了。

这里的关键是给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>';

我对此失去了健康，所以我希望阅读这篇文章可以帮助将来的某个人。

RowTemplate被UI-Grid中的Cell Template覆盖

2 个答案: