對於不可選行的角度ui網格特定類

我能在gridOptions選擇行選項：

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

這是工作，我不能選擇行：

enableRowSelection: true,

但對於特定的行我通過這段代碼禁用選擇與id = 2，

但我想爲此行添加類以通知它是不可選的。

有什麼想法？

來源

2015-06-01 BrMe

要突出實際行：

您可以編寫自己的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'} 
    ] 
    };

取而代之的是一排的。 entity.company = \'Enersol \'您可以將其更改爲row.entity.id並分配類名稱。

在這個例子中，'紅'表示背景色爲黃色，前景色爲紅色。

看看這個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>" 
);

模板在您的控制器作用域中使用一種方法來確定行是否可選。

樣品這裏http://plnkr.co/edit/vaqBY235Lfz7WLvy0FCc?p=preview

來源

2015-06-01 19:02:20 Kathir

也許我的問題是不明確的，但我想只是檢查列（行，側欄，我可以點擊它，選擇行）的specfifc類，而不是所有的行 – BrMe

@BrMe是你的問題不清楚。你可以爲'cellClass'屬性分配一個函數，並且動態地返回你想要的類。在這裏看到更多：http://brianhann.com/customize-ui-grid-with-dynamic-cell-classes/ – c0bra

@BrMe好吧，看起來你正試圖用刻度標記自定義行選擇標題。 selectionRow的模板是selectionRowHeader，並且您將不得不重寫該模板以將其更改爲不同的符號，即該行不可選。我會盡力爲你舉個簡單的例子。 – Kathir

plnkr在columnDefs你可以添加一個cellClass。

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

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

來源

2015-07-08 18:41:51 JabberwockyDecompiler

對於不可選行的角度ui網格特定類

回答

相關問題