Angularjs 角度ui网格基于标志启用禁用行元素
我使用AngularUI网格显示数据库tableUsers中的行列表。 我正在做一个后端调用,NodeJS从DB获取数据并返回。 此数据显示在角度ui网格中 我想启用或禁用一些html元素,根据当前用户的可访问性查看/编辑/删除。 如果当前用户是ADMIN,则所有链接都已启用。如果他是基本用户,则启用视图,禁用编辑和删除。 项目可访问性也从服务器返回。我只需要检查此标志并禁用/启用链接。 请让我知道,怎么做Angularjs 角度ui网格基于标志启用禁用行元素,angularjs,angular-ui-grid,Angularjs,Angular Ui Grid,我使用AngularUI网格显示数据库tableUsers中的行列表。 我正在做一个后端调用,NodeJS从DB获取数据并返回。 此数据显示在角度ui网格中 我想启用或禁用一些html元素,根据当前用户的可访问性查看/编辑/删除。 如果当前用户是ADMIN,则所有链接都已启用。如果他是基本用户,则启用视图,禁用编辑和删除。 项目可访问性也从服务器返回。我只需要检查此标志并禁用/启用链接。 请让我知道,怎么做 id name actions 1 AAA view edit de
id name actions
1 AAA view edit delete
2 BBB view edit delete
3 CCC view edit delete
4 DDD view edit delete
<div class="box">
<div class="box-content box-table">
<div ui-grid="gridUsers" ui-grid-pagination>
</div>
</div>
</div>
$scope.gridUsers = {
paginationPageSizes: [15, 30, 45],
paginationPageSize: 15,
enableColumnMenus: false,
data: $scope.users,
filterOptions: $scope.filterOptions,
columnDefs: [{ field: 'id', displayName: 'Id', width: '20%'},
{ field: 'name', displayName: 'Name', width: '25%', enableFiltering: true},
{ name: 'Actions', displayName: 'Actions', width: '55%', cellTemplate:
'<div class="grid-action-cell action-btns">'+
'<span class="btn-small"><span style="color:#214c77;">view</span> </a>' +
'<a ng-click="grid.appScope.edit(row.entity.id)" class="btn-small btn-link"><span style="color:#80bb41;">edit</span> </a>' +
'<a ng-click="grid.appScope.delete(row.entity.id)" class="btn-small btn-link"> <span style="color:#e15829;">delete</span> </a>'
'</div>'}
]
};
Service.GetAllUsers(function (response) {
if (response.length != 0) {
$scope.users = response;
$scope.gridUsers.data = $scope.users;
}
});
我也有同样的问题。
为了解决此问题,我在检索列后调用了一个函数:
function updateColumnsDefs() {
columnsDefs
.forEach(function(column) {
switch (column.field) {
case 'status' :
columnVal = '<span ng-if="c.' + column.filterBy + '">{{c.' + column.filterBy + '}}</span>';
column.cellTemplate = '<div class="ui-grid-cell-contents">' + columnVal + '</span></div>';
break;
default :
break;
}
}
如果使用延迟加载或过滤器,则应注意。在这种情况下,请记住每次数据模型更改时都要调用updateColumnsDefs。谢谢。我是否需要在$scope.gridUsers定义之后编写updateColumnsDefs定义?函数位置并不重要。唯一重要的是必须在$scope.gridUsers初始化之前调用updateColumnsDefs函数。我的vm.gridOptions相当于您的$scope.gridUsers.Ok。我只需要移动我需要启用/禁用属性的列。对吗?请注意,我使用了forEach。正如我所做的,您可以构建一个开关盒,用于按字段名过滤列。感谢Giaffa,当我有20行并将页面大小更改为5时,这不起作用。移动到下一页时,不会应用更改。
updateColumnsDefs();
vm.gridOptions = {
...
columnDefs : columnsDefs,
...
};