是否可以在不可選擇的行上刪除'對勾'

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