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来完成我们想要的除了一个问题：我们不希望禁用的复选标记图标出现在不可选择的行上。当行不可选时，是否有办法隐藏/折叠复选标记？

由于

Answer 1

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

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

是否可以删除不可选行上的“选中标记”

2 个答案: