Question

刚开始使用ng-grid，如何更改网格中单个单元格的css。像backgroundcolor这样的事情，但也禁用和启用当前所选行中的1个单元格？

plunkr：http://plnkr.co/edit/zQTRd7hOR6vpVZlgfHq0?p=preview

Answer 1

如果使用columnDefs定义列，则可以更灵活。然后，您可以将属性添加到名为cellClass的定义中，您可以在样式表中定义该属性。

所有列定义属性都显示在ng-grid wiki上。如果需要，您可以重新定义单元格或标题模板，并为您想要的任何内容编写自定义代码。

更改后的代码：

  $scope.gridOptions = {
    data: 'myData',
    selectedItems: $scope.mySelections,
    enableCellEditOnFocus: true,
    multiSelect: true,
    afterSelectionChange: function() {
      $scope.selectedIDs = [];
      angular.forEach($scope.mySelections, function(item) {
        $scope.selectedIDs.push(item.name)
      });
    },
    columnDefs: [
      {field:'id', displayName:'Id', cellClass: 'red'}, 
      {field:'name', displayName:'Name', cellClass: 'blue'}
      ]
  };

Answer 2

如果你想要，你也可以放一个模板：

$scope.gridOptions = {
    data: 'myData',
    selectedItems: $scope.mySelections,
    enableCellEditOnFocus: true,
    multiSelect: true,
    afterSelectionChange: function() {
      $scope.selectedIDs = [];
      angular.forEach($scope.mySelections, function(item) {
        $scope.selectedIDs.push(item.name)
      });
    },
    columnDefs: [
      {field:'id', displayName:'Id',  cellTemplate: '<div class="ui-grid-cell-contents v-align-middle padding-20"><p>{{COL_FIELD}}</p></div>'}, 
      {field:'name', displayName:'Name',  cellTemplate: '<div class="ui-grid-cell-contents v-align-middle padding-20"><p>{{COL_FIELD}}</p></div>'}
      ]
  };

ng grid如何在nggrid中改变单个单元格的样式？

2 个答案: