Angular ui Grid-不可选择行的特定类 [英] Angular ui grid - specific class for unselectable row

问题描述

我使用角度ui-grid来显示我的数据.

I use angular ui-grid to display my data.

我启用了在gridOptions中选择行的选项:

I enabled the option to select row in gridOptions:

enableRowSelection: true,

但是对于特定的行，我通过以下代码禁用了选择:

But for specific rows I disable the selection by this code:

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

这是工作，我无法选择id = 2的行，

This is work, I cant select row with id =2,

但是我想为此行添加类以通知它是不可选择的.

But I want to add class for this row to notify that it is unselectable.

有什么主意吗?

推荐答案

突出显示实际行:

您可以编写自己的rowTemplate并根据诸如此类的实体ID将类分配给该行，

You can write your own rowTemplate and assign the class to the row based on the entity id something like this,

 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.id并分配类名称，而不是row.entity.company = \'Enersol \'.

Instead of the row.entity.company=\'Enersol\' you can change it to row.entity.id and assign the class name.

在此示例中，红色"给出的背景颜色为黄色，前景颜色为红色.

In this example the the 'red' gives background color of yellow and foreground color of red.

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

Take a look at this plnkr. http://plnkr.co/edit/vaqBY235Lfz7WLvy0FCc?p=preview

要修改实际的行标题图标，请执行以下操作:

您可以覆盖选择行标题按钮的模板，并添加自定义类css.在您的控制器中注入templateCache并像这样覆盖模板.

You can override the template for the selection row header buttons and add custom class css. Inject templateCache in your controller and override the template like this.

$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>"
  );

该模板在您的控制器范围内使用一种方法来标识该行是否可选.

The template uses a method in your controller scope to identify whether the row is selectable.

在此处样本plnkr http://plnkr.co/edit/vaqBY235Lfz7WLvy0FCc?p=preview

Sample plnkr here http://plnkr.co/edit/vaqBY235Lfz7WLvy0FCc?p=preview

这篇关于Angular ui Grid-不可选择行的特定类的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！