Angular ui grid - 不可选择行的特定类答案

【问题标题】：Angular ui grid - specific class for unselectable rowAngular ui grid - 不可选择行的特定类
【发布时间】：2015-07-09 02:41:51
【问题描述】：

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

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

enableRowSelection: true,

但是对于特定的行，我通过此代码禁用选择：

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

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

但我想为这一行添加类以通知它不可选择。

有什么想法吗？

【问题讨论】：

标签： angularjs angular-ui-grid

【解决方案1】：

突出显示实际行：

您可以编写自己的 rowTemplate 并根据实体 id 将类分配给行，

 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\'。

在这个例子中，“红色”给出了黄色的背景色和红色的前景色。

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

要修改实际的行标题图标：

您可以覆盖选择行标题按钮的模板并添加自定义类 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

【讨论】：

也许我的问题并不清楚，但我希望特定类仅用于检查列（行侧的列，我可以单击它来选择行），而不是所有行
@BrMe 是的，您的问题并不清楚。您可以将函数分配给cellClass 属性并动态返回所需的类。在此处查看更多信息：brianhann.com/customize-ui-grid-with-dynamic-cell-classes
@BrMe 好的，看起来您正在尝试使用刻度线自定义行选择标题。 selectionRow 的模板是 selectionRowHeader ，如果行不可选择，您必须覆盖它才能将其更改为不同的符号。我会试着给你一个简单的例子。
@Kathir 是的，这正是我所需要的。我想以红色显示未选择行的选择列，以指示用户他无法选择该行。我很想得到一个示例代码，
@BrMe 我已经用行标题图标更新了答案。

【解决方案2】：

您可以在 columnDefs 中添加cellClass。

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

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

【讨论】：