Angular ui 网格 - 特定于 class 不可选择的行

Question

我使用 angular ui-grid 来显示我的数据。

我在 gridOptions:

中启用了 select 行的选项

enableRowSelection: true,

但对于特定的行，我通过以下代码禁用了 selection：

$scope.mygrid.isRowSelectable = function (row) {
    if (row.entity.id == 2) {
        return false;
    } else {
        return true;
    }
};

这是工作，我不能 select id =2 的行，

但我想为这一行添加 class 以通知它无法select。

有什么想法吗？

Answer 1

要突出显示实际行：

您可以编写自己的 rowTemplate 并根据实体 ID 将 class 分配给行，如下所示，

 var rowTemplate =  '<div>' +
                 '  <div ng-class="{ \'red\': row.entity.company==\'Enersol\' }" 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>';
  $scope.gridOptions = {
    rowTemplate:rowTemplate,
    enableSorting: true,
    columnDefs: [
      { field: 'name'},
      { field: 'company'}
    ]
  };

您可以将 row.entity.company=\'Enersol\' 改为 row.entity.id 并指定 class 名称。

在此示例中，'red' 给出黄色背景色和红色前景色。

看看这个 plnkr。 http://plnkr.co/edit/vaqBY235Lfz7WLvy0FCc?p=preview

修改实际行header图标：

您可以覆盖选择行 header 按钮的模板并添加自定义 class css。在您的控制器中注入 templateCache 并像这样覆盖模板。

$templateCache.put('ui-grid/selectionRowHeaderButtons',
    "<div class=\"ui-grid-selection-row-header-buttons\" ng-class=\"{'ui-grid-row-selected': row.isSelected , 'ui-grid-icon-cancel':!grid.appScope.isSelectable(row.entity), 'ui-grid-icon-ok':grid.appScope.isSelectable(row.entity)}\" ng-click=\"selectButtonClick(row, $event)\">&nbsp;</div>"
  );

该模板在您的控制器范围内使用一种方法来确定该行是否可选择。

此处示例 plnkr http://plnkr.co/edit/vaqBY235Lfz7WLvy0FCc?p=preview

Answer 2

在 columnDefs 中你可以添加一个 cellClass.

function applyClass(grid, row, col, rowRenderIndex, colRenderIndex) {
    if (row.entity.IsMapped) {
        return 'disabledRow';
    }
}

$scope.yourGrid = {
    columnDefs: [
        { cellClass: applyClass }
    ]
};

Angular ui 网格 - 特定于 class 不可选择的行

Angular ui grid - specific class for unselectable row

angularjs

angular-ui-grid