角度 ui-grid - 动态更改页面大小上的 css 样式正在更改

Question

在角度 ui-grid 中更改页面大小时如何动态更改 css 样式？ .

我的用例是，我想根据登录的用户类型以灰色显示编辑/删除。基于服务器端的“row.entity.isEditable”标志设置了ng-disabled并应用了基于禁用状态。

这非常适用于单次显示的所有行（比如 15 行）。如果我们将页面大小更改为 5 或 10，则样式不会正确呈现。因此，我们在 UI 中看到了不恰当的灰色/彩色链接。

请告诉我，如何解决这个问题。或者让我们知道您是否有其他解决方法？

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>

<style type="text/css">
    a[disabled="disabled"] {
        pointer-events: none;
    }
    span[disabled="disabled"] {
        color: #a8a8a8 !important
    }
</style>

  $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-disabled={{!row.entity.isEditable}} ng-click="grid.appScope.edit(row.entity.id)" class="btn-small btn-link"><span ng-disabled={{!row.entity.isEditable}} style="color:#80bb41;">edit</span> </a>' +
                '<a ng-disabled={{!row.entity.isEditable}} ng-click="grid.appScope.delete(row.entity.id)" class="btn-small btn-link"> <span ng-disabled={{!row.entity.isEditable}} style="color:#e15829;">delete</span> </a>' 
                '</div>'}
            ]
        };


 Service.GetAllUsers(function (response) {
            if (response.length != 0) {
                $scope.users = response;
                $scope.gridUsers.data = $scope.users;
            }
        }); 

谢谢

Answer 1

我的自定义 css 也有问题，但通过显式通知网格通知数据更改发生了数据更改来解决它。

//use onRegisterApi to handle grid events
$scope.gridUsers.onRegisterApi = function (gridApi) {
    $scope.gridApi = gridApi;

    //register an event for pagination
    gridApi.pagination.on.paginationChanged($scope, function (newPage, pageSize) {

        //call notifyDataChange to tell the grid that data has changed
        gridApi.core.notifyDataChange(uiGridConstants.dataChange.ALL);
    });
};