是否可以删除无法选择的行上的 'checkmark'

Question

我们正在使用 ui-grid v3.1.1 并且有一个特定的用例，其中网格需要某些行可选择，而其他行则不可选，具体取决于特定单元格中的代码排。我们一直在将网格的 html 实现为：

<div id="gridSummary" ui-grid="gridOptions" class="grid-summary" ui-grid-auto-resize ui-grid-selection ui-grid-tree-view ui-grid-pinning>
        <div class="grid-empty" ng-show="!gridOptions.data.length">No Corresponding Data Found</div>
</div>

并且一直在试验 isRowSelectable gridOption，它可以满足我们的要求，但有一个问题除外：我们不希望禁用的复选标记图标出现在不可选择的行上。当该行不可选择时，有没有办法使复选标记为 hidden/collapsed？

谢谢

Answer 1

您可以通过更改非可选行的 rowHeaderIcon 来实现此目的。

您可以覆盖选择行 header 按钮的模板并添加自定义 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>"
  );

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

发现这个有用 plunker。

Answer 2

I'd like to propose this Plunker which has no icon at all for unselectable rows

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

是否可以删除无法选择的行上的 'checkmark'

Is it possible to remove 'checkmark' on unselectable rows

css

angularjs

angular-ui-grid