Angular ui grid - 不可选择行的特定类 [英] Angular ui grid - specific class for unselectable row
问题描述
我使用 angular ui-grid 来显示我的数据.
我在 gridOptions 中启用了选择行的选项:
enableRowSelection: true,
但是对于特定的行,我禁用了此代码的选择:
$scope.mygrid.isRowSelectable = 函数(行){如果(row.entity.id == 2){返回假;} 别的 {返回真;}};
这是可行的,我无法选择 id = 2 的行,
但我想为这一行添加类以通知它是不可选择的.
有什么想法吗?
突出显示实际行:
您可以编写自己的 rowTemplate 并根据类似这样的实体 ID 将类分配给行,
var rowTemplate = ''+' <div ng-class="{ \'red\': row.entity.company==\'Enersol\' }" ng-repeat="(colRenderIndex, col) in colContainer.renderedColumns 由 col.colDef 跟踪.name" class="ui-grid-cell" ng-class="{\'ui-grid-row-header-cell\': col.isRowHeader }" ui-grid-cell></div>'+'</div>';$scope.gridOptions = {行模板:行模板,启用排序:真,列定义:[{字段:'姓名'},{ 字段:'公司'}]};您可以将其更改为 row.entity.id 并指定类名,而不是 row.entity.company=\'Enersol\'.
在这个例子中,'red' 给出了黄色的背景色和红色的前景色.
看看这个 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)\"> </div>");
模板使用控制器范围内的方法来确定该行是否可选择.
此处的 plnkr 示例 http://plnkr.co/edit/vaqBY235Lfz7WLvy0FCc?p=preview一个>
I use angular ui-grid to display my data.
I enabled the option to select row in gridOptions:
enableRowSelection: true,
But for specific rows I disable the selection by this code:
$scope.mygrid.isRowSelectable = function (row) {
if (row.entity.id == 2) {
return false;
} else {
return true;
}
};
This is work, I cant select row with id =2,
But I want to add class for this row to notify that it is unselectable.
Any idea?
解决方案 To Highlight the actual row:
You can write your own rowTemplate and assign the class to the row based on the entity id something like this,
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'}
]
};
Instead of the row.entity.company=\'Enersol\' you can change it to row.entity.id and assign the class name.
In this example the the 'red' gives background color of yellow and foreground color of red.
Take a look at this plnkr. http://plnkr.co/edit/vaqBY235Lfz7WLvy0FCc?p=preview
To modify the actual row header icons:
You can override the template for the selection row header buttons and add custom class css. Inject templateCache in your controller and override the template like this.
$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)\"> </div>"
);
The template uses a method in your controller scope to identify whether the row is selectable.
Sample plnkr here http://plnkr.co/edit/vaqBY235Lfz7WLvy0FCc?p=preview
这篇关于Angular ui grid - 不可选择行的特定类的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文