是否可以在不可选择的行上删除'对勾'

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