RowTemplate被UI-Grid中的Cell Template覆盖

时间:2017-11-24 08:13:11

标签: angularjs html5 angular-ui-grid ui-grid

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

2 个答案:

答案 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>';

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